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.
For Angular to recongize 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:
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.