fix: backend bug and start auth flow with feide

src/app/[locale]/auth/page.tsx

@@ -1,9 +1,11 @@
 import { FeideLogo } from '@/components/assets/logos/FeideLogo';
 import { Button } from '@/components/ui/Button';
 import { Separator } from '@/components/ui/Separator';
+import { api } from '@/lib/api/server';
 import { Link } from '@/lib/locale/navigation';
 import { FingerprintIcon } from 'lucide-react';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
+import ExternalLink from 'next/link';
 
 export default async function SignInPage({
   params,
@@ -13,17 +15,23 @@ export default async function SignInPage({
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations('auth');
+  const feideUrlHref = await api.auth.getFeideUrlHref();
   return (
-    <div className='flex h-full flex-col transition-opacity duration-500'>
+    <div className='relative flex h-full flex-col transition-opacity duration-500'>
       <div className='mb-4 space-y-2 text-center'>
         <h1 className='text-4xl'>{t('welcome')}</h1>
         <p className='text-sm'>{t('description')}</p>
       </div>
       <Separator />
-      <div className='absolute bottom-0 space-y-4'>
+      <div className='absolute bottom-0 left-0 w-full space-y-4'>
         <p className='text-center font-montserrat'>{t('signInWith')}</p>
-        <Button className='w-full bg-[#3FACC2]/90 hover:bg-[#3FACC2] dark:bg-[#222832] hover:dark:bg-[#222832]/40'>
-          <FeideLogo title='Feide' />
+        <Button
+          className='w-full bg-[#3FACC2]/90 hover:bg-[#3FACC2] dark:bg-[#222832] hover:dark:bg-[#222832]/40'
+          asChild
+        >
+          <ExternalLink href={feideUrlHref}>
+            <FeideLogo title='Feide' />
+          </ExternalLink>
         </Button>
         <Button
           className='flex w-full gap-1 bg-primary/80 font-montserrat font-semibold text-black text-md dark:bg-primary/50 dark:text-white hover:dark:bg-primary/40'

src/app/api/auth/feide/route.ts

@@ -22,6 +22,7 @@ export async function GET(request: NextRequest) {
       },
     });
     const userInfo = await userInfoResponse.json();
+    console.log(userInfo);
   } catch (error) {
     // the specific error message depends on the provider
     if (error instanceof OAuth2RequestError) {

src/components/assets/logos/HackerspaceLogo.tsx

@@ -18,7 +18,7 @@ function HackerspaceLogo({ className, ...props }: { className?: string }) {
         d='M46.697,71.821l-1.193-2.641l4.751-1.918l-0.56-9.096c-0.026-0.418,0.131-0.826,0.43-1.121l6.133-6.028  c0.299-0.295,0.71-0.447,1.131-0.411l9.086,0.732l1.573-3.699l-6.829-6.041c-0.315-0.278-0.493-0.68-0.49-1.1l0.093-8.594  c0.004-0.42,0.19-0.817,0.511-1.089l6.938-5.893l-1.507-3.734l-9.085,0.558c-0.418,0.03-0.828-0.131-1.122-0.43l-6.029-6.131  c-0.294-0.299-0.444-0.713-0.411-1.132l0.734-9.085l-3.709-1.575l-6.033,6.822c-0.278,0.314-0.645,0.512-1.099,0.489l-8.604-0.082  c-0.419-0.004-0.816-0.19-1.088-0.51l-5.904-6.931l-3.725,1.499l0.559,9.085c0.03,0.5-0.254,0.915-0.608,1.27  c-1.073,1.074-5.148,5.041-5.813,5.705c-0.354,0.354-0.773,0.634-1.281,0.586L4.47,20.602l-1.575,3.699l6.819,6.022  c0.315,0.279,0.494,0.68,0.49,1.1l-0.082,8.614c-0.004,0.42-0.189,0.817-0.51,1.09L2.673,47.03l1.507,3.726l9.096-0.56  c0.415-0.035,0.829,0.132,1.123,0.431l6.019,6.142c0.294,0.301,0.443,0.713,0.409,1.133l-0.732,9.064l4.67,1.992l-1.136,2.664  l-5.631-2.401c-0.574-0.244-0.927-0.828-0.875-1.449l0.766-9.446l-5.096-5.197L3.316,53.71c-0.619,0.022-1.198-0.324-1.432-0.902  l-2.289-5.661C-0.638,46.569-0.475,45.905,0,45.5l7.232-6.153l0.069-7.291l-7.107-6.276c-0.468-0.413-0.618-1.078-0.374-1.653  l2.392-5.619c0.243-0.574,0.82-0.934,1.448-0.877l9.325,0.744c0.986-0.986,4.042-3.944,5.322-5.224l-0.574-9.336  c-0.039-0.621,0.326-1.199,0.905-1.432l5.659-2.279c0.578-0.232,1.239-0.069,1.645,0.405l6.151,7.222l7.282,0.07l6.286-7.108  c0.412-0.467,1.077-0.619,1.65-0.374l5.632,2.391c0.574,0.244,0.929,0.828,0.877,1.45l-0.765,9.467l5.102,5.188l9.469-0.582  c0.625-0.045,1.199,0.325,1.432,0.903l2.29,5.671c0.232,0.578,0.068,1.242-0.406,1.646l-7.232,6.143l-0.076,7.271l7.114,6.295  c0.468,0.414,0.617,1.079,0.374,1.651l-2.392,5.621c-0.244,0.574-0.823,0.921-1.45,0.877l-9.465-0.764l-5.189,5.101l0.584,9.478  c0.039,0.625-0.326,1.201-0.905,1.435L46.697,71.821z'
       />
       <path
-        className='dark fill-foreground-primary dark:fill-foreground'
+        className='fill-foreground-primary dark:fill-foreground'
         d='M33.593,77.743l13.104-5.923l-1.192-2.64l-13.061,5.902l-0.002-0.002l-2.549,1.047l-3.007-1.503  c-0.557-0.278-1.23-0.169-1.671,0.271l-1.717,1.716c-0.443,0.44-0.552,1.116-0.272,1.673l1.453,2.904  c-0.345,0.658-0.631,1.35-0.855,2.072l-3.08,1.022c-0.593,0.196-0.991,0.751-0.991,1.374v2.423c0,0.623,0.398,1.177,0.988,1.373  l3.196,1.071l0.794,1.923l-1.506,3.017c-0.278,0.561-0.167,1.234,0.276,1.676l1.717,1.707c0.44,0.436,1.112,0.545,1.668,0.268  l3.006-1.504l1.936,0.802l1.059,3.185c0.196,0.592,0.75,0.99,1.372,0.99h2.423c0.623,0,1.176-0.396,1.374-0.988l1.068-3.187  l1.927-0.802l3.017,1.504c0.561,0.279,1.234,0.168,1.674-0.275l1.706-1.717c0.438-0.441,0.547-1.113,0.269-1.669l-1.504-3.007  l0.795-1.926l3.193-1.066c0.592-0.197,0.989-0.751,0.989-1.374v-2.423c0-0.622-0.397-1.176-0.989-1.374l-3.193-1.065l-0.795-1.927  l1.504-3.007l-2.59-1.295l-1.8,3.596c-0.188,0.375-0.203,0.813-0.042,1.2l1.298,3.147c0.16,0.389,0.479,0.688,0.878,0.821  l2.833,0.946v0.337l-2.833,0.946c-0.398,0.133-0.718,0.432-0.878,0.822l-1.298,3.146c-0.161,0.387-0.146,0.825,0.042,1.199  l1.334,2.666l-0.235,0.238l-2.672-1.332c-0.376-0.187-0.814-0.203-1.201-0.041l-3.146,1.308c-0.388,0.159-0.687,0.479-0.819,0.877  l-0.945,2.825h-0.335l-0.938-2.822c-0.132-0.4-0.432-0.721-0.82-0.881l-3.157-1.307c-0.387-0.162-0.826-0.145-1.202,0.041  l-2.665,1.334l-0.237-0.236l1.333-2.67c0.186-0.377,0.201-0.813,0.042-1.199l-1.298-3.146c-0.168-0.408-0.516-0.711-0.926-0.834  l-2.787-0.934v-0.336l2.82-0.938c0.475-0.158,0.833-0.547,0.951-1.031c0.239-0.987,0.62-1.909,1.134-2.739  c0.263-0.429,0.286-0.96,0.062-1.409l-1.331-2.662l0.239-0.24l2.663,1.332c0.375,0.187,0.813,0.201,1.199,0.043l3.157-1.299'
       />
     </svg>

src/server/api/locale.ts

@@ -1,20 +1,19 @@
-import { TRPCError } from '@trpc/server';
-import { getTranslations } from 'next-intl/server';
-import { cookies } from 'next/headers';
-
 import { routing } from '@/lib/locale';
 
-async function getLocaleFromCookie() {
-  const cookieStore = await cookies();
-  const locale = cookieStore.get('locale')?.value ?? routing.defaultLocale;
-  if (!routing.locales.includes(locale as 'en')) {
-    const t = await getTranslations('error');
-    throw new TRPCError({
-      code: 'BAD_REQUEST',
-      message: t('invalidLocale', { locale }),
-    });
+function getLocaleFromRequest(request: Request) {
+  const acceptLanguage = request.headers.get('accept-language');
+  if (!acceptLanguage) {
+    return routing.defaultLocale;
   }
-  return locale;
+  const preferredLocale =
+    acceptLanguage.split(',').at(0)?.split(';').at(0)?.toLowerCase().trim() ??
+    '';
+
+  return routing.locales.includes(
+    preferredLocale as (typeof routing.locales)[number],
+  )
+    ? (preferredLocale as (typeof routing.locales)[number])
+    : routing.defaultLocale;
 }
 
-export { getLocaleFromCookie };
+export { getLocaleFromRequest };

src/server/api/routers/auth.ts

@@ -1,28 +1,26 @@
 import { publicProcedure } from '@/server/api/procedures';
 import { RefillingTokenBucket } from '@/server/api/rate-limit/refillingTokenBucket';
 import { createRouter } from '@/server/api/trpc';
-import { getFeideAuthorizationURL } from '@/server/auth/feide';
+import { getFeideAuthorizationUrl } from '@/server/auth/feide';
 
 import { TRPCError } from '@trpc/server';
 import { headers } from 'next/headers';
 
 const ipBucket = new RefillingTokenBucket<string>(5, 60);
 
 const authRouter = createRouter({
-  getFeideAuthorizationURL: publicProcedure.query(async () => {
+  getFeideUrlHref: publicProcedure.query(async () => {
     const headerStore = await headers();
     const clientIP = headerStore.get('X-Forwarded-For');
 
     if (clientIP !== null && !ipBucket.check(clientIP, 1)) {
       throw new TRPCError({
         code: 'TOO_MANY_REQUESTS',
         message: 'Rate limit exceeded. Please try again later.',
-        data: {
-          toast: 'error',
-        },
       });
     }
-    return getFeideAuthorizationURL();
+    const feideUrl = await getFeideAuthorizationUrl();
+    return feideUrl.href;
   }),
 });
 

src/server/api/trpc.ts

@@ -1,22 +1,17 @@
 import type { createContext } from '@/server/api/context';
-import type { TRPCError } from '@/server/api/types';
 import { initTRPC } from '@trpc/server';
 import superjson from 'superjson';
 import { ZodError } from 'zod';
 
 const trpc = initTRPC.context<typeof createContext>().create({
   transformer: superjson,
   errorFormatter({ shape, error }) {
-    const TRPCError = error as TRPCError;
     return {
       ...shape,
       data: {
         ...shape.data,
         zodError:
-          TRPCError.cause instanceof ZodError
-            ? TRPCError.cause.flatten()
-            : null,
-        toast: TRPCError.toast,
+          error.cause instanceof ZodError ? error.cause.flatten() : null,
       },
     };
   },

src/server/auth/feide.ts

@@ -15,7 +15,7 @@ const feideOAuthClient = new OAuth2Client(
   },
 );
 
-function getFeideAuthorizationURL() {
+function getFeideAuthorizationUrl() {
   const state = generateState();
   const codeVerifier = generateCodeVerifier(); // Optional for PKCE flow
 
@@ -48,4 +48,4 @@ async function validateFeideAuthorizationCode(
   }
 }
 
-export { getFeideAuthorizationURL, validateFeideAuthorizationCode };
+export { getFeideAuthorizationUrl, validateFeideAuthorizationCode };