🔥 Simplifying Passkeys (passwordless biometric authentication) Implementation in Firebase: A Step-by-Step Guide 🔐🚀
Firebase is a powerful backend platform that provides a comprehensive suite of tools for building scalable web and mobile applications. One essential aspect of many applications is the ability to secure and manage access/authentication to your web or mobile apps. In this article, we will explore a simple approach to implementing passkeys in Firebase using the “JustPass.me” Firebase Extension. Let’s get started! 🎉
What is JustPass.me? 🗝️
JustPass.me is a Firebase Extension that simplifies the implementation of passkeys in your Firebase project. It allows you to generate and manage passkeys effortlessly, enabling you to control access to specific features or resources within your application. With JustPass.me, you can enable passwordless frictionless authentication, delight your users, and add an extra layer of security to your Firebase-powered app. 🔒
WEB DEMO
If you would like to try a web demo experience, go here https://demo.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. If you haven’t upgraded your project yet, you should do so now.
3. **Install or Update the Firebase CLI**: The Firebase CLI allows you to install and manage Firebase extensions from the command line. Make sure you have the latest version installed.
4. **Enable Cloud Storage**: The JustPass Firebase extension requires Cloud Storage to be enabled for your project. You can check if it’s enabled from this [link](https://console.cloud.google.com/apis/api/firestore.googleapis.com/overview).
5. **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.
6. **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: Installing the Extension
Once you have taken care of the prerequisites, you can proceed to install the JustPass Firebase extension. Here’s how you do it:
1. **Set up an Empty Extensions Manifest**: Run the following command to set up an empty Extensions manifest:
firebase ext:dev:init2. **Install the Extension**: Run the following command to install the JustPass Firebase extension:
firebase ext:install justpassme/firebase-extension --project=<your-project-id>Replace `<your-project-id>` with your actual Firebase project ID.Step 2: Deploying the Extension ✅
After you have installed the JustPass Firebase extension, you can deploy it to your Firebase project by running the following command:
firebase deploy — only extensions
You have now successfully added passkeys authentication to your Firebase project using the JustPass Firebase plugin 🎉.
Make sure to keep it safe, as you’ll need it for granting access to users.
Step 3: Verify Passkeys in your Application ✅
Final step, Let’s integrate passkey verification into your application code. It’s the final step! 💪
1. When a user tries to access a protected feature or resource, prompt them to enter a passkey.
2. Send the entered passkey to your Firebase backend for verification.
3. Utilize the JustPass.me extension’s API endpoints (detailed in the documentation) to validate the passkey.
4. If the passkey is valid, grant the user access to the requested feature or resource. Otherwise, display an error message or deny access based on your application’s requirements.
Here is an example of the user experience
If you have any questions or run into any issues, feel free to reach out to zaghoo@justpass.me for assistance. Happy coding!
