change href with redirectDocument

packages/frontend/app/routes/auth._index.tsx

@@ -1,7 +1,8 @@
+import { Form } from '@remix-run/react'
 import { Button } from '../components/ui'
 import variables from '../lib/envConfig.server'
 import { checkAuthAndRedirect } from '../lib/kratos_checks.server'
-import { type LoaderFunctionArgs } from '@remix-run/node'
+import { redirectDocument, type LoaderFunctionArgs } from '@remix-run/node'
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
@@ -10,8 +11,13 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   return null
 }
 
+export const action = () => {
+  return redirectDocument(
+    `${variables.kratosBrowserPublicUrl}/self-service/login/browser`
+  );
+};
+
 export default function Auth() {
-  const loginUrl = `${variables.kratosBrowserPublicUrl}/self-service/login/browser`
   return (
     <div className='pt-4 flex flex-col'>
       <div className='flex flex-col rounded-md bg-offwhite px-6 text-center min-h-[calc(100vh-7rem)] md:min-h-[calc(100vh-3rem)]'>
@@ -33,9 +39,11 @@ export default function Auth() {
             </a>
           </p>
           <div>
-            <Button aria-label='logout' href={loginUrl} className='mr-2'>
-              Login
-            </Button>
+            <Form method="post">
+              <Button aria-label='logout' type='submit' className='mr-2'>
+                Login
+              </Button>
+            </Form>
           </div>
         </div>
       </div>