Need help with ngx-auth?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

serhiisol
224 Stars 48 Forks MIT License 37 Commits 1 Opened issues

Description

Angular 7+ Authentication Module

Services available

!
?

Need anything else?

Contributors list

# 76,153
TypeScr...
Node.js
mongoos...
Socket....
33 commits
# 174,853
Shell
angular...
angular...
TypeScr...
1 commit
# 67,638
Ember
osm
routing...
c-plus-...
1 commit
# 396,272
TypeScr...
HTML
Angular
fontawe...
1 commit
# 466,427
C++
macOS
imgui
Windows
1 commit

Angular 7+ Authentication

This package provides authentication module with interceptor

npm install ngx-auth --save

For older versions of angular see Older Versions section.

Full example

Full example you can find in this repo serhiisol/ngx-auth-example

Authentication module

Authentication modules provides ability to attach authentication token automatically to the headers (through http interceptors), refresh token functionality, guards for protected or public pages and more.

Usage

  1. Import
    AuthService
    interface to implement it with your custom Authentication service, e.g.:
import { AuthService } from 'ngx-auth';

@Injectable() export class AuthenticationService implements AuthService {

private interruptedUrl: string;

constructor(private http: Http) {}

public isAuthorized(): Observable { const isAuthorized: boolean = !!sessionStorage.getItem('accessToken');

return Observable.of(isAuthorized);

}

public getAccessToken(): Observable { const accessToken: string = sessionStorage.getItem('accessToken');

return Observable.of(accessToken);

}

public refreshToken(): Observable { const refreshToken: string = sessionStorage.getItem('refreshToken');

return this.http
  .post('http://localhost:3001/refresh-token', { refreshToken })
  .catch(() => this.logout())

}

public refreshShouldHappen(response: HttpErrorResponse): boolean { return response.status === 401; }

public verifyRefreshToken(req: HttpRequest): boolean { return req.url.endsWith('refresh-token'); }

public skipRequest(req: HttpRequest): boolean { return req.url.endsWith('third-party-request'); }

public getInterruptedUrl(): string { return this.interruptedUrl; }

public setInterruptedUrl(url: string): void { this.interruptedUrl = url; }

}

  1. Specify
    PublicGuard
    for public routes and
    ProtectedGuard
    for protected respectively, e.g.:
const publicRoutes: Routes = [
  {
    path: '',
    component: LoginComponent,
    canActivate: [ PublicGuard ]
  }
];
const protectedRoutes: Routes = [
  {
    path: '',
    component: ProtectedComponent,
    canActivate: [ ProtectedGuard ],
    children: [
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
    ]
  }
];
  1. Create additional
    AuthenticationModule
    and provide important providers and imports, e.g.:
import { NgModule } from '@angular/core';
import { AuthModule, AUTH_SERVICE, PUBLIC_FALLBACK_PAGE_URI, PROTECTED_FALLBACK_PAGE_URI } from 'ngx-auth';

import { AuthenticationService } from './authentication.service';

@NgModule({ imports: [ AuthModule ], providers: [ { provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' }, { provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/login' }, { provide: AUTH_SERVICE, useClass: AuthenticationService } ] }) export class AuthenticationModule {

}

where, *

PROTECTED_FALLBACK_PAGE_URI
- main protected page to be redirected to, in case if user will reach public route, that is protected by
PublicGuard
and will be authenticated
  • PUBLIC_FALLBACK_PAGE_URI
    - main public page to be redirected to, in case if user will reach protected route, that is protected by
    ProtectedGuard
    and won't be authenticated
  • AUTH_SERVICE
    - Authentication service token providers
  1. Provide your
    AuthenticationModule
    in your
    AppModule

Customizing authentication headers

By default, requests are intercepted and a

{ Authorization: 'Bearer ${token}'}
header is injected. To customize this behavior, implement the
getHeaders
method on your
AuthenticationService

After login redirect to the interrupted URL

The

AuthService
has an optional method
setInterruptedUrl
which saves the URL that was requested before the user is redirected to the login page. This property can be used in order to redirect the user to the originally requested page after he logs in. E.g. in your
login.component.ts
(check also
AuthService
implementation above):
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

constructor( private router: Router, private authService: AuthenticationService, ) { }

public login() { this.authService .login() .subscribe(() => this.router.navigateByUrl(this.authService.getInterruptedUrl()) ); } }

Older Versions

For angular 6, use version 4.1.0

npm install [email protected] --save

For angular 5, use version 3.1.0

npm install [email protected] --save

For angular 4, use version 2.2.0

npm install [email protected] --save

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.