Angular2 Auth Save Abandoned

Authentication for Angular2-based apps.

Project README


Authentication for Angular2-based apps.

Table of Contents

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


# from the terminal at the root of your project
npm install -S

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';


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, [
   * Overwrite request options and token auth options
  provide(RequestOptions, {useClass: CustomRequestOptions}),
  provide(TokenAuthOptions, {useClass: CustomTokenAuthOptions}),

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';

  selector: 'main',
  directives: [ProtectedRouterOutlet],
  template: authTemplate
  {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.


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';

  selector: 'exampleapp',
  directives: [ROUTER_DIRECTIVES],
  template: appTemplate,
  {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.


Running Example


cd example/server
npm install
npm start


cd example/webapp
npm install
npm start
Open Source Agenda is not affiliated with "Angular2 Auth" Project. README Source: teonite/angular2-auth
Open Issues
Last Commit
7 years ago

Open Source Agenda Badge

Open Source Agenda Rating