@d78ng/auth

D78 Auth library takes care of the user authentication (and authorization) for Angular apps, using Keycloak. It wraps keycloak-angular library under the hood, and provides easy to use guards to protect your routes from unauthorized access.

D78AccessGuard: Forces user authentication on route activation D78LogoutGuard: Handles user logout

Getting started

Prerequisities

An existing Angular application. Angular CLI can be used to create one.

Installing

npm i -s @d78ng/auth

How to use

app.module.ts:

// Define imports
import {APP_BASE_HREF} from '@angular/common';
import {D78AuthModule, D78AuthCfg, D78AuthService} from '@d78ng/auth';

export function init(authService: D78AuthService) {
  return () => {
    return new Promise(async(resolve) => {
      try {
        
        // Obtain the configuration (load it from file, etc...)
        const authCfg: D78AuthCfg = await cfg();

        // Initialize the D78AuthService
        await authService.init(authCfg);
        
        resolve(true);
      } catch {
        resolve(false);
      }
    });
  }
}

@NgModule({
  imports: [
    //...
    //Import D78AuthModule:
    D78AuthModule,
    //...
  ],
  providers: [
    //...
    // D78 Auth library works with PathLocation strategy. Provide the basic URL of the application, for it to work:
    {provide: APP_BASE_HREF, useValue: '<APP-BASE-ADDRESS>'}, //ie. http://my.app.com:4200 

    // Initialize the D78AuthService on application start:
    {provide: APP_INITIALIZER, useFactory: init, deps: [D78AuthService], multi: true},
    //...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts:

import {D78AccessGuard, D78LogoutGuard} from '@d78ng/auth';

const routes: Routes = [
  { // Add D78AccessGuard to non-public routes. 
    // The guard authenticates the user, as soon as the route gets activated. 
    path:'protected',
    component: ProtectedComponent,
    canActivate: [D78AccessGuard],
    
    // Optionally, you can specify the roles required to access the resource:
    data: { roles: ['SuperUser', 'NormalUser'] }
  },
  { // Add D78LogoutGuard to route, that is to be navigated on user logout.
    // The guard logs the user out automatically. 
    path:'out',
    component: OutComponent,
    canActivate: [D78LogoutGuard]
  }

For additional info on how to obtain user info, and other details regarding the authentication implementation, please refer to keycloak-angular README and examples.

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on its repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

See also

Project home page Reference documentation NPM package