Auth0 platform implementation of ngx-auth
Adding
Add
The following examples show the use of an exported function (instead of an inline function) for AoT compilation. Setting up
Note: If your Angular application is performing server-side rendering (Angular Universal), then you should follow the steps explained below.
The
These tokens might be used by other services in the application to set the authorization header of http requests made to secure endpoints.
As the name says, the
Copyright (c) 2019 Burak Tasci
Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.
Table of contents:
- Installation - Examples - Related packages - Adding@ngx-auth/auth0
to your project (SystemJS) - Route configuration
- app.module configuration- Settings - Setting up
Auth0Module
to useAuth0StaticLoader
- SPA/Browser platform implementation
- Server platform implementation
- Usage
- License
Getting started
Installation
You can install@ngx-auth/auth0
using npm
npm install @ngx-auth/auth0 --save
Examples
- ng-seed/universal and fulls1z3/example-app are officially maintained projects, showcasing common patterns and best
@ngx-auth/auth0
.Related packages
The following packages may be used in conjunction with@ngx-auth/auth0
: Adding @ngx-auth/auth0
to your project (SystemJS)
Add map
for @ngx-auth/auth0
in your systemjs.config
'@ngx-auth/auth0': 'node_modules/@ngx-auth/auth0/bundles/auth0.umd.min.js'
Route configuration
ImportAuthGuard
using the mapping '@ngx-auth/core'
and append canActivate: [AuthGuard]
or canActivateChild: [AuthGuard]
properties to the route definitions at app.routes (considering the app.routes is the route definitions in Angular application).NOTICE
You should define a callback url (here we use auth-callback
) handling the Auth0 callback process, and a
public url as a landing component (to prevent infinite loop on routing where no public interfaces exist).
app.routes.ts
...
import { AuthGuard } from '@ngx-auth/core';
...
export const routes: Routes = [
{
path: '',
children: [
{
path: 'home',
component: HomeComponent
},
{
path: 'account',
children: [
{
path: 'profile',
component: ProfileComponent
},
{
path: 'change-password',
component: ChangePasswordComponent
}
],
canActivateChild: [AuthGuard]
},
{
path: 'purchases',
component: PurchasesComponent,
canActivate: [AuthGuard]
},
{
path: 'public',
component: PublicComponent
},
{
path: 'auth-callback',
component: AuthCallbackComponent
}
]
},
...
];
app.module configuration
ImportAuth0Module
using the mapping '@ngx-auth/auth0'
and append Auth0Module.forRoot({...})
within the imports property
of app.module (considering the app.module is the core module in Angular application).Settings
You can call the forRoot static method usingAuth0StaticLoader
. By default, it is configured to have no settings.You can customize this behavior (and ofc other settings) by supplying auth0 settings to Auth0StaticLoader
.
The following examples show the use of an exported function (instead of an inline function) for AoT compilation.
Setting up Auth0Module
to use Auth0StaticLoader
...
import { AuthLoader, AuthModule } from '@ngx-auth/core';
import { Auth0Module, Auth0StaticLoader } from '@ngx-auth/auth0';
...
export function auth0Factory(): AuthLoader {
return new Auth0StaticLoader({
backend: {
clientID: 'YOUR_AUTH0_CLIENT_ID',
domain: 'YOUR_APP_NAME.us.auth0.com',
redirectUri: 'http://YOUR_APP_URL/auth-callback',
scope: 'openid',
responseType: 'token id_token'
},
storage: localStorage,
storageKey: 'currentUser',
publicRoute: ['public'],
defaultUrl: ''
});
}
@NgModule({
declarations: [
AppComponent,
...
],
...
imports: [
AuthModule,
Auth0Module.forRoot({
provide: AuthLoader,
useFactory: (auth0Factory)
}),
...
],
...
bootstrap: [AppComponent]
})
Auth0StaticLoader
has one parameter:- providedSettings:
AuthSettings
: auth settings
Backend
: auth0 backend
- storage: any
: storage (by default, localStorage)
- storageKey: string
: storage key (by default, 'currentUser'
)
- loginRoute: Array<any>
: public route, used as a landing component (by default, ['public']
)
- defaultUrl: string
: default URL, used as a fallback route after successful authentication (by default, ''
):+1: Hellcat! @ngx-auth/auth0
is now ready to do some magic with Auth0 using the configuration above.
Note: If your Angular application is performing server-side rendering (Angular Universal), then you should follow the steps explained below.
SPA/Browser platform implementation
- Remove the implementation from app.module (considering the app.module is the core module in Angular application).
- Import
Auth0Module
using the mapping'@ngx-auth/auth0'
and appendAuth0Module.forRoot({...})
within the imports property
app.browser.module.ts
...
import { AuthLoader, AuthModule } from '@ngx-auth/core';
import { Auth0Module, Auth0StaticLoader } from '@ngx-auth/auth0';
...
export function auth0Factory(): AuthLoader {
return new Auth0StaticLoader({
backend: {
clientID: 'YOUR_AUTH0_CLIENT_ID',
domain: 'YOUR_APP_NAME.us.auth0.com',
redirectUri: 'http://YOUR_APP_URL/auth-callback',
scope: 'openid',
responseType: 'token id_token'
},
storage: localStorage,
storageKey: 'currentUser',
publicRoute: ['public'],
defaultUrl: ''
});
}
@NgModule({
declarations: [
AppComponent,
...
],
...
imports: [
AuthModule,
Auth0Module.forRoot({
provide: AuthLoader,
useFactory: (auth0Factory)
}),
...
],
...
bootstrap: [AppComponent]
})
Server platform implementation.
- Import
Auth0Module
using the mapping'@ngx-auth/auth0'
and appendAuth0Module.forServer()
within the imports property
app.server.module.ts
...
import { AuthModule } from '@ngx-auth/core';
import { Auth0Module } from '@ngx-auth/auth0';
...
@NgModule({
declarations: [
AppComponent,
...
],
...
imports: [
AuthModule.forServer(),
Auth0Module.forServer(),
...
],
...
bootstrap: [AppComponent]
})
Usage
Auth0Service
has the authorize
, authenticate
and invalidate
methods:The
authenticate
method invokes the WebAuth.parseHash
method to build the accesstoken, idtoken and expiresAt.
If successful, then the tokens are added to the storage
(configured at the AuthLoader
) and the accessToken
,
idToken
and expiresAt
properties of Auth0Service
are set.These tokens might be used by other services in the application to set the authorization header of http requests made to secure endpoints.
As the name says, the
invalidate
method clears the tokens, flushes the authentication response from the storage
,
and redirects to the login
page.License
The MIT License (MIT)Copyright (c) 2019 Burak Tasci