Passkeys for React Native with Firebase ๐Ÿ”

Justpass
3 min readJun 30, 2023

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

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](https://firebase.google.com/docs/web/setup) 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 JustPass.me Dashboard and copy the following keys. You will need them to configure the extension:

โ€” JUSTPASSME_ORGANIZATION_NAME
โ€” JUSTPASSME_ID
โ€” JUSTPASSME_API_SECRET

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 justpass.me ๐Ÿ”ง

Open your justpass.me dashboard and update the Apple app package to be <Application Identifier Prefix>.<Bundle Identifier>. Make sure to add webcredentials:{your-app-domain}.accounts.justpass.me 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 justpass.me 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}.cloudfunctions.net/${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: https://github.com/justpass-me/Passkeys-for-react-native-SDK

--

--