Angular

This guide explains how to set up your Angular project to begin using @badisi/ngx-auth.

🚀 The fastest, simplest and preferred way is the schematic way but you can also install this library manually.

Before using it

Make sure you properly configured your 👉 Authentication Provider.

Schematic

Use the Angular CLI's installation schematic to automagically set up your Angular project with this library:

ng add @badisi/ngx-auth

Questions will be asked during the process, so please refer to the configuration page for more information.

You can also read on with the Manual installation guide to have a better understanding of what the schematics is actually doing to your project.

Manual installation

If you wish to install this library manually, please follow the steps below:

1. Install the library from the NPM repository

   npm

   npm install @badisi/ngx-auth --save

   yarn

   yarn add @badisi/ngx-auth

2. Modify your angular.json file

   angular.json

   {
     "...": {
       "build": {
         "options": {
           "allowedCommonJsDependencies": [
             "crypto-js"
           ],
           "assets": [{
             "glob": "**/*",
             "input": "node_modules/@badisi/ngx-auth/oidc/assets",
             "output": "oidc/callback"
           }]
         }
       }
     }
   }
   info

   • This library depends on oidc-client-ts which itself depends on crypto-js which is a commonjs dependency.
   • Assets needs to be copy over to your application because some html web pages are used and required when navigating back from the Authentication Provider.

3. Provide the library (according to the type of your Angular application)

   Standalone

   Modify your main.ts file

   main.ts

   import { bootstrapApplication } from '@angular/platform-browser';
   import { initAuth, provideAuth } from '@badisi/ngx-auth';
   
   import { appConfig } from './app/app.config';
   import { AppComponent } from './app/app.component';
   
   initAuth({
     authorityUrl: 'https://dev-fijd1e9x.us.auth0.com',
     clientId: 'kRVVEnAWKMpxxpcodl0TqLXfIHgQvmmt'
   }).then(authProvider => {
     appConfig.providers.push(provideAuth(authProvider));
     bootstrapApplication(AppComponent, appConfig)
       .catch((err) => console.error(err));
   }).catch(error => console.error(error));

   Module

   Modify your main.ts file

   main.ts

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { initAuth } from '@badisi/ngx-auth';
   
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   
   initAuth({
     authorityUrl: 'https://dev-fijd1e9x.us.auth0.com',
     clientId: 'kRVVEnAWKMpxxpcodl0TqLXfIHgQvmmt'
   }).then(authProvider => {
     platformBrowserDynamic([
       authProvider
     ]).bootstrapModule(AppModule).catch(err => console.error(err));
   }).catch(error => console.error(error));

   
   

   Modify your app.module.ts file

   app.module.ts

   import { NgModule } from '@angular/core';
   import { AuthModule } from '@badisi/ngx-auth';
   
   @NgModule({
     imports: [
       AuthModule
     ]
   })
   export class AppModule {}
   info

   • Initializing the library prior to your Angular application bootstrapping ensures that all the security checks are made upstream (if needed) and avoid the whole Angular application to be loaded twice when using redirects.
   • By providing the library, an AuthService, AuthGuard and AuthInterceptor will be also provided to your application.
   tip

   For more info on how to configure the library please have a look at the configuration page.

4. You're done! 🚀