Adding passkeys

What are passkeys?

The Passkeys authentication method includes the use of biometrics such as Touch ID and Face ID, and security key. It relays on the authentication method available on a user’s device. When you use your device's security features, you can ensure that your information is secure and easier for you to manage than both passwords and all the current methods of two-factor authentication.

Apple, Google, and Microsoft collaborated to create passkeys as a way to enhance authentication. By that, they allowed the consumer-standard FIDO and WebAuthN to be used.

The main benefits of passkeys are:

1. Quicker - biometrics make login quick and simple.
2. Safer - They are often tied to a specific device or user. This makes it more difficult for hackers to gain access to user accounts and sensitive information.
3. Easy to use - Passkeys can be more convenient for users, as they do not have to remember complex passwords or visit an email box/ phone to get a one time code.
4. Synced with other devices - Passkeys enable users to access their sign-in credentials on many of their devices, even new ones, without having to re-enroll every device on every account.

How to add passkeys as a way of authentication?

Step 1 - Add passkeys to your sign-in page

1. Go to the builder
2. Go to the experience tab
3. Choose the Login box section
4. Enable “Passkeys” toggle

This is how your sign-in page would look with the “Sign in with passkey” button

Step 2 (optional) - Add an option to set up passkeys within the Admin Portal.
In order to let your users manage passkeys within your app in the Admin portal, follow the next steps;

1. Go to builder
2. Go to the experience tab.
3. Choose the Admin portal tab.
4. Enable “Privacy & Security” tab.
   For more information about integrating the Admin portal click here (optional).

Step 3 - Publish

1. Click "Review to publish" button
2. Add a comment and click "Publish to development" button
   Your changes are ready on the development environment. In order to test it further, go to development env and push changes between environments.

User login flow with passkeys

Once the passkeys are added to the sign-in page, users will be able follow these steps to set up passkeys

1. Sign-in to their account
2. View "Passkeys set-up page"

• Set up passkeys by clicking “Use passkey” button and follow the device instructions.
• Users can decide whether they want to see the prompt again. By default they'll receive it only once.

3. Manage passkeys within the Admin Portal

• Go to the “Privacy & Security” tab
• Click the "set up passkeys" button if passkeys are not set up already

Once the passkeys are set users can

• Delete passkey by clicking the trash icon
• View the last time passkeys were added.

Once the user set up passkeys (one of the two ways) then on their next sign-in they can enter the App by clicking “Sign in with passkey” on the Sign-in page.

1. MFA; Multi factor authentication is used to ensure second authentication method that is different from the main authentication. Our MFA methods include Authenticator apps, built in authenticators, SMS, and security key. In order to avoid a double use of WebAuthN authentication, we enforce different authentication methods.

   1. On the builder - You won't be able to add passkeys if you don't add "SMS" / "Authenticator apps" as MFA options for your users.
   2. On the sign-in flow - If users authenticated with "built in authenticators" / "security key" as a MFA method, they won't be able to view the prompt passkeys page.
   3. On the Admin Portal - If MFA is forced, users won't be able to set up Passkeys if they didn't set up SMS/Authenticator apps as MFA methods.

2. SSO sign-in; Users that logged in with SSO won’t be able to set up passkeys. SSO is considered a secured authentication and when enabled it means that a user must sign in with SSO.

   1. On the sign-in flow - passkeys prompt page won't be visible
   2. On the Admin Portal - Passkeys section won't be visible.

Demonstration of login flow

1. Set up passkey page - gif
   1. Sign in
   2. Set up passkeys within the passkeys set-up page
   3. Sign out
   4. Sign in with passkey

Update version

The feature is available from version
@frontegg/[email protected]
@frontegg/[email protected]
@frontegg/[email protected]
@frontegg/[email protected]

Going live checklist

1. Add passkeys as an authentication method to the builder
2. [Optional] - add Security & Privacy tab to the Admin portal to enable management of passkeys within the app
3. Publish changes to development
4. Update your app version to the version mentioned above
5. Test passkeys on your development environment
6. Push changes to production (or other env)