In this article, you will learn how to build a simple Python Flask application and add biometric authentication using Passage.
Users will log in to your application using the biometrics built into their devices (e.g. Face ID, Windows Hello, etc) or with magic links sent to their email. This app is built such that it only allows authenticated users to view a simple dashboard and blocks unauthenticated users. This guide will walk through the setup of a Flask application with a few simple routes, adding authentication to the application, and authorizing routes using Passage.
If you are already familiar with Python, you can go straight to our full example application on GitHub or skip to the “Add Authentication with Passage” section to learn how to integrate biometric authentication into an existing application.
To get started, ensure you have Python 3 installed on your machine. In your working directory for your application, run the following commands to set up your Python virtual environment.
For this application, you will create an application with two pages, a login page and dashboard page, which requires authentication to access. We will run through the basic app setup quickly. Install a couple key dependencies:
Create an app folder and then an __init__.py and main.py inside of it.
__init__.py
main.py
Create an app/templates directory and create three HTML files for the home, dashboard, and unauthorized pages.
index.html
dashboard.html
unauthorized.html
Finally add the following CSS to static/style.css
You can test your app by running the following command and then visiting http://localhost:5000.
You can leave this up and running throughout the tutorial to see your progress as you add authentication.
To add authentication to the home page, you will need to add the Passage Auth Element to the index.html template. First, get your Passage App ID from the Passage Console. Make an account on the console and create an application with the following settings:
Copy your App ID from the dashboard and set it in an environment variable in an .env file in the root directory:
Now add the Passage Auth Element to index.html
In the index handler in main.py, fetch the App ID from the environment variable and pass it into the template.
Now when you restart the application, you should see a complete login page!
Last but not least, the application needs to prevent unauthenticated users from accessing the dashboard page. You will use the Passage Python SDK to create a Flask middleware to handle the route protection. This middleware will run before every handler in the auth blueprint. Start by installing the Passage SDK from pip.
To use the SDK functionality for retrieving users, an API key is required. You can generate one in the Passage Console Settings. Create a key and copy it into the .env file. Then create a before_auth decorator as follows.
main.py
Since the dashboard handler is part of the auth blueprint, it will immediately be protected. You can update the dashboard HTML template and handler to fetch the user’s email address using Passage as well.
dashboard.html
main.py
Now you can try out the biometrics authentication in the application you just built! Your application should look something like this and you can see the login experience as your users would.
To recap, you have just:
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 me at anna@passage.id or fill out this form.