Revert "chore: work on getting locale onthe backend through headers"

This reverts commit 029fa38.

messages/en.json

@@ -31,7 +31,8 @@
     "error": "Oops! Something went wrong",
     "errorDescription": "Don't worry, our best hackers are on it!",
     "goToHomepage": "Return to homepage",
-    "tryAgain": "Try again"
+    "tryAgain": "Try again",
+    "invalidLocale": "Invalid locale: {locale}"
   },
   "auth": {
     "welcome": "Welcome!",

messages/no.json

@@ -31,7 +31,8 @@
     "error": "Oops! Noe gikk galt",
     "errorDescription": "Ikke bekymre deg, våre beste hackere jobber med saken!",
     "goToHomepage": "Gå tilbake til hjemmesiden",
-    "tryAgain": "Prøv igjen"
+    "tryAgain": "Prøv igjen",
+    "invalidLocale": "Ugyldig språk: {locale}"
   },
   "auth": {
     "welcome": "Velkommen!",

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

@@ -1,11 +1,9 @@
 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,
@@ -15,23 +13,17 @@ 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='relative flex h-full flex-col transition-opacity duration-500'>
+    <div className='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 left-0 w-full space-y-4'>
+      <div className='absolute bottom-0 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'
-          asChild
-        >
-          <ExternalLink href={feideUrlHref}>
-            <FeideLogo title='Feide' />
-          </ExternalLink>
+        <Button className='w-full bg-[#3FACC2]/90 hover:bg-[#3FACC2] dark:bg-[#222832] hover:dark:bg-[#222832]/40'>
+          <FeideLogo title='Feide' />
         </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,7 +22,6 @@ 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/app/api/data/[trpc]/route.ts

@@ -1,16 +1,15 @@
 import { env } from '@/env';
 import { router } from '@/server/api';
 import { createContext } from '@/server/api/context';
-import { getLocaleFromRequest } from '@/server/api/locale';
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
 import type { NextRequest } from 'next/server';
 
-function handleRequest(req: NextRequest) {
+const handleRequest = (req: NextRequest) =>
   fetchRequestHandler({
     endpoint: '/api/data',
     req,
     router,
-    createContext: () => createContext(getLocaleFromRequest(req)),
+    createContext,
     onError:
       env.NODE_ENV === 'development'
         ? ({ path, error }) => {
@@ -20,7 +19,6 @@ function handleRequest(req: NextRequest) {
           }
         : undefined,
   });
-}
 
 export {
   handleRequest as GET,

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='fill-foreground-primary dark:fill-foreground'
+        className='dark 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/components/providers/TRPCProvider.tsx

@@ -5,7 +5,6 @@ import { api } from '@/lib/api/client';
 import { createQueryClient } from '@/lib/api/queryClient';
 import { type QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
-import { useLocale } from 'next-intl';
 import { useState } from 'react';
 import SuperJSON from 'superjson';
 
@@ -24,7 +23,6 @@ const getQueryClient = () => {
 
 function TRPCProvider(props: { children: React.ReactNode }) {
   const queryClient = getQueryClient();
-  const locale = useLocale();
 
   const [trpcClient] = useState(() =>
     api.createClient({
@@ -40,7 +38,6 @@ function TRPCProvider(props: { children: React.ReactNode }) {
           headers: () => {
             const headers = new Headers();
             headers.set('x-trpc-source', 'nextjs-react');
-            headers.set('accept-language', locale);
             return headers;
           },
         }),

src/lib/api/server.ts

@@ -1,5 +1,4 @@
 import 'server-only';
-import { getLocale } from 'next-intl/server';
 
 import { createQueryClient } from '@/lib/api/queryClient';
 import { createCaller, type router } from '@/server/api';
@@ -8,7 +7,7 @@ import { createHydrationHelpers } from '@trpc/react-query/rsc';
 import { cache } from 'react';
 
 const getQueryClient = cache(createQueryClient);
-const caller = createCaller(createContext(await getLocale()));
+const caller = createCaller(createContext);
 
 const { trpc: api, HydrateClient } = createHydrationHelpers<typeof router>(
   caller,

src/server/api/context.ts

@@ -1,4 +1,3 @@
-import { routing } from '@/lib/locale';
 import { auth } from '@/server/auth';
 import { db } from '@/server/db';
 import { s3 } from '@/server/s3';
@@ -7,21 +6,13 @@ type TRPCContext = {
   db: typeof db;
   auth: typeof auth;
   s3: typeof s3;
-  locale: (typeof routing.locales)[number];
 };
 
-function createContext(locale: string): TRPCContext {
-  const validLocale = routing.locales.includes(
-    locale as (typeof routing.locales)[number],
-  )
-    ? (locale as (typeof routing.locales)[number])
-    : routing.defaultLocale;
-
+function createContext(): TRPCContext {
   return {
     auth,
     db,
     s3,
-    locale: validLocale,
   };
 }
 

src/server/api/locale.ts

@@ -1,19 +1,20 @@
+import { TRPCError } from '@trpc/server';
+import { getTranslations } from 'next-intl/server';
+import { cookies } from 'next/headers';
+
 import { routing } from '@/lib/locale';
 
-function getLocaleFromRequest(request: Request) {
-  const acceptLanguage = request.headers.get('accept-language');
-  if (!acceptLanguage) {
-    return routing.defaultLocale;
+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 }),
+    });
   }
-  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;
+  return locale;
 }
 
-export { getLocaleFromRequest };
+export { getLocaleFromCookie };

src/server/api/routers/auth.ts

@@ -1,15 +1,15 @@
 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({
-  getFeideUrlHref: publicProcedure.query(async () => {
+  getFeideAuthorizationURL: publicProcedure.query(async () => {
     const headerStore = await headers();
     const clientIP = headerStore.get('X-Forwarded-For');
 
@@ -22,8 +22,7 @@ const authRouter = createRouter({
         },
       });
     }
-    const feideUrl = await getFeideAuthorizationUrl();
-    return feideUrl.href;
+    return getFeideAuthorizationURL();
   }),
 });
 

src/server/api/trpc.ts

@@ -1,5 +1,6 @@
 import type { createContext } from '@/server/api/context';
-import { type TRPCError, initTRPC } from '@trpc/server';
+import type { TRPCError } from '@/server/api/types';
+import { initTRPC } from '@trpc/server';
 import superjson from 'superjson';
 import { ZodError } from 'zod';
 
@@ -15,6 +16,7 @@ const trpc = initTRPC.context<typeof createContext>().create({
           TRPCError.cause instanceof ZodError
             ? TRPCError.cause.flatten()
             : null,
+        toast: TRPCError.toast,
       },
     };
   },

src/server/api/types.ts

@@ -0,0 +1,7 @@
+import type { TRPCError as BaseTRPCError } from '@trpc/server';
+
+type TRPCError = BaseTRPCError & {
+  toast?: 'success' | 'info' | 'warning' | 'error';
+};
+
+export type { TRPCError };

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 };