Passkeys for React Native with Firebase ๐Ÿ”

3 min readJun 30, 2023

Simplifying Passkeys implementation in react native for a Firebase backend with ๐Ÿ“

Before You Begin ๐ŸŽฏ

Before you start, there are a few prerequisites you need to take care of:

1. **Add Firebase to Your Project**: If you havenโ€™t done so already, you need to add Firebase to your project. You can follow the steps in this [link]( to get started ๐ŸŽ‰.

2. **Upgrade to the Blaze Plan**: The JustPass Firebase extension requires the Blaze (pay as you go) plan.

3. **Find Your Firebase Project ID or Alias**: You will need either your Firebase project ID or a previously configured project alias to install the extension. You can run the appropriate command from your local app directory to find these.

4. **Get Your JustPass Keys**: Go to the Dashboard and copy the following keys. You will need them to configure the extension:


Step 1: Installation ๐Ÿ“ฆ

Firstly, we need to install the necessary packages. Weโ€™ll be using the justpass-me React Native package and @react-native-firebase/auth for Firebase authentication. If you haven't installed them, you can do it like this:

yarn add @justpass-me/justpass-me-react-native
yarn add @react-native-firebase/app
yarn add @react-native-firebase/auth
cd ios
pod install

Step 2: Setup ๐Ÿ”ง

Open your dashboard and update the Apple app package to be <Application Identifier Prefix>.<Bundle Identifier>. Make sure to add webcredentials:{your-app-domain} to your app's associated domaโ€‹ins.

Step 3: Import Necessary Modules ๐Ÿ“š

In your React Native code, import the necessary modules from the justpass-me package and firebase:

import {register, authenticate} from '@justpass-me/justpass-me-react-native';
import auth from '@react-native-firebase/auth';

Step 4: Set Up Firebase and Constants ๐ŸŽ›๏ธ

Next, set up some constants for your Firebase project, the location where the extension is installed, and the extension instance name:

const firebaseProjectName = "my-firebase-project"; // the firebase project where the extension is installed
const cloudLocation = "us-central1"; // location where the extension is installed
const extensionInstanceName = "ext-justpass-me";
const baseURL = `https://${cloudLocation}-${firebaseProjectName}${extensionInstanceName}-oidc`;

Step 5: Registration ๐Ÿ“

Create a registration function that uses the register function from the justpass-me package:

const registerUser = async () => {
const registrationURL = `${baseURL}/register/`;
const IdToken = await auth().currentUser.getIdToken();
const extraHeaders = {
Authorization: `Bearer ${IdToken}`
await register(registrationURL, extraHeaders);

Step 6: Authentication ๐Ÿ”‘

Next, create an authentication function that uses the authenticate function from the justpass-me package:

const authenticateUser = async () => {
const authenticationURL = `${baseURL}/authenticate/`;
const result = await authenticate(authenticationURL);
if (result.token) {
await auth().signInWithCustomToken(result.token);

Step 7: Using Registration and Authentication Functions ๐Ÿƒ

You can now call registerUser and authenticateUser functions in your application code to register and authenticate users respectively.

Thatโ€™s it! ๐ŸŽ‰ You have successfully integrated passkeys authentication into your React Native application with a Firebasโ€‹e backend.

Repo link: