Auth0 With Angular Integration
Typically, for authentication and authorization, we use our database or cloud database. Data loss and a lack of security are the drawbacks of this technology. We have an open-source identity provider to correct this. This provider will handle login, authentication, and authorization.
They are holding the login user credentials and presenting a designed login page. The Auth0 login page will deliver a jwt token to the application once you have successfully logged in.
Create and launch an Angular SPA application first.
Here, we’ll go over the specifics of integrating the Auth0 Angular SDK.
Install Auth0 Angular SDK.
$ npm i @auth0/auth0-angular
Configure AuthModule in the app.module.ts.
// Import the module from the SDK
import { AuthHttpInterceptor, AuthModule } from ‘@auth0/auth0-angular’;
@NgModule({
imports: [
AuthModule.forRoot({
domain: “dev-e3ln3dbw.us.auth0.com”,
clientId: “kr9GdWS9fZUU3mUx2hMYrUEkKTYP2Euc”,
}),
]
})
Configure Authservice in loginpage component
import { AuthService } from ‘@auth0/auth0-angular’;
constructor(public auth:AuthService) { }
async loginWithRedirect(){
try{
await this.auth.loginWithPopup({redirect_uri:’https://app.secretchest.io'}); // application domain url
}catch(err){
console.log(err)
}
}
HTML
<button type=”button” class=”btn btn-primary mt-4" (click)=loginWithRedirect();>Login</button>
To check whether the auth0 Provider is operational, click the Login button. When you click the login button, a new pop-up provider login page window appears.
Visit the management console for Auth0. I hope you’ve developed SPA. If not, see my earlier blog
Open the Settings page, you will find a Client ID and Client Secrets are generated in the page. In the Application URLs section, add http://localhost:4200 to the following fields.
Allowed Callback URLs
Allowed Logout URLs
Allowed Web Origins
Allowed Origins (CORS)
Now back to your application, Once we logedin successfully we need to get success response token.
To get a token,
Configure AuthModule in the app.component.ts.
import { AuthService } from ‘@auth0/auth0-angular’;
constructor(public auth:AuthService) { }
async ngOnInit(): Promise<void> {
await this.auth.idTokenClaims$.subscribe((i) => {
this.token = i?.__raw;
})
}
__raw will be our JWT token and use it for validation.
Decrypting the token yields response information, including
{
nickname: ‘k.prem30093’,
name: ‘k.prem30039@gmail.com’,
picture: ‘https://s.gravatar.com/avatar/15sfvcz3d5f178708843b6c59536ba39c05a6?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fk.png',
updated_at: ‘2022–10–11T11:41:45.423Z’,
email: ‘k.prem30093@gmail.com’,
email_verified: true,
iss: ‘https://dev-e343ln3dbwwsr.us.auth0.com/',
sub: ‘auth0|6268f834f3f3d1006b4366399’,
aud: ‘kr9GdWS9fZUU3mUx2hMYrbkUEkKTYP2Euc’,
iat: 1665988019,
exp: 1666024019,
sid: ‘v547tj9cNv8rDOyFnDc6NlJXz-d2Vbaz’,
nonce: ‘bC1wXzVCN0NnTXlYQVg4Q3BmVTgyUnRUN1lMbjE4TmQtTlFhN1BhbVhCUA==’
}
Drop your questions in the commands or send an email to k.prem3009@gmail.com for further clarification.
Comments
Post a Comment