@asgardeo/react 0.8.0 → 0.9.0

package/dist/index.js

@@ -7683,11 +7683,159 @@ import {
 // src/components/presentation/auth/SignIn/v2/SignIn.tsx
 import { useState as useState16, useEffect as useEffect13, useRef as useRef4 } from "react";
 import {
-  AsgardeoRuntimeError as AsgardeoRuntimeError8,
+  AsgardeoRuntimeError as AsgardeoRuntimeError9,
   EmbeddedFlowType,
   EmbeddedSignInFlowStatusV2,
   EmbeddedSignInFlowTypeV2
 } from "@asgardeo/browser";
+
+// src/utils/v2/passkey.ts
+import { AsgardeoRuntimeError as AsgardeoRuntimeError8, arrayBufferToBase64url, base64urlToArrayBuffer } from "@asgardeo/browser";
+var handlePasskeyRegistration = async (challengeData) => {
+  if (!window.navigator.credentials || !window.navigator.credentials.create) {
+    throw new AsgardeoRuntimeError8(
+      "WebAuthn is not supported in this browser.",
+      "browser-webauthn-not-supported",
+      "browser",
+      "WebAuthn/Passkey registration requires a browser that supports the Web Authentication API."
+    );
+  }
+  try {
+    const creationOptions = JSON.parse(challengeData);
+    const publicKey = {
+      ...creationOptions,
+      challenge: base64urlToArrayBuffer(creationOptions.challenge),
+      user: {
+        ...creationOptions.user,
+        id: base64urlToArrayBuffer(creationOptions.user.id)
+      },
+      ...creationOptions.excludeCredentials && {
+        excludeCredentials: creationOptions.excludeCredentials.map((cred) => ({
+          ...cred,
+          id: base64urlToArrayBuffer(cred.id)
+        }))
+      }
+    };
+    const credential = await navigator.credentials.create({
+      publicKey
+    });
+    if (!credential) {
+      throw new AsgardeoRuntimeError8(
+        "No credential returned from WebAuthn registration.",
+        "browser-webauthn-no-credential",
+        "browser",
+        "The WebAuthn registration ceremony completed but did not return a valid credential."
+      );
+    }
+    const response = credential.response;
+    const registrationResponse = {
+      id: credential.id,
+      rawId: arrayBufferToBase64url(credential.rawId),
+      type: credential.type,
+      response: {
+        attestationObject: arrayBufferToBase64url(response.attestationObject),
+        clientDataJSON: arrayBufferToBase64url(response.clientDataJSON),
+        ...response.getTransports && {
+          transports: response.getTransports()
+        }
+      },
+      ...credential.authenticatorAttachment && {
+        authenticatorAttachment: credential.authenticatorAttachment
+      }
+    };
+    return JSON.stringify(registrationResponse);
+  } catch (error) {
+    if (error instanceof AsgardeoRuntimeError8) {
+      throw error;
+    }
+    if (error instanceof Error) {
+      throw new AsgardeoRuntimeError8(
+        `Passkey registration failed: ${error.message}`,
+        "browser-webauthn-registration-error",
+        "browser",
+        `WebAuthn registration failed with error: ${error.name}`
+      );
+    }
+    throw new AsgardeoRuntimeError8(
+      "Passkey registration failed due to an unexpected error.",
+      "browser-webauthn-unexpected-error",
+      "browser",
+      "An unexpected error occurred during WebAuthn registration."
+    );
+  }
+};
+var handlePasskeyAuthentication = async (challengeData) => {
+  if (!window.navigator.credentials || !window.navigator.credentials.get) {
+    throw new AsgardeoRuntimeError8(
+      "WebAuthn is not supported in this browser.",
+      "browser-webauthn-not-supported",
+      "browser",
+      "WebAuthn/Passkey authentication requires a browser that supports the Web Authentication API."
+    );
+  }
+  try {
+    const requestOptions = JSON.parse(challengeData);
+    const publicKey = {
+      ...requestOptions,
+      challenge: base64urlToArrayBuffer(requestOptions.challenge),
+      ...requestOptions.allowCredentials && {
+        allowCredentials: requestOptions.allowCredentials.map((cred) => ({
+          ...cred,
+          id: base64urlToArrayBuffer(cred.id)
+        }))
+      }
+    };
+    const credential = await navigator.credentials.get({
+      publicKey
+    });
+    if (!credential) {
+      throw new AsgardeoRuntimeError8(
+        "No credential returned from WebAuthn authentication.",
+        "browser-webauthn-no-credential",
+        "browser",
+        "The WebAuthn authentication ceremony completed but did not return a valid credential."
+      );
+    }
+    const response = credential.response;
+    const authenticationResponse = {
+      id: credential.id,
+      rawId: arrayBufferToBase64url(credential.rawId),
+      type: credential.type,
+      response: {
+        authenticatorData: arrayBufferToBase64url(response.authenticatorData),
+        clientDataJSON: arrayBufferToBase64url(response.clientDataJSON),
+        signature: arrayBufferToBase64url(response.signature),
+        ...response.userHandle && {
+          userHandle: arrayBufferToBase64url(response.userHandle)
+        }
+      },
+      ...credential.authenticatorAttachment && {
+        authenticatorAttachment: credential.authenticatorAttachment
+      }
+    };
+    return JSON.stringify(authenticationResponse);
+  } catch (error) {
+    if (error instanceof AsgardeoRuntimeError8) {
+      throw error;
+    }
+    if (error instanceof Error) {
+      throw new AsgardeoRuntimeError8(
+        `Passkey authentication failed: ${error.message}`,
+        "browser-webauthn-authentication-error",
+        "browser",
+        `WebAuthn authentication failed with error: ${error.name}`
+      );
+    }
+    throw new AsgardeoRuntimeError8(
+      "Passkey authentication failed due to an unexpected error.",
+      "browser-webauthn-unexpected-error",
+      "browser",
+      "An unexpected error occurred during WebAuthn authentication."
+    );
+  }
+};
+
+// src/components/presentation/auth/SignIn/v2/SignIn.tsx
 import { Fragment as Fragment12, jsx as jsx58 } from "react/jsx-runtime";
 var SignIn = ({ className, size = "medium", onSuccess, onError, variant, children }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading } = useAsgardeo_default();
@@ -7697,8 +7845,17 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
   const [isFlowInitialized, setIsFlowInitialized] = useState16(false);
   const [flowError, setFlowError] = useState16(null);
   const [isSubmitting, setIsSubmitting] = useState16(false);
+  const [passkeyState, setPasskeyState] = useState16({
+    isActive: false,
+    challenge: null,
+    creationOptions: null,
+    flowId: null,
+    actionId: null,
+    error: null
+  });
   const initializationAttemptedRef = useRef4(false);
   const oauthCodeProcessedRef = useRef4(false);
+  const passkeyProcessedRef = useRef4(false);
   const setFlowId = (flowId) => {
     setCurrentFlowId(flowId);
     if (flowId) {
@@ -7757,7 +7914,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
   const handleOAuthError = (error, errorDescription) => {
     clearFlowState();
     const errorMessage = errorDescription || `OAuth error: ${error}`;
-    const err = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
+    const err = new AsgardeoRuntimeError9(errorMessage, "SIGN_IN_ERROR", "react");
     setError(err);
     cleanupOAuthUrlParams(true);
   };
@@ -7804,7 +7961,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     handleAuthId(urlParams.authId);
     const effectiveApplicationId = applicationId || urlParams.applicationId;
     if (!urlParams.flowId && !effectiveApplicationId) {
-      const error = new AsgardeoRuntimeError8(
+      const error = new AsgardeoRuntimeError9(
         "Either flowId or applicationId is required for authentication",
         "SIGN_IN_ERROR",
         "react"
@@ -7861,6 +8018,22 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       if (handleRedirection(response)) {
         return;
       }
+      if (response.data?.additionalData?.["passkeyChallenge"] || response.data?.additionalData?.["passkeyCreationOptions"]) {
+        const passkeyChallenge = response.data.additionalData["passkeyChallenge"];
+        const passkeyCreationOptions = response.data.additionalData["passkeyCreationOptions"];
+        const effectiveFlowIdForPasskey = response.flowId || effectiveFlowId;
+        passkeyProcessedRef.current = false;
+        setPasskeyState({
+          isActive: true,
+          challenge: passkeyChallenge,
+          creationOptions: passkeyCreationOptions,
+          flowId: effectiveFlowIdForPasskey,
+          actionId: "submit",
+          error: null
+        });
+        setIsSubmitting(false);
+        return;
+      }
       const { flowId, components: components2, ...rest } = normalizeFlowResponse(response, t, {
         resolveTranslations: !children
       });
@@ -7940,6 +8113,50 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       cleanupOAuthUrlParams(true);
     });
   }, [isFlowInitialized, currentFlowId, isInitialized, isLoading, isSubmitting, signIn]);
+  useEffect13(() => {
+    if (!passkeyState.isActive || !passkeyState.challenge && !passkeyState.creationOptions || !passkeyState.flowId) {
+      return;
+    }
+    if (passkeyProcessedRef.current) {
+      return;
+    }
+    passkeyProcessedRef.current = true;
+    const performPasskeyProcess = async () => {
+      let inputs;
+      if (passkeyState.challenge) {
+        const passkeyResponse = await handlePasskeyAuthentication(passkeyState.challenge);
+        const passkeyResponseObj = JSON.parse(passkeyResponse);
+        inputs = {
+          credentialId: passkeyResponseObj.id,
+          authenticatorData: passkeyResponseObj.response.authenticatorData,
+          clientDataJSON: passkeyResponseObj.response.clientDataJSON,
+          signature: passkeyResponseObj.response.signature,
+          userHandle: passkeyResponseObj.response.userHandle
+        };
+      } else if (passkeyState.creationOptions) {
+        const passkeyResponse = await handlePasskeyRegistration(passkeyState.creationOptions);
+        const passkeyResponseObj = JSON.parse(passkeyResponse);
+        inputs = {
+          credentialId: passkeyResponseObj.id,
+          clientDataJSON: passkeyResponseObj.response.clientDataJSON,
+          attestationObject: passkeyResponseObj.response.attestationObject
+        };
+      } else {
+        throw new Error("No passkey challenge or creation options available");
+      }
+      await handleSubmit({
+        flowId: passkeyState.flowId,
+        inputs
+      });
+    };
+    performPasskeyProcess().then(() => {
+      setPasskeyState({ isActive: false, challenge: null, creationOptions: null, flowId: null, actionId: null, error: null });
+    }).catch((error) => {
+      setPasskeyState((prev) => ({ ...prev, isActive: false, error }));
+      setFlowError(error);
+      onError?.(error);
+    });
+  }, [passkeyState.isActive, passkeyState.challenge, passkeyState.creationOptions, passkeyState.flowId]);
   if (children) {
     const renderProps = {
       initialize: initializeFlow,
@@ -9216,7 +9433,15 @@ var BaseSignUpContent2 = ({
   const [isFlowInitialized, setIsFlowInitialized] = useState18(false);
   const [currentFlow, setCurrentFlow] = useState18(null);
   const [apiError, setApiError] = useState18(null);
+  const [passkeyState, setPasskeyState] = useState18({
+    isActive: false,
+    creationOptions: null,
+    flowId: null,
+    actionId: null,
+    error: null
+  });
   const initializationAttemptedRef = useRef6(false);
+  const passkeyProcessedRef = useRef6(false);
   const normalizeFlowResponseLocal = useCallback12(
     (response) => {
       if (response?.data?.components && Array.isArray(response.data.components)) {
@@ -9356,6 +9581,20 @@ var BaseSignUpContent2 = ({
         if (handleRedirectionIfNeeded(response, component)) {
           return;
         }
+        if (response.data?.additionalData?.["passkeyCreationOptions"]) {
+          const passkeyCreationOptions = response.data.additionalData["passkeyCreationOptions"];
+          const effectiveFlowIdForPasskey = response.flowId || currentFlow?.flowId;
+          passkeyProcessedRef.current = false;
+          setPasskeyState({
+            isActive: true,
+            creationOptions: passkeyCreationOptions,
+            flowId: effectiveFlowIdForPasskey,
+            actionId: component.id || "submit",
+            error: null
+          });
+          setIsLoading(false);
+          return;
+        }
         setCurrentFlow(response);
         setupFormFields(response);
       }
@@ -9366,6 +9605,48 @@ var BaseSignUpContent2 = ({
       setIsLoading(false);
     }
   };
+  useEffect15(() => {
+    if (!passkeyState.isActive || !passkeyState.creationOptions || !passkeyState.flowId) {
+      return;
+    }
+    if (passkeyProcessedRef.current) {
+      return;
+    }
+    passkeyProcessedRef.current = true;
+    const performPasskeyRegistration = async () => {
+      const passkeyResponse = await handlePasskeyRegistration(passkeyState.creationOptions);
+      const passkeyResponseObj = JSON.parse(passkeyResponse);
+      const inputs = {
+        credentialId: passkeyResponseObj.id,
+        clientDataJSON: passkeyResponseObj.response.clientDataJSON,
+        attestationObject: passkeyResponseObj.response.attestationObject
+      };
+      const payload = {
+        flowId: passkeyState.flowId,
+        flowType: currentFlow?.flowType || "REGISTRATION",
+        actionId: passkeyState.actionId || "submit",
+        inputs
+      };
+      const nextResponse = await onSubmit(payload);
+      const processedResponse = normalizeFlowResponseLocal(nextResponse);
+      onFlowChange?.(processedResponse);
+      if (processedResponse.flowStatus === EmbeddedFlowStatus2.Complete) {
+        onComplete?.(processedResponse);
+        return;
+      } else {
+        setCurrentFlow(processedResponse);
+        setupFormFields(processedResponse);
+        return;
+      }
+    };
+    performPasskeyRegistration().then(() => {
+      setPasskeyState({ isActive: false, creationOptions: null, flowId: null, actionId: null, error: null });
+    }).catch((error) => {
+      setPasskeyState((prev) => ({ ...prev, isActive: false, error }));
+      handleError(error);
+      onError?.(error);
+    });
+  }, [passkeyState.isActive, passkeyState.creationOptions, passkeyState.flowId]);
   const handleRedirectionIfNeeded = (response, component) => {
     if (response?.type === EmbeddedFlowResponseType2.Redirection && response?.data?.redirectURL) {
       const redirectUrl = response.data.redirectURL;
@@ -15112,7 +15393,7 @@ var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/index.ts
 import {
-  AsgardeoRuntimeError as AsgardeoRuntimeError9,
+  AsgardeoRuntimeError as AsgardeoRuntimeError10,
   http,
   getActiveTheme as getActiveTheme2,
   navigate as navigate4,
@@ -15130,7 +15411,7 @@ export {
   AlertTitle,
   AsgardeoContext_default as AsgardeoContext,
   AsgardeoProvider_default as AsgardeoProvider,
-  AsgardeoRuntimeError9 as AsgardeoRuntimeError,
+  AsgardeoRuntimeError10 as AsgardeoRuntimeError,
   BaseAcceptInvite_default as BaseAcceptInvite,
   BaseCreateOrganization,
   BaseInviteUser_default as BaseInviteUser,