Building an Angular Passkey Login Page with TypeScript

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

The final result of this tutorial looks as follows:

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:

‍

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.

‍

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:

In the installation guide steps, we select the following:

• Angular routing: Yes
• Stylesheet format: CSS

If you run

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

‍

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

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.

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").

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

‍

Navigate to the root directory of the project:

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.

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:

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:

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.

‍

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:

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.

‍

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

You should see the following screen:

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

‍

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.