Passkeys for React Native with Firebase 🔐

iOS justpass.me Firebase Passkeys Demo

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