Add OTP sign-in option + Account Linking (#276)

* feat(accounts): allow linking email password
* feat(auth): add OTP sign-in
* refactor(accounts): remove 'sonner' dependency and update toast imports
* feat(supabase): enable analytics and configure database seeding
* feat(auth): update email templates and add OTP template
* feat(auth): add last sign in method hints
* feat(config): add devIndicators position to bottom-right
* feat(auth): implement comprehensive last authentication method tracking tests

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -91,7 +91,7 @@ export function PersonalAccountDropdown({
         aria-label="Open your profile menu"
         data-test={'account-dropdown-trigger'}
         className={cn(
-          'animate-in fade-in focus:outline-primary flex cursor-pointer items-center duration-500 group-data-[minimized=true]:px-0',
+          'animate-in group/trigger fade-in focus:outline-primary flex cursor-pointer items-center border border-dashed group-data-[minimized=true]:px-0',
           className ?? '',
           {
             ['active:bg-secondary/50 items-center gap-4 rounded-md' +
@@ -100,7 +100,9 @@ export function PersonalAccountDropdown({
         )}
       >
         <ProfileAvatar
-          className={'rounded-md'}
+          className={
+            'group-hover/trigger:border-background/50 rounded-md border border-transparent transition-colors'
+          }
           fallbackClassName={'rounded-md border'}
           displayName={displayName ?? user?.email ?? ''}
           pictureUrl={personalAccountData?.picture_url}

packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import type { Provider } from '@supabase/supabase-js';
+
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -17,6 +19,7 @@ import { Trans } from '@kit/ui/trans';
 import { usePersonalAccountData } from '../../hooks/use-personal-account-data';
 import { AccountDangerZone } from './account-danger-zone';
 import { UpdateEmailFormContainer } from './email/update-email-form-container';
+import { LinkAccountsList } from './link-accounts';
 import { MultiFactorAuthFactorsList } from './mfa/multi-factor-auth-list';
 import { UpdatePasswordFormContainer } from './password/update-password-container';
 import { UpdateAccountDetailsFormContainer } from './update-account-details-form-container';
@@ -29,11 +32,14 @@ export function PersonalAccountSettingsContainer(
     features: {
       enableAccountDeletion: boolean;
       enablePasswordUpdate: boolean;
+      enableAccountLinking: boolean;
     };
 
     paths: {
       callback: string;
     };
+
+    providers: Provider[];
   }>,
 ) {
   const supportsLanguageSelection = useSupportMultiLanguage();
@@ -150,6 +156,24 @@ export function PersonalAccountSettingsContainer(
         </CardContent>
       </Card>
 
+      <If condition={props.features.enableAccountLinking}>
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <Trans i18nKey={'account:linkedAccounts'} />
+            </CardTitle>
+
+            <CardDescription>
+              <Trans i18nKey={'account:linkedAccountsDescription'} />
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <LinkAccountsList providers={props.providers} />
+          </CardContent>
+        </Card>
+      </If>
+
       <If condition={props.features.enableAccountDeletion}>
         <Card className={'border-destructive'}>
           <CardHeader>

packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx

@@ -6,7 +6,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { CheckIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -21,6 +20,7 @@ import {
 } from '@kit/ui/form';
 import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
+import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
 import { UpdateEmailSchema } from '../../../schema/update-email.schema';

packages/features/accounts/src/components/personal-account-settings/index.ts

@@ -1 +1,2 @@
 export * from './account-settings-container';
+export * from './link-accounts';

packages/features/accounts/src/components/personal-account-settings/link-accounts/index.ts

@@ -0,0 +1 @@
+export * from './link-accounts-list';

packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import type { Provider, UserIdentity } from '@supabase/supabase-js';
+
+import { CheckCircle } from 'lucide-react';
+
+import { useLinkIdentityWithProvider } from '@kit/supabase/hooks/use-link-identity-with-provider';
+import { useUnlinkUserIdentity } from '@kit/supabase/hooks/use-unlink-user-identity';
+import { useUserIdentities } from '@kit/supabase/hooks/use-user-identities';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { OauthProviderLogoImage } from '@kit/ui/oauth-provider-logo-image';
+import { Separator } from '@kit/ui/separator';
+import { toast } from '@kit/ui/sonner';
+import { Spinner } from '@kit/ui/spinner';
+import { Trans } from '@kit/ui/trans';
+
+export function LinkAccountsList(props: { providers: Provider[] }) {
+  const unlinkMutation = useUnlinkUserIdentity();
+  const linkMutation = useLinkIdentityWithProvider();
+
+  const {
+    identities,
+    hasMultipleIdentities,
+    isProviderConnected,
+    isLoading: isLoadingIdentities,
+  } = useUserIdentities();
+
+  // Only show providers from the allowed list that aren't already connected
+  const availableProviders = props.providers.filter(
+    (provider) => !isProviderConnected(provider),
+  );
+
+  // Show all connected identities, even if their provider isn't in the allowed providers list
+  const connectedIdentities = identities;
+
+  const handleUnlinkAccount = (identity: UserIdentity) => {
+    const promise = unlinkMutation.mutateAsync(identity);
+
+    toast.promise(promise, {
+      loading: <Trans i18nKey={'account:unlinkingAccount'} />,
+      success: <Trans i18nKey={'account:accountUnlinked'} />,
+      error: <Trans i18nKey={'account:unlinkAccountError'} />,
+    });
+  };
+
+  const handleLinkAccount = (provider: Provider) => {
+    const promise = linkMutation.mutateAsync(provider);
+
+    toast.promise(promise, {
+      loading: <Trans i18nKey={'account:linkingAccount'} />,
+      success: <Trans i18nKey={'account:accountLinked'} />,
+      error: <Trans i18nKey={'account:linkAccountError'} />,
+    });
+  };
+
+  if (isLoadingIdentities) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Linked Accounts Section */}
+      <If condition={connectedIdentities.length > 0}>
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-foreground text-sm font-medium">
+              <Trans i18nKey={'account:linkedAccounts'} />
+            </h3>
+
+            <p className="text-muted-foreground text-xs">
+              <Trans i18nKey={'account:alreadyLinkedAccountsDescription'} />
+            </p>
+          </div>
+
+          <div className="flex flex-col space-y-2">
+            {connectedIdentities.map((identity) => (
+              <div
+                key={identity.id}
+                className="bg-muted/50 flex h-14 items-center justify-between rounded-lg border p-3"
+              >
+                <div className="flex items-center gap-3">
+                  <OauthProviderLogoImage providerId={identity.provider} />
+
+                  <div className="flex flex-col">
+                    <span className="flex items-center gap-x-2 text-sm font-medium capitalize">
+                      <CheckCircle className="h-3 w-3 text-green-500" />
+
+                      <span>{identity.provider}</span>
+                    </span>
+
+                    <If condition={identity.identity_data?.email}>
+                      <span className="text-muted-foreground text-xs">
+                        {identity.identity_data?.email as string}
+                      </span>
+                    </If>
+                  </div>
+                </div>
+
+                <If condition={hasMultipleIdentities}>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        disabled={unlinkMutation.isPending}
+                      >
+                        <If condition={unlinkMutation.isPending}>
+                          <Spinner className="mr-2 h-3 w-3" />
+                        </If>
+                        <Trans i18nKey={'account:unlinkAccount'} />
+                      </Button>
+                    </AlertDialogTrigger>
+
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>
+                          <Trans i18nKey={'account:confirmUnlinkAccount'} />
+                        </AlertDialogTitle>
+
+                        <AlertDialogDescription>
+                          <Trans
+                            i18nKey={'account:unlinkAccountConfirmation'}
+                            values={{ provider: identity.provider }}
+                          />
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>
+                          <Trans i18nKey={'common:cancel'} />
+                        </AlertDialogCancel>
+
+                        <AlertDialogAction
+                          onClick={() => handleUnlinkAccount(identity)}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                          <Trans i18nKey={'account:unlinkAccount'} />
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </If>
+              </div>
+            ))}
+          </div>
+        </div>
+      </If>
+
+      {/* Available Accounts Section */}
+      <If condition={availableProviders.length > 0}>
+        <Separator />
+
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-foreground text-sm font-medium">
+              <Trans i18nKey={'account:availableAccounts'} />
+            </h3>
+
+            <p className="text-muted-foreground text-xs">
+              <Trans i18nKey={'account:availableAccountsDescription'} />
+            </p>
+          </div>
+
+          <div className="flex flex-col space-y-2">
+            {availableProviders.map((provider) => (
+              <button
+                key={provider}
+                className="hover:bg-muted/50 flex h-14 items-center justify-between rounded-lg border p-3 transition-colors"
+                onClick={() => handleLinkAccount(provider)}
+              >
+                <div className="flex items-center gap-3">
+                  <OauthProviderLogoImage providerId={provider} />
+
+                  <span className="text-sm font-medium capitalize">
+                    {provider}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </If>
+
+      <If
+        condition={
+          connectedIdentities.length === 0 && availableProviders.length === 0
+        }
+      >
+        <div className="text-muted-foreground py-8 text-center">
+          <Trans i18nKey={'account:noAccountsAvailable'} />
+        </div>
+      </If>
+    </div>
+  );
+}

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx

@@ -8,7 +8,6 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ShieldCheck, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { useFetchAuthFactors } from '@kit/supabase/hooks/use-fetch-mfa-factors';
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
@@ -27,6 +26,7 @@ import {
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
+import { toast } from '@kit/ui/sonner';
 import { Spinner } from '@kit/ui/spinner';
 import {
   Table,

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx

@@ -8,7 +8,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { ArrowLeftIcon } from 'lucide-react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
@@ -40,6 +39,7 @@ import {
   InputOTPSeparator,
   InputOTPSlot,
 } from '@kit/ui/input-otp';
+import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
 import { refreshAuthSession } from '../../../server/personal-accounts-server-actions';

packages/features/accounts/src/components/personal-account-settings/password/update-password-container.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import { useUser } from '@kit/supabase/hooks/use-user';
-import { Alert } from '@kit/ui/alert';
 import { LoadingOverlay } from '@kit/ui/loading-overlay';
-import { Trans } from '@kit/ui/trans';
 
 import { UpdatePasswordForm } from './update-password-form';
 
@@ -18,25 +16,9 @@ export function UpdatePasswordFormContainer(
     return <LoadingOverlay fullPage={false} />;
   }
 
-  if (!user) {
+  if (!user?.email) {
     return null;
   }
 
-  const canUpdatePassword = user.identities?.some(
-    (item) => item.provider === `email`,
-  );
-
-  if (!canUpdatePassword) {
-    return <WarnCannotUpdatePasswordAlert />;
-  }
-
   return <UpdatePasswordForm callbackPath={props.callbackPath} user={user} />;
 }
-
-function WarnCannotUpdatePasswordAlert() {
-  return (
-    <Alert variant={'warning'}>
-      <Trans i18nKey={'account:cannotUpdatePassword'} />
-    </Alert>
-  );
-}

packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx

@@ -9,7 +9,6 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { Check } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -26,6 +25,7 @@ import {
 import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
 import { PasswordUpdateSchema } from '../../../schema/update-password.schema';

packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx

@@ -1,7 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
@@ -14,6 +13,7 @@ import {
   FormMessage,
 } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
+import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
 import { useUpdateAccountData } from '../../hooks/use-update-account';

packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx

@@ -5,11 +5,11 @@ import { useCallback } from 'react';
 import type { SupabaseClient } from '@supabase/supabase-js';
 
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { Database } from '@kit/supabase/database';
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 import { ImageUploader } from '@kit/ui/image-uploader';
+import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
 import { useRevalidatePersonalAccountDataQuery } from '../../hooks/use-personal-account-data';

packages/features/accounts/src/schema/link-email-password.schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const LinkEmailPasswordSchema = z
+  .object({
+    email: z.string().email(),
+    password: z.string().min(8).max(99),
+    repeatPassword: z.string().min(8).max(99),
+  })
+  .refine((values) => values.password === values.repeatPassword, {
+    path: ['repeatPassword'],
+    message: `account:passwordNotMatching`,
+  });