Building an Angular Passkey Login Page with TypeScript

Building an Angular Passkey Login Page with TypeScript

In this blog post, we’ll be walking through the process of building a sample application with passkey authentication using Angular and TypeScript. We’ll cover how to embed the Corbado web component and implement passkey login functionality for a seamless user experience.

1. Introduction

2. Prerequisites

3. Set up the Angular project

4. Repository structure

5. Set up the Corbado web component for passkey authentication

      5.1 Set up your Corbado account and project

      5.2 Embed the web component in your frontend

      5.3 Set up the profile page

      5.4 Add Corbado session management

      5.5 Run the application

6. Conclusion

1. Introduction

The final result of this tutorial looks as follows:

Angular Passkeys Login Page

2. Prerequisites

This tutorial assumes basic familiarity with Angular, HTML, CSS and JavaScript / TypeScript. Let’s dive in! Moreover, you need to have Node and NPM installed on your machine. To faciliate things and follow this tutorial, we recommend to install the Angular CLI as well:

npm install -g @angular/cli

3. Repository structure

Let’s first discuss the structure of our project (full GitHub repo):

The rest of the files of this project can be ignored for the purpose of this tutorial.

4. Set up the Angular project

In the following, we explain step-by-step what needs to be done to successfully set up the Next.js project. If you want to see the finished code,please have a look at our sample application repository.

Let’s start out by initializing a new Angular project. In this tutorial, we're using Angular version 15.2.9:

ng new passkeys-demo-angular

In the installation guide steps, we select the following:

  • Angular routing: Yes
  • Stylesheet format: CSS

If you run

ng serve

the sample Angular skeleton application starts at http://localhost:4200.

5. Set up the Corbado web component for passkey authentication

5.1 Set up your Corbado account and project

Visit the Corbado developer panel to sign up and create your account (you'll see the passkey sign-up in action here!).

Corbado Developer Panel Sign up

In the appearing project wizard, select “Integration guide”, “Web component” as integration mode and “No existing users” as we’re building a new app from scratch.

Then, jump over to the integration guide that helps to set up all required settings.

Corbado Passkey Integration Guide

At first, we need to define a new authorized origin, which is in the case of our Angular application "http://localhost:4200" (you can give it any name you want, e.g. "local").

Add Authorized Origin

In this example, the creation of an API secret is optional. You would need if you want to request protected user data from the Corbado backend or use Corbado’s session management for protecting your resources.  

Next, we set the Application URL, Redirect URL and Relying Party ID to the following values (see explanation below):

Application URL Redirect URL Relying Party ID
  • Application URL: Provide the URL where you embedded the web component, here: http://localhost:4200
  • Redirect URL: Provide the URL your app should redirect to after successful authentication and which gets sent a short-term session cookie, here: http://localhost:4200/profile
  • Relying Party ID: Provide the domain (no protocol, no port and no path) where passkeys should be bound to, here: localhost

The last two steps in the integration guide (“Add Corbado session management and protect your routes” and “Start using passkeys”) will be covered below.

5.2 Embed the web component in the frontend

Navigate to the root directory of the project:

cd passkeys-demo-angular

Delete everything from the app.component.html to have a clean homepage and only leave the following line:

Next, we create two new components, one where we display our passkey login web component and one that displays basic user information after we successfully authenticated.

ng generate component login
ng generate component profile

Open src/app/app-routing.module.ts and add the routes for the login and profile component. The login component should be reachable at http://localhost:4200, while the profile component is reachable at http://localhost:4200/profile:

Then, we need to install the web component:

npm i @corbado/webcomponent

We add the web component code (you can copy it from the integration guide) and add it to login.component.html. As HTML attribute “project-id”, we take the project ID from the developer panel (please use this project ID in all following code snippets as well).

Optionally, you can modify the styling (via CSS classes) and text / behavior (via the developer panel or via HTML attributes).

If your Angular web application is still running in the browser (via "ng serve") and you open http://localhost:4200, this error is likely to occur:

Angular Passkey Troubleshooting

In Angular, you must specifically state that your modules are using custom elements. If this declaration is not made, the build process will fail, presenting errors about unrecognized elements. To address this, import the CUSTOM_ELEMENTS_SCHEMA and add it to your module's schemas (the second option from the provided troubleshooting advice from Angular).

Go to src/app/app.module.ts and add CUSTOM_ELEMENTS_SCHEMA to NgModule.schemas:

Then, import @corbado/webcomponent in the src/app/login/login.component.ts file:

Moreover, you need to declare the types of the Corbado web component. Create a new declarations.d.ts file in the src/app/login folder with the following code:

To fix the styling of the web component, you need to import the web component’s CSS files in styles.css:

Hint: It’s important to add the “@” symbol and semicolon.

You can check http://localhost:4200 again and everything should look as expected.

5.3 Set up the profile page

After successful authentication, the Corbado web component redirects the user to the provided Redirect URL (https://localhost:4200/profile). This page renders basic user information (user ID and email) and provides a button to logout. Adapt the src/app/profile/profile.component.html and add the following code:

5.4 Add Corbado session management

On every frontend page, that should be visible to authenticated users or should load protected resources, we need to add the Corbado session management logic, so that session refresh works as expected. Add / modify the following code in the src/app/profile/profile.component.ts file (note, that the import of the Corbado web component is different to the import in src/app/login/login.component.ts):

To provide more context, we add user profile information to the profile page if the user is successfully authenticated and add a logout button. This requires also introducing a User type for TypeScript.

5.5 Run the application

If everything is set up and installed, run the application with

ng serve

You should see the following screen:

Angular Passkeys Login Page

After successful sign up / login, you see the profile page:

Angular Passkeys Profile Page

6. Conclusion

This tutorial showed how easy it is to add passwordless authentication with passkeys to an Angular app using Corbado. Besides the passkey-first authentication, Corbado provides simple session management, that we used for a retrieval of basic user data. If you want to read more about how you can leverage the session management to retrieve backend data, please see Corbado docs or if you want to add Corbado to your existing app with existing users, please see Corbado docs.

Enjoyed this read?

Stay up to date with the latest news, strategies and insights about passkeys sent straight to your inbox!