Merge remote-tracking branch 'origin/main' into feat/totp-lockout-ui

Author: lakhansamani

package-lock.json

@@ -91,7 +91,7 @@
     "typescript": "^5.7.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "3.2.1",
+    "@authorizerdev/authorizer-js": "3.3.0-rc.0",
     "@storybook/preset-scss": "^1.0.3",
     "validator": "^13.11.0"
   }

package.json

@@ -0,0 +1,94 @@
+import { FC, useState } from 'react';
+import { AuthToken, isWebauthnSupported } from '@authorizerdev/authorizer-js';
+
+import '../styles/default.css';
+import { ButtonAppearance, MessageType } from '../constants';
+import { useAuthorizer } from '../contexts/AuthorizerContext';
+import { StyledButton, StyledSeparator } from '../styledComponents';
+import { Message } from './Message';
+
+// AuthorizerPasskeyLogin offers a full passwordless, usernameless "Sign in
+// with a passkey" option (discoverable-credential login) alongside the other
+// login methods. It only renders when the browser actually supports the
+// WebAuthn JSON ceremony APIs the SDK relies on - there is no server-side
+// config flag for passkeys (unlike social login), it's purely a browser
+// capability.
+export const AuthorizerPasskeyLogin: FC<{
+  onLogin?: (data: AuthToken | void) => void;
+}> = ({ onLogin }) => {
+  const [error, setError] = useState(``);
+  const [loading, setLoading] = useState(false);
+  const { setAuthData, config, authorizerRef } = useAuthorizer();
+
+  if (!isWebauthnSupported()) {
+    return null;
+  }
+
+  // Only show the "OR" separator if AuthorizerRoot is actually going to
+  // render something below it - otherwise the passkey button ends up
+  // followed by a trailing separator with nothing underneath. Mirrors the
+  // exact set of conditions AuthorizerRoot uses to decide whether
+  // AuthorizerSocialLogin, AuthorizerBasicAuthLogin, or
+  // AuthorizerMagicLinkLogin render anything on the login view.
+  const hasSocialLogin =
+    config.is_google_login_enabled ||
+    config.is_github_login_enabled ||
+    config.is_facebook_login_enabled ||
+    config.is_linkedin_login_enabled ||
+    config.is_apple_login_enabled ||
+    config.is_twitter_login_enabled ||
+    config.is_microsoft_login_enabled ||
+    config.is_twitch_login_enabled ||
+    config.is_roblox_login_enabled;
+  const hasBasicAuthLogin =
+    (config.is_basic_authentication_enabled ||
+      config.is_mobile_basic_authentication_enabled) &&
+    !config.is_magic_link_login_enabled;
+  const hasAnotherLoginMethod =
+    hasSocialLogin || hasBasicAuthLogin || config.is_magic_link_login_enabled;
+
+  const onClick = async () => {
+    setError(``);
+    try {
+      setLoading(true);
+      const { data: res, errors } = await authorizerRef.loginWithPasskey();
+      if (errors && errors.length) {
+        setError(errors[0]?.message || ``);
+        return;
+      }
+      if (res) {
+        setAuthData({
+          user: res.user || null,
+          token: res,
+          config,
+          loading: false,
+        });
+      }
+      if (onLogin) {
+        onLogin(res);
+      }
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onErrorClose = () => setError(``);
+
+  return (
+    <>
+      {error && (
+        <Message type={MessageType.Error} text={error} onClose={onErrorClose} />
+      )}
+      <StyledButton
+        onClick={onClick}
+        disabled={loading}
+        appearance={ButtonAppearance.Default}
+      >
+        {loading ? `Waiting for passkey ...` : `Sign in with a passkey`}
+      </StyledButton>
+      {hasAnotherLoginMethod && <StyledSeparator>OR</StyledSeparator>}
+    </>
+  );
+};

src/components/AuthorizerPasskeyLogin.tsx

@@ -9,6 +9,7 @@ import { AuthorizerSignup } from './AuthorizerSignup';
 import type {  FormFieldsOverrides } from './AuthorizerSignup';
 import { AuthorizerForgotPassword } from './AuthorizerForgotPassword';
 import { AuthorizerSocialLogin } from './AuthorizerSocialLogin';
+import { AuthorizerPasskeyLogin } from './AuthorizerPasskeyLogin';
 import { AuthorizerMagicLinkLogin } from './AuthorizerMagicLinkLogin';
 import { createRandomString } from '../utils/common';
 import { hasWindow } from '../utils/window';
@@ -60,6 +61,7 @@ export const AuthorizerRoot: FC<{
   return (
     <StyledWrapper>
       <AuthorizerSocialLogin urlProps={urlProps} roles={roles} />
+      {view === Views.Login && <AuthorizerPasskeyLogin onLogin={onLogin} />}
       {view === Views.Login &&
         (config.is_basic_authentication_enabled ||
           config.is_mobile_basic_authentication_enabled) &&

src/components/AuthorizerRoot.tsx

@@ -6,11 +6,22 @@ import { ButtonAppearance, MessageType, Views } from '../constants';
 import { useAuthorizer } from '../contexts/AuthorizerContext';
 import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
 import { Message } from './Message';
+import { TotpDataType } from '../types';
+import { AuthorizerTOTPScanner } from './AuthorizerTOTPScanner';
 
 interface InputDataType {
   otp: string | null;
 }
 
+const initTotpData: TotpDataType = {
+  is_screen_visible: false,
+  email: '',
+  phone_number: '',
+  authenticator_scanner_image: '',
+  authenticator_secret: '',
+  authenticator_recovery_codes: [],
+};
+
 export const AuthorizerVerifyOtp: FC<{
   setView?: (v: Views) => void;
   onLogin?: (data: any) => void;
@@ -22,6 +33,7 @@ export const AuthorizerVerifyOtp: FC<{
   const [error, setError] = useState(``);
   const [successMessage, setSuccessMessage] = useState(``);
   const [loading, setLoading] = useState(false);
+  const [totpData, setTotpData] = useState<TotpDataType>({ ...initTotpData });
   const [sendingOtp, setSendingOtp] = useState(false);
   const [isLockedOut, setIsLockedOut] = useState(false);
   const [formData, setFormData] = useState<InputDataType>({
@@ -73,6 +85,26 @@ export const AuthorizerVerifyOtp: FC<{
         setError(errors[0]?.message || ``);
         return;
       }
+
+      // If TOTP validated using recovery code then show totp screen with scanner
+      if (
+        res &&
+        res.should_show_totp_screen &&
+        res.authenticator_scanner_image &&
+        res.authenticator_secret &&
+        res.authenticator_recovery_codes
+      ) {
+        setTotpData({
+          is_screen_visible: true,
+          email: data.email || ``,
+          phone_number: data.phone_number || ``,
+          authenticator_scanner_image: res.authenticator_scanner_image,
+          authenticator_secret: res.authenticator_secret,
+          authenticator_recovery_codes: res.authenticator_recovery_codes,
+        });
+        return;
+      }
+
       if (res) {
         setError(``);
         setAuthData({
@@ -138,6 +170,24 @@ export const AuthorizerVerifyOtp: FC<{
     }
   }, [formData.otp]);
 
+  if (totpData.is_screen_visible) {
+    return (
+      <AuthorizerTOTPScanner
+        {...{
+          setView,
+          onLogin,
+          email: totpData.email || ``,
+          phone_number: totpData.phone_number || ``,
+          authenticator_scanner_image: totpData.authenticator_scanner_image,
+          authenticator_secret: totpData.authenticator_secret,
+          authenticator_recovery_codes:
+            totpData.authenticator_recovery_codes || [],
+        }}
+        urlProps={urlProps}
+      />
+    );
+  }
+
   return (
     <>
       {successMessage && (

src/components/AuthorizerVerifyOtp.tsx

@@ -14,6 +14,7 @@ import { AuthorizerResetPassword } from './components/AuthorizerResetPassword';
 import { AuthorizerVerifyOtp } from './components/AuthorizerVerifyOtp';
 import { AuthorizerRoot as Authorizer } from './components/AuthorizerRoot';
 import { AuthorizerTOTPScanner } from './components/AuthorizerTOTPScanner';
+import { AuthorizerPasskeyLogin } from './components/AuthorizerPasskeyLogin';
 
 export {
   useAuthorizer,
@@ -27,4 +28,5 @@ export {
   AuthorizerResetPassword,
   AuthorizerVerifyOtp,
   AuthorizerTOTPScanner,
+  AuthorizerPasskeyLogin,
 };