How to add Auth0 to your Angular app
Tags: angular, auth0, tutorial
Published: 2021-08-20 09:48:12

> **Pro Tip:** look out for the 🛠 emoji if you want to skim

The number of apps on the cloud are rising, and so are the challenges in maintaining them. Secure authentication is one way in which we can mitigate some of the challenges in building cloud apps.

Here, I'll show you how to add authentication to your Angular app using [Auth0](https://auth0.com).

## What is authentication?

Authentication is a term that refers to the process of proving that some fact or some document is genuine.

In tech, this term is typically associated with proving a user’s identity. Usually, a user proves their identity by providing their credentials, like a username and password.

Authentication is not to be confused with authorization. Authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to.

## Set up your Auth0 account

If you don't already have an Auth0 account, you need to sign up for one, and set it up. Here's how you do so:

1.  🛠 Sign up for [Auth0](https://auth0.com/).

    ![Auth0 Signup](https://cdn.hashnode.com/res/hashnode/image/upload/v1629431682325/vhV8KgeDf.png)

2.  🛠 Once you have signed up, you should have landed on the Auth0 dashboard. Choose **Integrate Auth0 into your application**

    ![Integrate Auth0](https://cdn.hashnode.com/res/hashnode/image/upload/v1629431989705/0oGE-oHYZ.png)

3.  🛠 Fill in your app data. Choose **Single Page Web Application** as the application type.

    ![Fill in App data](https://cdn.hashnode.com/res/hashnode/image/upload/v1629432085360/wiYy1RTlnj.png)

4.  🛠 Next, you will be asked to choose which type of app to build. We are building an Angular app, so choose that.

    ![Choose app type](https://cdn.hashnode.com/res/hashnode/image/upload/v1629432757745/ATbIy97Cu.png)

You are all set up!

## Configure your Auth0 project

If you followed the steps above, you should be on you project's page. Go to the settings tab to get started.

![Settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1629434444966/swynYbyVC.png)

1.  🛠 First thing to do is note down your client ID and secret.
2.  🛠 You need to configure Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins. For now, you can set them all to `http://localhost:4200`. In production you should set them to whichever domain you use.

These are the important ones, you can fill the rest later.

## Set up your project

🛠 First thing to do is create an Angular app if you don't have one:

```bash
~$ ng new my-app
~$ cd my-app
~$ ng serve -o
```

🛠 Open up a new terminal window/pane, and install the Auth0 Angular SDK:

```bash
~$ cd my-app
~$ npm install @auth0/auth0-angular
```

🛠 Next, open up `src/app/app.module.ts` (the default app module) and import `AuthModule` from the SDK:

```typescript
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';

import {AuthModule} from '@auth0/auth0-angular';

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		AuthModule.forRoot({
			domain: 'domain', // Domain from earlier
			clientId: 'clientid' // Client ID from earlier
		}),
	],

	bootstrap: [AppComponent],
})
export class AppModule {}
```

If you see any errors, try restarting the `ng serve` command. It often happens when you import a new module.

🛠 Next, you can use the `AuthService.loginWithRedirect()` to redirect to the Auth0 universal login page:

```typescript
import {Component} from '@angular/core';
import {AuthService} from '@auth0/auth0-angular';

@Component({
	selector: 'app-root',
	template: '<button (click)="auth.loginWithRedirect()">Log in</button>'
})
export class AppComponent {
	constructor(public auth: AuthService) {}
}
```

And that's basically it! You got the ability to log in.

## More

🛠 You can add the ability to log out by making a call to `AuthService.logout()`.

🛠 You can also get the users profile information from `AuthService.user$`