Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serhiisol/ngx-auth
Angular 16+ Authentication Module
https://github.com/serhiisol/ngx-auth
angular authentication interceptors
Last synced: 20 days ago
JSON representation
Angular 16+ Authentication Module
- Host: GitHub
- URL: https://github.com/serhiisol/ngx-auth
- Owner: serhiisol
- License: mit
- Created: 2017-02-22T21:09:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T11:00:09.000Z (over 1 year ago)
- Last Synced: 2024-10-30T08:18:14.245Z (about 1 month ago)
- Topics: angular, authentication, interceptors
- Language: TypeScript
- Homepage:
- Size: 357 KB
- Stars: 234
- Watchers: 13
- Forks: 47
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-auth - Angular 7+ Authentication Module. (Uncategorized / Uncategorized)
README
# Angular 16+ Authentication
This package provides authentication module with interceptor
```
npm install ngx-auth --save
```
For older versions of angular see [Older Versions](#older-versions) section.
## Full example
Full example you can find in the [example folder](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.:
```typescript
import { AuthService } from 'ngx-auth';
@Injectable()
export class AuthenticationService implements AuthService {
private interruptedUrl: string;
constructor(private http: Http) {}
isAuthorized() {
const isAuthorized = !!sessionStorage.getItem('accessToken');
return of(isAuthorized);
}
getAccessToken() {
const accessToken = sessionStorage.getItem('accessToken');
return of(accessToken);
}
refreshToken(): Observable {
const refreshToken = sessionStorage.getItem('refreshToken');
return this.http
.post('http://localhost:3001/refresh-token', { refreshToken })
.catch(() => this.logout())
}
refreshShouldHappen(response: HttpErrorResponse) {
return response.status === 401;
}
verifyRefreshToken(req: HttpRequest) {
return req.url.endsWith('refresh-token');
}
skipRequest(req: HttpRequest) {
return req.url.endsWith('third-party-request');
}
getInterruptedUrl() {
return this.interruptedUrl;
}
setInterruptedUrl(url: string) {
this.interruptedUrl = url;
}
}
```
2. Specify functions `publicGuard` for public routes and `protectedGuard` for protected respectively, e.g.:
```typescript
const routes: Routes = [
{
path: '',
component: PublicComponent,
canActivate: [publicGuard],
children: [/*...*/],
},
{
path: '',
component: ProtectedComponent,
canActivate: [protectedGuard],
children: [/*...*/],
}
];
```
2. Create additional `AuthenticationModule` and provide important providers and imports, e.g.:
```typescript
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
3. 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):
```typescript
@Component({
selector: 'app-login',
templateUrl: './login.component.html'
})
export class LoginComponent {
login() {
this.authService.login()
.subscribe(() =>
this.router.navigateByUrl(this.authService.getInterruptedUrl())
);
}
}
```
## Older Versions
For angular 7-15, use version 5.4.0
```
npm install [email protected] --save
```
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
```