Angular

Integrate Passage into your Angular application

To see a full example of using Passage in an Angular + Express.js application, please visit our sample app on GitHub.

Importing and Using the Passage-Auth Custom Element

The easiest way to add authentication to a web frontend is with a Passage Auth custom element. First you'll need to install the passage-elements package from npm:

npm i --save @passageidentity/passage-elements

Then import the package in the module where you intend to use the custom element. In an Angular application this can be done at the application level, as in this example in app.module.ts or in a sub-module that contains the login/registration page.

import '@passageidentity/passage-elements/passage-auth'

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

It's then just a matter of embedding the passage-auth element into your component template that will handle login. This is done in this example in frontend/src/views/Home/home.component.html:

<div class="authContainer">
  <passage-auth [appId]="appId"></passage-auth>
</div>

Configuring Angular to Recognize Custom Elements

For Angular to recognize a non-Angular component tag as a custom element the Angular module that uses the custom element must be configured with the custom element schema. This example only contains a single app module so the custom element schema is added to app.module.ts:

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  ...
})
export class AppModule { }

Getting Authentication Status and User Information

After the user has logged in with Passage, all requests to your backend need to be authenticated using the JWT provided by Passage. In this example, we set the JWT in an Authorization header to our API server.

This project uses a simple Express backend and the Passage Node.js SDK to authenticate requests and retrieve user data for your application. You can see how that runs in the /backend folder of this repository.

This example handles communication with the backend API in the ngOnInit lifecycle method of frontend/src/views/Dashboard/dashboard.component.ts.