Authentication using the Auth0 to an Angular application
Introduction
Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.
Auth0 is an easy to implement, adaptable authentication and authorization platform.
Prerequisites
Before you start, you need to install and configure the tools:
Getting started
Create and configure the account on the Auth0
1. Let’s create the account. Access the site https://auth0.com/ and click on the button Sign up.
2. Fill in the field Email and click on the button SIGN UP.
3. Fill in the fields Email, Password and click on the button Continue.
4. Click on the option Personal and click on the button NEXT.
5. Let’s create the application. Click on the menu Applications and click on the menu Applications.
6. Click on the link with the application name.
7. Copy the domain that has been generated, in my case, the domain dev-5tf99p7c.us.auth0.com was copied, copy the Client ID that has been generated, in my case, the Client ID GBPB42qhMWCtvrwGmYxvm5cbHXU68nzG was copied, select the option Single Page Application in the field Application Type, fill in the fields Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins and click on the button Save Changes.
8. Check the registered email.
Create the Angular application
1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.
2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.
3. Configure the variable auth0.domain with the Auth0 domain and the variable auth0.clientId with the Auth0 Client ID in the src/environments/environment.ts and src/environments/environment.prod.ts files as below.
4. Install the @auth0/auth0-angular library.
5. Create the SignInComponent component.
6. Change the src/app/sign-in/sign-in.component.ts file. Import the Router service and create the signIn method as below.
7. Change the src/app/sign-in/sign-in.component.html file. Add the lines as below.
8. Create the ProfileComponent component.
9. Change the src/app/profile/profile.component.ts file. Import the AuthService service and add the lines as below.
10. Change the src/app/profile/profile.component.html file and add the lines as below.
11. Change the src/app/app.component.ts file. Import the AuthService service and create the signOut method as below.
12. Change the src/app/app.component.html file and add the menu as below.
13. Change the src/app/app-routing.module.ts file and add the routes as below.
14. Change the src/app/app.module.ts file. Import the FormsModule and AuthModule modules, the ProfileComponent and SignInComponent components and configure the AuthModule module as below.
15. Run the application with the command below.
16. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.
Testing the application sign in
1. Let’s test the application sign in. Access the URL http://localhost:4200/ and click on the button Sign in.
2. Click on the button Sign up.
3. Fill in the fields Email Address, Password and click on the button Continue.
4. Click on the button Accept.
5. You will be redirected to the application.
6. Check the registered email.
7. Ready! We test the application sign in and profile view. Auth0 documentation is available at https://auth0.com/docs.
The application repository is available at https://github.com/rodrigokamada/angular-auth0.
This tutorial was posted on my blog in portuguese.
