Passkey Authentication

Register or login a user using passkeys in React Native

Register a new user with a passkey

To create a new user account with a passkey, provide the user’s email address or phone number to Passage.registerWithPasskey(). View a full registration implementation on Github.

  const register = async (identifier: string) => {
    try {
      
      // Register user 
      await Passage.registerWithPasskey(identifier);
      
      // Retrieve new user info
      const user = await Passage.getCurrentUser();
    } catch (error) {
      if (error instanceof PassageError && error.code === PassageErrorCode.UserCancelled) {
        // User cancelled native passkey prompt
      } else {
        
        // Optional: Passkey registration failed, try fallback authentication methods
        await fallbackRegister(identifier);
      }
    }
  };

Optional: Registration Fallback Authentication

If passkey registration fails, users can be provided with a fallback authentication method. Learn more about registration fallback options here.

  const fallbackRegister = async (identifier: string) => {
    try {
    
      // Retrieve app information to check fallback settings
      const appInfo = await Passage.getAppInfo();
      if (appInfo.authFallbackMethod === AllowedFallbackAuth.LoginCode) {

        // Register with OTP
        const otpId = await Passage.newRegisterOneTimePasscode(identifier);  
      } else if (appInfo.authFallbackMethod === AllowedFallbackAuth.MagicLink) {
    
        // Register with Magic Link
        const magicLinkId = await Passage.newRegisterMagicLink(identifier);
      }
    } catch (error) {
      // Handle error
    }
  };

Log in an existing user with a passkey

To authenticate an existing user with their passkey, pass the user’s email address or phone number to Passage.loginWithPasskey(). View a full registration implementation on Github.

  const login = async (identifier: string) => {
    try {

      // Login user
      await Passage.loginWithPasskey();
      
      // Retrieve logged in user info
      const user = await Passage.getCurrentUser();
      setCurrentUser(user);
    } catch (error) {
      if (error instanceof PassageError && error.code === PassageErrorCode.UserCancelled) {
        // User cancelled native passkey prompt
      } else {
        if (identifier.length) {
          
          // Optional: Passkey login failed, try fallback authentication methods
          await fallbackLogin(identifier);
        }
      }
    }
  };

Optional: Login Fallback Authentication

If passkey login fails, users will need to be provided with a fallback authentication method. Learn more about login fallback options here.

  const fallbackLogin = async (identifier: string) => {
    try {
    
      // Retrieve app information to check fallback settings
      const appInfo = await Passage.getAppInfo();
      if (appInfo.authFallbackMethod === AllowedFallbackAuth.LoginCode) {
      
        // Login with OTP
        const otpId = await Passage.newLoginOneTimePasscode(identifier);
      } else if (appInfo.authFallbackMethod === AllowedFallbackAuth.MagicLink) {
        
        // Login with Magic Link
        const magicLinkId = await Passage.newLoginMagicLink(identifier);
      }
    } catch (error) {
      // Handle error
    }
  };