Passage is now in public beta + we're excited to announce $4M of new funding! Read our blog post.

Building an Angular App with Biometric Authentication

Chris Loper
March 14, 2022

Passage offers developers a frictionless process to implement passwordless user authentication into their application.  In this guide, learn how to build a simple Angular application that uses Passage for biometric authentication.

Users will log in to your application using the biometrics built into their devices (e.g. Face ID, Touch ID, Windows Hello, etc.) or with magic links sent to their email.  The app will be built such that authenticated users can view a simple dashboard, while unauthenticated users will be blocked.  This article will walk you through how to create an Angular app, setup the components, and authenticate users with Passage.

If you are already familiar with Angular, you can go straight to our full example application on GitHub or skip to the “Add User Authentication with Passage” section to learn how to integrate biometric authentication into an existing application.

Setup

To create an Angular app run:

Note: Create the app with the angular router and with CSS styling.

Build Views for the Application

The router is used to navigate between the views in your application.  In this application, we will have two views Home.js and Dashboard.js. The Home view will contain Passage’s <passage-auth> custom element, which enables user authentication.  The Dashboard view will be an authenticated route and will block any unauthenticated users from viewing the dashboard.

Let's start with building the Home view.

In src/views/Home/Home.component.html:

In src/views/Home/Home.component.ts:

Now let’s build a simple Dashboard view:

In src/views/Dashboard/Dashboard.component.html:

In src/views/Dashboard/Dashboard.component.ts:

Setup the App with the Router

Let’s edit src/app, which is the entry point for the Angular app.

First lets configure the router to have routes to both the Home view and the Dashboard view:

In src/app/app-routing.module.ts:

Let’s update src/app/app.module.ts to declare the components that have been created so far:

Also, edit src/app/app.component.html to add the router to the application:

Now let’s create a Banner component that we can add to the app component, making it visible throughout the application.  Let’s create a component directory and create the banner component. Create banner.component.ts, banner.component.html, and banner.component.css files.

Lets build src/components/banner/banner.component.ts with this code:

Add this html to src/components/banner/banner.component.html:

Copy this CSS into src/components/banner/banner.component.css to add styling to the above component:

Now let’s add the Banner component to the app component so that it will appear throughout the app.

First edit src/app/app.module.ts to include the banner in the declarations:

Now let’s add the banner and a small footer to src/app/app.component.html:

Let’s style the app component by editing src/app/app.component.css:

Add User Authentication with Passage

Now it is time to add passwordless authentication to your application using Passage. First, install the Passage custom element from npm:

Then import the package in the view where you intend to authenticate users.  In this case, src/views/Home/Home.component.ts.  In addition it needs to be added to src/app/app.module.ts, so add the following code to both files:

Importing this script will register the Passage custom element for use in your Angular view. For more information about custom elements refer to the online documentation.

Create an application in the Passage Console (here) with the following settings:

  • Authentication Origin: http://localhost:4200
  • Redirect URL: /dashboard

Below is a screenshot from creating a Passage App in the Passage Console:

Once the application has been created, copy the Application ID from the console to be used in the app. Let’s setup an environment in the app so that the Application ID can be used in this Angular app.

Lets edit src/environments/environment.ts to include this Passage App ID:

Now let’s add the passage-auth custom element to the Home view.

Edit src/views/Home/Home.component.ts:

And edit src/view/Home/Home.component.html to include:

Verifying User Authentication

Now it is time to prevent unauthenticated users from accessing the dashboard page. Please keep in mind that this dashboard protection will not protect sensitive API endpoints. Your server should always use one of the Passage backend libraries to authorize users before returning sensitive data.

For the simplicity of this example, let’s focus on the frontend code.

Instead, implement this check by using the OnInit hook to authenticate the current Passage user in the Dashboard view.  This hook contains logic that allows the Dashboard to check if the current user is authenticated and return basic user info that Passage stores for you. Let’s code up the ngOnInit() hook and add it to src/views/Dashboard/Dashboard.component.ts:

Now that this has been implemented, move to src/views/Dashboard/Dashboard.component.html to properly display different messages to authenticated and unauthenticated users:

Now unauthenticated users that visit /dashboard will be shown an unauthorized page, while authenticated user will be shown their Passage User Name.

Note: Notice that styles have also been added to this version of src/views/Dashboard/Dashboard.component.css:

Now run the app, to see Passage biometric authentication in action:

Conclusion

Congratulations! You now have an Angular application that utilizes passwordless authentication.  Biometric authentication, as you hopefully can see, is both frictionless to implement with Passage and effortless for end users to authenticate themselves.

You can see the finished application on GitHub here.

Learn More About Passage

To learn more about Passage and biometric authentication for web applications, you can:

  • Explore our dashboard to view and create users, customize your application, and add friends
  • Read our guides for other tech stacks and learn how to authorize requests in your backend server
  • Join our Discord and say hi

‍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.