Passage offers developers a frictionless process to implement passwordless user authentication into their application. Similar to our blog post of how to build a purely frontend React app with biometric authentication, this blog post will follow a similar structure, but introduce an Express.js backend using the Passage backend SDK to authenticate users.
If you are already familiar with React, you can go straight to our full example application on GitHub or skip to “Verifying User Authentication” section to learn how to integrate Passage in a Node server.
You will need to have Node >= 14.0.0 and npm >= 5.6 on your machine, as well as git.
To get started, we will need to create a backend directory, along with our server. Make sure you’re in the root folder and run the following commands:
Add the following code to backend/server.js. This code sets up our express server where we will use the Passage SDK to authenticate users:
Next, we will need to instantiate an instance of the Passage class with our configuration options (we will use this class in the next step to authenticate users). Append the following code to the end of the previous file we created (backend/server.js):
Declare a route where user authentication will occur. In this example, we’re going to use the route /auth with the HTTP method POST. Add the following after our Passage class instantiation from the previous step to backend/server.js:
Then, to get the backend server listening to requests, we will need to add the final code to our backend/server.js file:
Next, install the backend dependencies:
Congratulations! You’ve successfully implemented passage with the Node.js SDK! Before we can run our backend server, we will need to copy and paste our API Key and APP ID from the Passage Console and save them as environment variables in a .env file in our backend folder. Read on to learn how to obtain an APP ID and create an API Key.
To copy and paste our API Key and APP ID from the Passage Console, we will need to create a Passage account. Create an application in the Passage Console (here). Once you’ve created an account, click on the Getting Started button in the bottom right corner:
Create your app with the following settings:
Below is a screenshot from creating a Passage App in the Passage Console:
Once the application has been created, click on Go to Dashboard button in the top right:
Here is the dashboard for your new application:
You will need to fetch your Passage App ID and API key from your Passage account. Copy your Passage App ID with the copy button and create a .env file in the backend folder with the following:
Next, we will need to create the application’s API key so our backend server will have the proper permissions to authenticate users for your app. Click on the Settings section on the left and select the option API Keys:
Click the Create API Key button, copy the API key and paste it into your .env with the following variable PASSAGE_API_KEY:
In this .env file, PASSAGE_APP_ID and PASSAGE_API_KEY are environment variables that we are passing to our backend server. These are stored in a .env file as it’s good practice to make sure your secret / sensitive keys don’t accidentally exist in a public place (i.e. a public GitHub repository).
Note: You will need your Passage APP ID for the frontend, so keep this close by for implementing the React frontend.
First clone the react front-end from our react example repository by running the following commands:
1. Clone the example repository:
2. Copy the react frontend example into a frontend folder:
3. Remove the other example repository code:
4. Install the frontend dependencies:
Similar to what was done for the backend server, you will need to copy the Application ID from the console into a .env file in the root directory of frontend:
Now it is time to prevent unauthenticated users from accessing the dashboard page. Let’s add a hook that will communicate with our backend server to handle the authentication.
First remove the old hook with the following command:
Create a directory for the new hook that will interact with our backend server:
The code for this hook is as follows:
Note: The React useEffect() hook happens on both mount and unmount, so canceling the API request will prevent an error that can occur when handling API requests in a useEffect hook that occurs when setting the state on a component that is unmounted.
Now we will install the hook’s dependency:
We will also need to modify the frontend/src/views/Dashboard.js file and change useCurrentUser to useAuthStatus. Your Dashboard.js file should now look like this:
Now that this hook has been implemented, the code we have in frontend/src/views/Dashboard.js will now use this hook to verify that a user has been properly authenticated. Unauthenticated users that visit /dashboard will now be shown an unauthorized page, while authenticated user will be shown their Passage User ID.
Now we will need to add the backend to process the request from the frontend.
To run the backend server, make sure you’re in the backend directory and run:
Now in the frontend directory, start the React app to see Passage biometric authentication in action:
Congratulations! You now have a React application using your own backend server that uses passwordless authentication!
You can see the finished application on GitHub here.
To learn more about Passage and biometric authentication for web applications, you can:
Passage is in beta and actively seeking feedback on the product. If you have feedback, bug reports, or feature requests, we would love to hear from you. You can email us at support@passage.id or fill out this form.