Aurelia-simple-auth0 NPM

aurelia-simple-auth0

A simple aurelia plugin to implement auth0's hosted login page.

Installation

npm install aurelia-simple-auth0 --save

aurelia.json

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"
}

main.js

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 either localStorage or sessionStorage. The auth0 returned values are written here after successful login.

Accessing Auth0Service

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

Standard Callback Custom Element

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.
        });
    }
}

Auth0Service Methods

authenticate()

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.

login()

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();	
	}
}

logout()

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();	
	}
}