Let's get the clientId and domain from Auth0's project. For that, we need to sign in to our Auth0 account. Let's create a new application in Auth0 from its dashboard. Once created, go to the Applications settings to get the Client ID and Domain. Also, update the Allowed Callback URL to http://localhost:4201/callback:
Let's store our Client ID and Domain in the environment files:
export const environment = {
production: false,
auth: {
domain: '--- YOUR OWN DOMAIN ---',
clientId: '--- YOUR OWN CLIENT ID ---',
logoutUrl: 'http://localhost:4201/home',
callbackUrl: 'http://localhost:4201/callback'
}
};
We also need to update the domain and clientId in our Nest.js application. Go to apps/es-api/src/app/shared/auth.middleware.ts and update the domain and clientId.
Now, let's connect everything by dispatching the action for RegisterApp in our Auth state:
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { RegisterApp } from '@ngprojects/auth';
import { environment } from '../environments/environment';
...
export class AppComponent {
constructor(
private store: Store<any>,
) {
this.store.dispatch(new RegisterApp({
clientId: environment.auth.clientId,
domain: environment.auth.domain,
callbackUrl: environment.auth.callbackUrl,
}));
}
}
Now that our app is registered with Auth0, let's dispatch our login action on the click of the Sign In button in our navigation.
First, let's update the NavComponent class:
import { Component, OnInit } from '@angular/core';
import { AUTH_FEATURE_KEY, Logout, Login } from '@ngprojects/auth';
import { Store } from '@ngrx/store';
...
export class NavComponent implements OnInit {
title = 'ES Admin Portal';
authenticated: any;
constructor(private store: Store<any>) {
this.store.select(state => state[AUTH_FEATURE_KEY].authenticated)
.subscribe(auth => {
this.authenticated = auth;
});
}
...
loginOrLogout() {
if (this.authenticated) {
this.store.dispatch(new Logout());
} else {
this.store.dispatch(new Login());
}
}
}
Now that we have our NavComponent class observing the authentication from the NgRx store and updating our authentication property, and a function to dispatch a login or logout action based on the current authentication of the app, let's use them to update the navigation template:
...
<md-top-bar-nav>
<ng-container *ngIf="authenticated">
<ng-container *ngTemplateOutlet="list"></ng-container>
</ng-container>
</md-top-bar-nav>
<md-top-bar-right>
<div class="md-top-bar__user"></div>
<div class="md-top-bar__logged-out">
<button md-button color="blue" (click)="loginOrLogout()">
{{authenticated ? 'Sign Out': 'Sign In'}}
</button>
</div>
</md-top-bar-right>
<md-top-bar-mobile [shouldCloseOnClick]="false">
<ng-container *ngTemplateOutlet="brand" ngProjectAs="brand"></ng-
container>
<ng-container *ngIf="authenticated">
<ng-container *ngTemplateOutlet="list"></ng-container>
</ng-container>
<button md-button color="blue" (click)="loginOrLogout()">
{{authenticated ? 'Sign Out': 'Sign In'}}
</button>
</md-top-bar-mobile>
...
Now, when you click on the Sign In button, you should see that the Auth0 authentication page loads up. After logging in by using any of the sign-in processes, you should be redirected to our callback page, which should then dispatch the HandleLoginCallback action, and sign the user in. After signing in, you should see that the button gets updated to Sign Out. When you refresh the page, since we already have the Auth token in localStorage, you should still see the user logged in.