Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

packages/features/auth/src/components/magic-link-auth-container.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { CheckIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Check, TriangleAlert } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
+import * as z from 'zod';
 
 import { useAppEvents } from '@kit/shared/events';
 import { useSignInWithOtp } from '@kit/supabase/hooks/use-sign-in-with-otp';
@@ -44,7 +44,7 @@ export function MagicLinkAuthContainer({
   };
 }) {
   const captcha = useCaptcha({ siteKey: captchaSiteKey });
-  const { t } = useTranslation();
+  const t = useTranslations();
   const signInWithOtpMutation = useSignInWithOtp();
   const appEvents = useAppEvents();
   const { recordAuthMethod } = useLastAuthMethod();
@@ -90,9 +90,9 @@ export function MagicLinkAuthContainer({
     };
 
     toast.promise(promise, {
-      loading: t('auth:sendingEmailLink'),
-      success: t(`auth:sendLinkSuccessToast`),
-      error: t(`auth:errors.linkTitle`),
+      loading: t('auth.sendingEmailLink'),
+      success: t(`auth.sendLinkSuccessToast`),
+      error: t(`auth.errors.linkTitle`),
     });
 
     captcha.reset();
@@ -116,7 +116,7 @@ export function MagicLinkAuthContainer({
             render={({ field }) => (
               <FormItem>
                 <FormLabel>
-                  <Trans i18nKey={'common:emailAddress'} />
+                  <Trans i18nKey={'common.emailAddress'} />
                 </FormLabel>
 
                 <FormControl>
@@ -133,17 +133,20 @@ export function MagicLinkAuthContainer({
             <TermsAndConditionsFormField />
           </If>
 
-          <Button disabled={signInWithOtpMutation.isPending || captchaLoading}>
+          <Button
+            type="submit"
+            disabled={signInWithOtpMutation.isPending || captchaLoading}
+          >
             <If condition={captchaLoading}>
-              <Trans i18nKey={'auth:verifyingCaptcha'} />
+              <Trans i18nKey={'auth.verifyingCaptcha'} />
             </If>
 
             <If condition={signInWithOtpMutation.isPending && !captchaLoading}>
-              <Trans i18nKey={'auth:sendingEmailLink'} />
+              <Trans i18nKey={'auth.sendingEmailLink'} />
             </If>
 
             <If condition={!signInWithOtpMutation.isPending && !captchaLoading}>
-              <Trans i18nKey={'auth:sendEmailLink'} />
+              <Trans i18nKey={'auth.sendEmailLink'} />
             </If>
           </Button>
         </div>
@@ -155,14 +158,14 @@ export function MagicLinkAuthContainer({
 function SuccessAlert() {
   return (
     <Alert variant={'success'}>
-      <CheckIcon className={'h-4'} />
+      <Check className={'h-4'} />
 
       <AlertTitle>
-        <Trans i18nKey={'auth:sendLinkSuccess'} />
+        <Trans i18nKey={'auth.sendLinkSuccess'} />
       </AlertTitle>
 
       <AlertDescription>
-        <Trans i18nKey={'auth:sendLinkSuccessDescription'} />
+        <Trans i18nKey={'auth.sendLinkSuccessDescription'} />
       </AlertDescription>
     </Alert>
   );
@@ -171,14 +174,14 @@ function SuccessAlert() {
 function ErrorAlert() {
   return (
     <Alert variant={'destructive'}>
-      <ExclamationTriangleIcon className={'h-4'} />
+      <TriangleAlert className={'h-4'} />
 
       <AlertTitle>
-        <Trans i18nKey={'auth:errors.linkTitle'} />
+        <Trans i18nKey={'auth.errors.linkTitle'} />
       </AlertTitle>
 
       <AlertDescription>
-        <Trans i18nKey={'auth:errors.linkDescription'} />
+        <Trans i18nKey={'auth.errors.linkDescription'} />
       </AlertDescription>
     </Alert>
   );