feat: two factor auth

akari-blue · Dec 21, 2024 · 9154791 · 9154791
1 parent 5448a57
commit 9154791
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
@@ -6,10 +6,11 @@ import { Input } from './ui/Input';
 import { Label } from './ui/Label';
 import { Button } from './ui/Button';
 
-interface LoginFormData {
+type LoginFormData = {
   handle: string;
   password: string;
-}
+  authFactorToken?: string;
+};
 
 export function LoginForm() {
   const { t } = useTranslation(['auth', 'app']);
@@ -49,7 +50,21 @@ export function LoginForm() {
         {errors.password && <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>}
       </div>
 
-      {error && <p className="text-red-500 text-sm">{error.message}</p>}
+      {error &&
+        (error?.message === 'A sign in code has been sent to your email address' || error?.message === 'Token is invalid' ? (
+          <div>
+            <Label htmlFor="authFactorToken">{t('authFactorToken')}</Label>
+            <Input
+              id="authFactorToken"
+              type="text"
+              {...register('authFactorToken', { required: 'Two-factor token is required' })}
+              error={!!errors.authFactorToken}
+            />
+            {errors.authFactorToken && <p className="mt-1 text-sm text-red-500">{errors.authFactorToken?.message}</p>}
+          </div>
+        ) : (
+          <p className="text-red-500 text-sm">{error.message}</p>
+        ))}
 
       <Button type="submit" disabled={isLoading} className="w-full">
         {isLoading ? t('login.pending') : t('login.default')}

diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
@@ -6,6 +6,7 @@ export const en = {
     },
     logout: 'logout',
     password: 'password',
+    authFactorToken: 'two-factor token',
   },
   app: {
     appName: '[placeholder name]',

diff --git a/src/lib/bluesky/hooks/useAuth.ts b/src/lib/bluesky/hooks/useAuth.ts
@@ -1,9 +1,11 @@
 import { BlueskyCredentials, useBlueskyStore } from '../store';
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 
 export function useAuth() {
   const { login, logout, isAuthenticated } = useBlueskyStore();
+  const navigate = useNavigate();
 
   const loginMutation = useMutation({
     mutationFn: async (credentials: BlueskyCredentials) => {
@@ -19,7 +21,7 @@ export function useAuth() {
       // Redirect to the homepage
       const redirect = new URLSearchParams(window.location.search).get('redirect');
       const url = new URL(redirect || '/', window.location.origin);
-      window.location.href = url.toString();
+      navigate({ to: url.pathname });
     },
   });
 
@@ -34,3 +36,4 @@ export function useAuth() {
     error: loginMutation.error,
   };
 }
+// A sign in code has been sent to your email address
diff --git a/src/lib/bluesky/store.ts b/src/lib/bluesky/store.ts
@@ -5,6 +5,7 @@ import { AtpSessionData, BskyAgent } from '@atproto/api';
 export type BlueskyCredentials = {
   handle: string;
   password: string;
+  authFactorToken?: string;
 };
 
 type Session = AtpSessionData & {
@@ -42,6 +43,7 @@ export const useBlueskyStore = create<BlueskyState>()(
         const response = await agent.login({
           identifier: credentials.handle,
           password: credentials.password,
+          authFactorToken: credentials.authFactorToken,
         });
 
         // Store session data