A simple aurelia plugin to implement auth0's hosted login page.
npm install aurelia-simple-auth0 --save
Add the following to bundles.dependencies:
{
"name": "auth0",
"path": "../node_modules/auth0-js/build",
"main": "auth0"
}, {
"name": "aurelia-simple-auth0",
"path": "../node_modules/aurelia-simple-auth0/dist/amd",
"main": "index"
}
aurelia.use
.plugin('aurelia-simple-auth0', {
domain: 'YOUR-DOMAIN.auth0.com',
clientID: 'YOUR-AUTH0-CLIENT-ID',
redirectUri: 'CALLBACK-URL',
audience: 'THE-AUDIENCE',
responseType: 'token id_token', // OPTIONAL: If not specified, this value is used.
scope: 'openid', // OPTIONAL: If not specified, this value is used.
storageLocation: localStorage // OPTIONAL: This is the default. Can also be set to sessionStorage.
});
- The required values supplied to the plugin are found in your auth0 dashboard.
- The
redirectUri
specifies a callback to route to after successful or unsuccessful login. This is usually an aurelia custom element set up to handle the return values. See Standard Callback Custom Element.
-
storageLocation
is eitherlocalStorage
orsessionStorage
. The auth0 returned values are written here after successful login.
Auth0Service contains the plugin's high-level interface to auth0.
import {inject} from 'aurelia-framework';
import {Auth0Service} from 'aurelia-simple-auth0';
@inject(Auth0Service)
export class MyClass {
constructor(auth0Service) {
this.auth0Service = auth0Service;
}
}
You must create a callback custom element and add it to your main router configuration for the route given in the redirectUri plugin configuration option. That way, this element will be routed to after the user is done with auth0's hosted login page so it can retrieve returned auth0 values using the authenticate() method and perform the appropriate tasks after the login is successful or not.
This custom element's view can be anything you like. Typically you would display a progress indicator.
The following shows a standard template for the callback element's view-model:
import {inject} from 'aurelia-framework';
import {Auth0Service} from 'aurelia-simple-auth0';
@inject(Auth0Service)
export class Callback {
constructor(auth0Service) {
auth0Service.authenticate().then(() => {
//Handle a successful login, usually by going to a new route.
}).catch(e => {
//Handle an unsuccessful login, usually by displaying an error, and then going to a new route.
});
}
}
Call this method in your callback's constructor. It returns a promise to parse the response from auth0 and, if the user successfully logged in, write the returned values into the storageLocation. When the promise resolves, the user has successfully logged in. If the promise rejects, the user has not successfully logged in.
Call this method to display the auth0 hosted login page. Upon success or failure, auth0 will redirect to your designated callback custom element.
Example:
import {inject} from 'aurelia-framework';
import {Auth0Service} from 'aurelia-simple-auth0';
@inject(Auth0Service)
export class MyClass {
constructor(auth0Service) {
this.auth0Service = auth0Service;
}
loginButtonClicked() {
this.auth0Service.login();
}
}
Call this method to logout the user. Doing so will erase all auth0 information added to your designated storageLocation.
Example:
import {inject} from 'aurelia-framework';
import {Auth0Service} from 'aurelia-simple-auth0';
@inject(Auth0Service)
export class MyClass {
constructor(auth0Service) {
this.auth0Service = auth0Service;
}
logoutButtonClicked() {
this.auth0Service.logout();
}
}
The last access token passed back by auth0 after a successful user login.
The expiration date/time in milliseconds of the current user session.
The last id token passed back by auth0 after a successful user login.
This value is true
if the user successfully logged in and their session has not expired. Otherwise it is false
.