Merge pull request #7 from fells-code/dev

Credential improvements, passkey friendly names, and registering passkey flow

Author: Bccorb

jest.config.ts

@@ -18,7 +18,7 @@ export default {
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
   coverageThreshold: {
     global: {
-      branches: 65,
+      branches: 60,
       functions: 80,
       lines: 80,
       statements: 80,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamless-auth/react",
-  "version": "0.0.4-beta.17",
+  "version": "0.0.6-beta.4",
   "description": "A drop-in authentication solution for modern React applications.",
   "type": "module",
   "exports": {

package.json

@@ -11,8 +11,12 @@ import React, {
 import { AuthMode, createFetchWithAuth } from './fetchWithAuth';
 import LoadingSpinner from './LoadingSpinner';
 import { usePreviousSignIn } from './hooks/usePreviousSignIn';
+import {
+  AuthenticatorTransportFuture,
+  CredentialDeviceType,
+} from '@simplewebauthn/browser';
 
-interface User {
+export interface User {
   id: string;
   email: string;
   phone: string;
@@ -35,6 +39,22 @@ export interface AuthContextType {
   markSignedIn: () => void;
   hasSignedInBefore: boolean;
   mode: AuthMode;
+  credentials: Credential[];
+  updateCredential: (credential: Credential) => Promise<Credential>;
+  deleteCredential: (credentialId: string) => Promise<void>;
+}
+
+export interface Credential {
+  id: string;
+  counter: number;
+  transports?: AuthenticatorTransportFuture[];
+  deviceType: CredentialDeviceType;
+  backedup: boolean;
+  friendlyName: string | null;
+  lastUsedAt: Date | null;
+  platform: string | null;
+  browser: string | null;
+  deviceInfo: string | null;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -65,6 +85,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
   mode = 'web',
 }) => {
   const [user, setUser] = useState<User | null>(null);
+  const [credentials, setCredentials] = useState<Credential[]>([]);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [token, setToken] = useState<AuthToken | null>(null);
@@ -121,8 +142,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
       });
 
       if (response.ok) {
-        const { user } = await response.json();
+        const { user, credentials } = await response.json();
         setUser(user);
+        setCredentials(credentials);
+
         setIsAuthenticated(true);
       } else {
         logout();
@@ -134,6 +157,36 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     }
   };
 
+  const updateCredential = async (credential: Credential) => {
+    const response = await fetchWithAuth(`users/credentials`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ friendlyName: credential.friendlyName, id: credential.id }),
+    });
+
+    if (response.ok) {
+      return response.json();
+    }
+
+    throw new Error('Failed to update credential');
+  };
+
+  const deleteCredential = async (credentialId: string) => {
+    const response = await fetchWithAuth(`users/credentials`, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id: credentialId }),
+    });
+
+    if (response.ok) {
+      return response.json();
+    }
+
+    throw new Error('Failed to update credential');
+  };
+
   useEffect(() => {
     validateToken();
   }, []);
@@ -165,6 +218,9 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
         markSignedIn,
         hasSignedInBefore: autoDetectPreviousSignin ? hasSignedInBefore : false,
         mode,
+        credentials,
+        updateCredential,
+        deleteCredential,
       }}
     >
       <InternalAuthProvider value={{ validateToken, setLoading }}>

src/AuthProvider.tsx

@@ -89,7 +89,6 @@ const Login: React.FC = () => {
           navigate('/mfaLogin');
           return;
         }
-        console.log('Verified...', JSON.stringify(verificationResponse));
         await validateToken();
         navigate('/');
         return;

src/Login.tsx

@@ -9,132 +9,148 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import styles from '@/styles/registerPasskey.module.css';
-import { isPasskeySupported } from './utils';
+import { isPasskeySupported, parseUserAgent } from './utils';
 import { createFetchWithAuth } from './fetchWithAuth';
