Passkey Login

Add login with passkey option.

Determine login options for a user

We recommend a two-step login process, where a user enters their email on the first page and is then shown the best login option for them, but you can implement this on a single page as well. Some browsers and devices don't support passkeys yet, so we recommend always checking for passkey support before offering a passkey login.

Example login page in a two-step flow

The following code accepts an email and determines if the user should log in with Passage or with a different method. The decision is based on whether the user has a passkey registered with Passage and their current browser support passkeys.

async function determineAuthFlow(email) {
    const user = await passage.identifierExists(email);
    
    if (user?.hasPasskey && (await passage.getCredentialAvailable()).isAvailable) {
        // User has a passkey, and passkeys are supported on this device
        // they can proceed with a Passkey login
    } else {
	// passkeys are not supported on this device
        // or does not have a Passkey Registered
    	// they should fallback to legacy auth
    }
}

Passkey login and exchange for session token

If it is determined that a user can use a passkey for login, we will provide a special experience for that.

Recommended UX for passkey login

Assuming you make a TokenStore setTokens method from the previous guide, once a user logs in with Passage they will automatically be given a legacy session token for your application.

To conduct a passkey login, you will simply call the login function in PassageJS and the rest will be handled for you. An example function might look like this:

async function login(email) {
    try {
        await passage.login(email)
    } catch (err) {
        // An error can be raised for one of the following reasons:
        // 1. User Device does not support webauthn
        // 2. User cancels the login passkey flow
        // 3. Network request error
        
        // Here you can either ask them to try again 
        // or fallback to your legacy auth method
    }
  }

Try it out!

That's it! Take a look at a complete registration and login flow with Passkey Flex.