angular2-auth

Authentication for Angular2-based apps.

Table of Contents

• About this module
• Installation
• Basic Usage
• Running Example

About this module

angular2-auth is based on Token Authentication used in Django REST Framework with the following features:

• simple front-end template with a log-in form
• redirection to the log-in form if unlogged user tries to enter an application
• defining if particular webpage should require authentication (or authorization)
• Angular2 Route support

Installation

# from the terminal at the root of your project
npm install -S https://github.com/teonite/angular2-auth.git

Basic Usage

Add custom options to boot.js

/**
 * src/boot.js
 */
'use strict';
import 'es6-shim';
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'rxjs/Rx';

import {bootstrap} from '@angular/platform-browser-dynamic';
import {enableProdMode, provide} from '@angular/core';
import {AuthComponent} from './app/auth';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {HTTP_PROVIDERS, RequestOptions, BaseRequestOptions, Headers, RequestMethod} from '@angular/http';
import {TokenAuthService} from 'angular2-auth/services/tokenAuth';
import {TokenStorageService} from 'angular2-auth/services/tokenStorage';
import {TokenAuthOptions} from 'angular2-auth/services/tokenAuthOptions';

enableProdMode();

class CustomRequestOptions extends RequestOptions {
  constructor(tokenStorageService:TokenStorageService) {
    super({method: RequestMethod.Get, headers: new Headers()});

    this.headers.append('accept', 'application/json');
    this.headers.append('content-type', 'application/json');

    if (tokenStorageService.getToken()) {
      /**
       * Add Authorization token to every request
       */
      this.headers.append('Authorization', `Token ${tokenStorageService.getToken()}`);
    }
  }
}

class CustomTokenAuthOptions extends TokenAuthOptions {
  constructor() {
    /**
     * Configure obtain-token url, public routes and login-route name
     */
    super('http://localhost:8000/api-token-auth/', ['login'], 'Login');
  }
}

bootstrap(AuthComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  /**
   * Overwrite request options and token auth options
   */
  provide(RequestOptions, {useClass: CustomRequestOptions}),
  provide(TokenAuthOptions, {useClass: CustomTokenAuthOptions}),
  TokenStorageService,
  TokenAuthService
]);

Auth component

To protect your app you will need an outer auth component which will use a custom protected router outlet. The protected router outlet will allow a user to view a certain route only if there is a token in local storage or the route was configured as public.

/**
 * src/app/auth.js
 */
import {Component} from "@angular/core";
import {RouteConfig} from "@angular/router-deprecated";
import {AppComponent} from "./app";
import {LoginComponent} from "angular2-auth/components/login";
import authTemplate from './auth.html';
import {ProtectedRouterOutlet} from 'angular2-auth/directives/protectedRouterOutlet';

@Component({
  selector: 'main',
  directives: [ProtectedRouterOutlet],
  template: authTemplate
})
@RouteConfig([
  {path: '/...', component: AppComponent, name: 'App'},
  {path: '/login', component: LoginComponent, name: 'Login'}
])
export class AuthComponent {
  constructor() {
  }
}

In the example above all routes under AppComponent will be protected and the Login route is configured as public so it will not be protected. To make this work the auth component template needs to use a custom router-outlet directive.

<!--src/app/auth.html-->
<protected-router-outlet></protected-router-outlet>

Main app component

Finally you can add the main app component with routes configuration.

/**
 * src/app/app.js
 */
import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import appTemplate from './app.html';
import {ProtectedComponent} from './components/protected';
import {LogoutComponent} from 'angular2-auth/components/logout';

@Component({
  selector: 'exampleapp',
  directives: [ROUTER_DIRECTIVES],
  template: appTemplate,
})
@RouteConfig([
  {path: '/', component: ProtectedComponent, name: 'Protected'},
  {path: '/logout', component: LogoutComponent, name: 'Logout'}
])
export class AppComponent {
  constructor() {
  }
}

The component's route config includes logout route dispatched to LogoutComponent provided by angular2-auth. LogoutComponent will remove the token from local storage and redirect the user to the root path.

The template of the main app component uses the standard router outlet.

<!--src/app/app.html-->
<router-outlet></router-outlet>

Running Example

Server

cd example/server
npm install
npm start

Webapp

cd example/webapp
npm install
npm start