extracted login

Author: PetN5026

src/AuthProvider.tsx

@@ -42,6 +42,7 @@ export interface AuthContextType {
   credentials: Credential[];
   updateCredential: (credential: Credential) => Promise<Credential>;
   deleteCredential: (credentialId: string) => Promise<void>;
+  fetchWithAuth(input: string, init?: RequestInit): Promise<Response>;
 }
 
 export interface Credential {
@@ -221,6 +222,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
         credentials,
         updateCredential,
         deleteCredential,
+        fetchWithAuth,
       }}
     >
       <InternalAuthProvider value={{ validateToken, setLoading }}>

src/utils.ts

@@ -1,5 +1,6 @@
 import parsePhoneNumberFromString from 'libphonenumber-js';
-
+import { startAuthentication } from '@simplewebauthn/browser';
+import { createFetchWithAuth } from './fetchWithAuth';
 /**
  * isValidEmail
  *
@@ -101,3 +102,77 @@ export function parseUserAgent() {
 
   return { platform, browser, deviceInfo };
 }
+
+export const login = async (
+  fetchWithAuth: (input: string, init?: RequestInit) => Promise<Response>,
+  identifier: string,
+  passkeyAvailable: boolean
+) => {
+  // setFormErrors('');
+
+  const response = await fetchWithAuth(`/login`, {
+    method: 'POST',
+    body: JSON.stringify({ identifier, passkeyAvailable }),
+  });
+
+  // if (!response.ok) {
+  //   setFormErrors('Failed to send login link. Please try again.');
+  //   return;
+  // }
+
+  // if (!passkeyAvailable) {
+  //   setShowFallbackOptions(true);
+  //   return;
+  // }
+
+  try {
+    await handlePasskeyLogin(fetchWithAuth);
+  } catch (err) {
+    console.error('Passkey login failed', err);
+    // setShowFallbackOptions(true);
+  }
+};
+
+const handlePasskeyLogin = async (
+  fetchWithAuth: (input: string, init?: RequestInit) => Promise<Response>
+) => {
+  try {
+    const response = await fetchWithAuth(`/webAuthn/login/start`, {
+      method: 'POST',
+    });
+
+    if (!response.ok) {
+      console.error('Something went wrong getting webauthn options');
+      return;
+    }
+
+    const options = await response.json();
+    const credential = await startAuthentication({ optionsJSON: options });
+
+    const verificationResponse = await fetchWithAuth(`/webAuthn/login/finish`, {
+      method: 'POST',
+      body: JSON.stringify({ assertionResponse: credential }),
+    });
+
+    if (!verificationResponse.ok) {
+      console.error('Failed to verify passkey');
+    }
+
+    const verificationResult = await verificationResponse.json();
+
+    // let them handle the below
+    // if (verificationResult.message === 'Success') {
+    //   if (verificationResult.mfaLogin) {
+    //     navigate('/mfaLogin');
+    //     return;
+    //   }
+    //   await validateToken();
+    //   navigate('/');
+    //   return;
+    // } else {
+    //   console.error('Passkey login failed:', verificationResult.message);
+    // }
+  } catch (error) {
+    console.error('Passkey login error:', error);
+  }
+};

src/views/Login.tsx

@@ -4,15 +4,15 @@ import PhoneInputWithCountryCode from '@/components/phoneInput';
 import { useInternalAuth } from '@/context/InternalAuthContext';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { login } from '../utils';
 import styles from '@/styles/login.module.css';
 import { isPasskeySupported, isValidEmail, isValidPhoneNumber } from '../utils';
 import { createFetchWithAuth } from '@/fetchWithAuth';
 import AuthFallbackOptions from '@/components/AuthFallbackOptions';
 
 const Login: React.FC = () => {
   const navigate = useNavigate();
-  const { apiHost, hasSignedInBefore, mode: authMode } = useAuth();
+  const { apiHost, hasSignedInBefore, mode: authMode, fetchWithAuth } = useAuth();
   const { validateToken } = useInternalAuth();
   const [identifier, setIdentifier] = useState<string>('');
   const [email, setEmail] = useState<string>('');
@@ -25,15 +25,17 @@ const Login: React.FC = () => {
   const [passkeyAvailable, setPasskeyAvailable] = useState(false);
   const [showFallbackOptions, setShowFallbackOptions] = useState(false);
 
-  const fetchWithAuth = createFetchWithAuth({
-    authMode,
-    authHost: apiHost,
-  });
+  // const fetchWithAuth = createFetchWithAuth({
+  //   authMode,
+  //   authHost: apiHost,
+  // });
 
   useEffect(() => {
     async function checkSupport() {
       const supported = await isPasskeySupported();
+      // console.log('checking passkey', supported);
       setPasskeyAvailable(supported);
+      console.log('checking passkey', supported);
     }
 
     checkSupport();
@@ -102,32 +104,6 @@ const Login: React.FC = () => {
     }
   };
 
-  const login = async () => {
-    setFormErrors('');
-
-    const response = await fetchWithAuth(`/login`, {
-      method: 'POST',
-      body: JSON.stringify({ identifier, passkeyAvailable }),
-    });
-
-    if (!response.ok) {
-      setFormErrors('Failed to send login link. Please try again.');
-      return;
-    }
-
-    if (!passkeyAvailable) {
-      setShowFallbackOptions(true);
-      return;
-    }
-
-    try {
-      await handlePasskeyLogin();
-    } catch (err) {
-      console.error('Passkey login failed', err);
-      setShowFallbackOptions(true);
-    }
-  };
-
   const register = async () => {
     setFormErrors('');
 
@@ -198,7 +174,14 @@ const Login: React.FC = () => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (mode === 'login') login();
+    if (mode === 'login') {
+      if (passkeyAvailable) {
+        const res = login(fetchWithAuth, identifier, passkeyAvailable);
+      } else {
+        setShowFallbackOptions(true);
+        console.log(setShowFallbackOptions);
+      }
+    }
     if (mode === 'register') register();
   };