@passageidentity/passage-flex-react-native v1.0.1

About

Passage by 1Password unlocks the passwordless future with a simpler, more secure passkey authentication experience. Passage handles the complexities of the WebAuthn API, and allows you to implement passkeys with ease.

Use Passkey Flex to add passkeys to an existing authentication experience.

Use Passkey Complete as a standalone passwordless auth solution.

Use Passkey Ready to determine if your users are ready for passkeys.

In passage-flex-react-native

Use passage-flex-react-native to implement Passkey Flex in your Swift application to add native passkey authentication in your own authentication flows.

Product	Compatible
Passkey Flex	✅
Passkey Complete	✖️ For Passkey Complete, check out passage-react-native
Passkey Ready	✖️ For Passkey Ready, check out Authentikit for Android and Authentikit for iOS

Getting Started

Check Prerequisites

Install

npm i --save @passageidentity/passage-flex-react-native

Configure

!IMPORTANT In order for passkeys to work, you’ll need to associate your native app(s) with the public web domain you assigned to your Passkey Flex app.

Android requires an assetlinks.json file configured and hosted Learn more about Adding support for Digital Asset Links →

Apple requires an apple-app-site-association file configured and hosted Learn more about Supporting associated domains →

Import

import { PassageFlex } from '@passageidentity/passage-flex-react-native';

Initialize

const passageFlex = new PassageFlex('YOUR_PASSAGE_APP_ID');

Go Passwordless

Check out the API Reference below, along with more details about Passkey Flex on our Passkey Flex Documentation page.

API Reference

passageFlex.passkey.register

To register a new user passkey, use the passageFlex.passkey.register method.

This is a three step process: 1. Your app should POST a user identifier (like an email) to your backend, which should request a transaction id from the Passage server to return to your app. 2. Your app should then call passageFlex.passkey.register(transactionId) to prompt your user to create a passkey. On success, the register method will return a nonce. 3. Lastly, your app should send this nonce to your backend to verify the user has been registered successfully. At this point, your backend could return an access token.

Example:

const onPressRegister = async () => {
  // 1. Get transaction id string from your backend.
  const transactionId = await getRegisterTransactionId("newuser@email.com");
  // 2. Prompt user to create a passkey and get a Passage nonce value on success.
  const nonce = await passageFlex.passkey.register(transactionId);
  // 3. You can send this nonce to your backend to complete user registration.
  const accessToken = await getAccessToken(nonce);
};

passageFlex.passkey.authenticate

To log in a user using a passkey, use the passageFlex.passkey.authenticate method.

This is a three step process: 1. Your app should POST a user identifier (like an email) to your backend, which should request a transaction id from the Passage server to return to your app. 2. Your app should then call passageFlex.passkey.authenticate(transactionId) to prompt your user to log in with a passkey. On success, the authenticate method will return a nonce. 3. Lastly, your app should send this nonce to your backend to verify the user has been authenticated successfully. At this point, your backend could return an access token.

Example:

const onPressLogIn = async () => {
  // 1. Get transaction id string from your backend.
  const transactionId = await getLogInTransactionId("existinguser@email.com");
  // 2. Prompt user to create a passkey and get a Passage nonce value on success.
  const nonce = await passageFlex.passkey.authenticate(transactionId);
  // 3. You can send this nonce to your backend to complete user authentication.
  const accessToken = await getAccessToken(nonce);
};

passageFlex.passkey.isSupported

You can check if a user’s device supports passkeys by calling passageFlex.passkey.isSupported:

const deviceSupportsPasskeys = passageFlex.passkey.isSupported();

Support & Feedback

We are here to help! Find additional docs, the best ways to get in touch with our team, and more within our support resources.