+import DeviceNameModal from './components/DeviceNameModal';
 
 const RegisterPasskey: React.FC = () => {
   const { apiHost, mode } = useAuth();
   const { validateToken } = useInternalAuth();
   const navigate = useNavigate();
+
   const [status, setStatus] = useState<'idle' | 'success' | 'error' | 'loading'>('idle');
   const [message, setMessage] = useState('');
   const [passkeyAvailable, setPasskeyAvailable] = useState(false);
 
+  const [showDeviceModal, setShowDeviceModal] = useState(false);
+  const [pendingMetadata, setPendingMetadata] = useState<{
+    platform: string;
+    browser: string;
+    deviceInfo: string;
+  } | null>(null);
+
   const fetchWithAuth = createFetchWithAuth({
     authMode: mode,
     authHost: apiHost,
   });
 
-  const handlePasskeyRegister = async () => {
+  useEffect(() => {
+    async function checkSupport() {
+      const supported = await isPasskeySupported();
+      setPasskeyAvailable(supported);
+    }
+
+    checkSupport();
+  }, []);
+
+  const openDeviceModal = () => {
+    const { platform, browser, deviceInfo } = parseUserAgent();
+
+    setPendingMetadata({ platform, browser, deviceInfo });
+    setShowDeviceModal(true);
+  };
+
+  const continueRegistration = async (friendlyName: string) => {
+    if (!pendingMetadata) return;
+
+    const { platform, browser, deviceInfo } = pendingMetadata;
+
     setStatus('loading');
 
     try {
       const challengeRes = await fetchWithAuth(`/webAuthn/register/start`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
       });
 
       if (!challengeRes.ok) {
-        setStatus('error');
-        setMessage('Something went wrong registering passkey.');
-        return;
+        throw new Error('Failed to fetch challenge');
       }
 
       const options = await challengeRes.json();
 
       let attResp: RegistrationResponseJSON;
+
       try {
         attResp = await startRegistration({ optionsJSON: options });
-
-        await verifyPassKey(attResp);
       } catch (error) {
         if (error instanceof WebAuthnError) {
-          console.error(
-            `Error occurred with webAuthn, ${error.name} - ${error.code}-${error.stack}`
-          );
-          setStatus('error');
-          setMessage(`Error: ${error.name}`);
-        } else {
-          console.error('A problem happened.', error);
-          setStatus('error');
-          setMessage(`Error: ${error}`);
+          throw new Error(error.name);
         }
-        return;
+        throw error;
       }
 
+      await verifyPassKey(attResp, {
+        friendlyName,
+        platform,
+        browser,
+        deviceInfo,
+      });
+
       setStatus('success');
       setMessage('Passkey registered successfully.');
       navigate('/');
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      console.error(error);
       setStatus('error');
-      setMessage('Something went wrong registering passkey.');
+      setMessage('Error registering passkey.');
+    } finally {
+      setShowDeviceModal(false);
+      setPendingMetadata(null);
     }
   };
 
-  const verifyPassKey = async (attResp: RegistrationResponseJSON) => {
-    try {
-      const verificationResp = await fetchWithAuth(`/webAuthn/register/finish`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          attestationResponse: attResp,
-        }),
-        credentials: 'include',
-      });
-
-      const verificationJSON = await verificationResp.json();
-
-      if (!verificationResp.ok) {
-        setStatus('error');
-        setMessage('Something went wrong registering passkey.');
-        return;
-      }
-
-      if (verificationJSON?.verified) {
-        await validateToken();
-      }
-    } catch (error) {
-      console.error(`An error occurred: ${error}`);
+  const verifyPassKey = async (
+    attResp: RegistrationResponseJSON,
+    metadata: {
+      friendlyName: string;
+      platform: string;
+      browser: string;
+      deviceInfo: string;
     }
-  };
-
-  useEffect(() => {
-    async function checkSupport() {
-      const supported = await isPasskeySupported();
-      setPasskeyAvailable(supported);
+  ) => {
+    const verificationResp = await fetchWithAuth(`/webAuthn/register/finish`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        attestationResponse: attResp,
+        metadata,
+      }),
+      credentials: 'include',
+    });
+
+    if (!verificationResp.ok) {
+      throw new Error('Verification failed');
     }
 
-    checkSupport();
-  }, []);
+    await validateToken();
+  };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        {!passkeyAvailable ? (
-          <div className={styles.loading}>
-            <div className={styles.spinner}></div>
-            <span>Checking for Passkey Support...</span>
-          </div>
-        ) : (
-          passkeyAvailable && (
+    <>
+      <div className={styles.container}>
+        <div className={styles.card}>
+          {!passkeyAvailable ? (
+            <div className={styles.loading}>
+              <div className={styles.spinner}></div>
+              <span>Checking for Passkey Support...</span>
+            </div>
+          ) : (
             <div className={styles.supported}>
               <h2 className={styles.title}>Secure Your Account with a Passkey</h2>
               <p className={styles.description}>
                 Your device supports passkeys! Register one to skip passwords forever.
               </p>
+
               <button
-                onClick={handlePasskeyRegister}
+                onClick={openDeviceModal}
                 disabled={status === 'loading'}
                 className={styles.button}
               >
                 {status === 'loading' ? 'Registering...' : 'Register Passkey'}
               </button>
+
               {message && (
                 <p
                   className={`${styles.message} ${
@@ -145,10 +161,19 @@ const RegisterPasskey: React.FC = () => {
                 </p>
               )}
             </div>
-          )
-        )}
+          )}
+        </div>
       </div>
-    </div>
+
+      <DeviceNameModal
+        isOpen={showDeviceModal}
+        onCancel={() => {
+          setShowDeviceModal(false);
+          setPendingMetadata(null);
+        }}
+        onConfirm={continueRegistration}
+      />
+    </>
   );
 };
 

src/RegisterPassKey.tsx

@@ -63,7 +63,7 @@ const TermsModal: React.FC<TermsModalProps> = ({ isOpen, onClose }) => {
             <strong>3. Opt-Out:</strong> Contact support@seamlessauth.com to opt out.
           </p>
           <p>
-            <strong>4. Fees:</strong> Standard carrier rates may apply.
+            <strong>4. Fees:</strong> Message and data rates may apply.
           </p>
           <p>
             <strong>5. Supported Carriers:</strong> Most major providers supported,