feat(portal): implement login button auth redirect

Author: MFarabi619

apps/portal/app/routes/api.auth.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable node/prefer-global/process */
+import type { LoaderFunction } from '@remix-run/node'
+import { redirect } from '@remix-run/node'
+
+export const loader: LoaderFunction = async () => {
+  return redirect(`${process.env.NODE_ENV === 'development' ? process.env.CUHACKING_2025_PORTAL_LOCAL_URL : process.env.CUHACKING_2025_PORTAL_PUBLIC_URL}`)
+}
+
+export default function AuthRedirect() {
+  return null
+}

apps/portal/app/routes/login.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable unused-imports/no-unused-vars */
+/* eslint-disable node/prefer-global/process */
 import type { LoaderFunction } from '@remix-run/node'
 import { Login as LoginPage } from '@cuhacking/portal/pages/login'
 import { redirect } from '@remix-run/node'
@@ -7,18 +7,23 @@ export const loader: LoaderFunction = async ({ request }) => {
   const cookie = request.headers.get('Cookie')
 
   try {
-    const res = await fetch('http://localhost:8000/api/users/me', {
+    const res = await fetch(`${process.env.NODE_ENV === 'development' ? process.env.CUHACKING_2025_PORTAL_LOCAL_URL : process.env.CUHACKING_2025_PORTAL_PUBLIC_URL}/api/users/me`, {
       headers: { Cookie: cookie || '' },
     })
 
-    if (res.ok) {
+    if (!res.ok) {
+      return null
+    }
+
+    const data = await res.json()
+
+    if (data?.user) {
       return redirect('/dashboard')
     }
   }
   catch (error) {
-    // If error, show login page
+    console.error('Error fetching user:', error)
   }
-
   return null
 }
 

libs/portal/features/login/ui/call-to-action.tsx

@@ -2,12 +2,9 @@ import linkedinBlack from '@cuhacking/shared/assets/icons/socials/linkedin-black
 import { Button } from '@cuhacking/shared/ui/button'
 import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card'
 import { Typography } from '@cuhacking/shared/ui/typography'
-import { Form, useNavigation } from '@remix-run/react'
-import { signIn } from '../../../pages/login/index'
+import { Form } from '@remix-run/react'
 
 export function LoginCallToAction() {
-  const transition = useNavigation()
-
   return (
     <GlassmorphicCard
       className="w-full flex flex-col items-center gap-5 p-3 md:gap-6 md:px-14 md:py-8 lg:gap-8 lg:px-20 lg:py-10"
@@ -23,18 +20,12 @@ export function LoginCallToAction() {
         </h2>
       </header>
 
-      <Form method="post">
+      <Form method="get" action="/api/auth">
         <Button
+          type="submit"
           variant="primary"
           className="flex items-center gap-x-3 px-4 md:px-6 lg:px-8 py-4"
           aria-label="Login with Linkedin"
-          disabled={transition.state === 'submitting'}
-          onClick={async () => {
-            await signIn.social({
-              provider: 'linkedin',
-              callbackURL: '/hello',
-            })
-          }}
         >
           <img src={linkedinBlack} alt="Linkedin logo" className="size-5" />
           <Typography variant="h6">Log In</Typography>