MFA: display meaningful errors

apps/web/app/layout.tsx

@@ -26,7 +26,7 @@ export default async function RootLayout({
           {children}
         </RootProviders>
 
-        <Toaster richColors={false} />
+        <Toaster richColors={true} theme={theme} position="top-center" />
       </body>
     </html>
   );
@@ -52,7 +52,7 @@ function getClassName(theme?: string) {
 }
 
 function getTheme() {
-  return cookies().get('theme')?.value;
+  return cookies().get('theme')?.value as 'light' | 'dark' | 'system';
 }
 
 export const generateMetadata = generateRootMetadata;

apps/web/config/auth.config.ts

@@ -39,7 +39,7 @@ const authConfig = AuthConfigSchema.parse({
   // in your production project
   providers: {
     password: process.env.NEXT_PUBLIC_AUTH_PASSWORD === 'true',
-    magicLink: process.env.NEXT_PUBLIC_AUTH_MAGIC_LINK === 'true',
+    magicLink: true,
     oAuth: ['google'],
   },
 } satisfies z.infer<typeof AuthConfigSchema>);

apps/web/public/locales/en/auth.json

@@ -76,6 +76,7 @@
     "passwordsDoNotMatch": "The passwords do not match",
     "minPasswordNumbers": "Password must contain at least one number",
     "minPasswordSpecialChars": "Password must contain at least one special character",
-    "uppercasePassword": "Password must contain at least one uppercase letter"
+    "uppercasePassword": "Password must contain at least one uppercase letter",
+    "insufficient_aal": "Please sign-in with your current multi-factor authentication to perform this action"
   }
 }