Learn how to build a user authentication flow with Angular by integrating Angular OIDC client library.
In this tutorial, we will show you how to build a user authentication flow with Angular by integrating Logto SDK. The tutorial uses TypeScript as the programming language.
Before you begin, ensure you have the following:
To get started, create a Logto application with the "Single page app" type. Follow these steps to create a Logto application:
Then you should see an interactive guide that guides you through the process of integrating Logto SDK with your Angular application. The following content can be a reference for future use.
Install Logto JS core SDK and Angular OIDC client library:
In your Angular project, add the auth provider your app.config.ts:
Switch to the application details page of Logto Console. Add a Redirect URI http://localhost:3000/callback.
Redirect URI is an OAuth 2.0 concept which implies the location should redirect after authentication.
Similarly, add http://localhost:3000/ to the "Post sign-out redirect URI" section.
Post Sign-out Redirect URI is an OAuth 2.0 concept which implies the location should redirect after signing out.
Then click "Save" to save the changes.
In the component where you want to implement sign-in and sign-out (for example, app.component.ts), inject the OidcSecurityService and use it to sign in and sign out.
Then, in the template, add buttons to sign in and sign out:
The OidcSecurityService provides a convenient way to subscribe to the authentication state:
And use it in the template:
Now you can run the application and try to sign-in/sign-out with Logto:
If you encounter any issues during the integration, please don't hesitate to join our Discord server to chat with the community and the Logto team!