proper use of Auth0 in aurelia applications

[adriatic]

I am looking for the most aurelia "proper" way to use Auth0 - a problem that I am wrestling with for a really long time and only now reached the point where I can formulate the problem correctly (I hope 😄 )

Here is the reference to the "shortened" version of the standard aurelia navigation skeleton esnext application, which looks like this:

I want to require Auth0 based authentication in order to see the content of the GitHub Users menu, so I changed the view model of the app module to be

import {Redirect} from 'aurelia-router';

export class App {
  configureRouter(config, router) {

  var step = new AuthorizeStep;
  config.addAuthorizeStep(step)

    config.title = 'Aurelia-Auth0';
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: 'users',        nav: true, title: 'Github Users', settings: { auth: true }  },
      { route: 'login',         name: 'login',        moduleId: 'login',        title: 'Login' },
    ]);

    this.router = router;
  }
}


class AuthorizeStep {
  run(navigationInstruction, next) {
    if (navigationInstruction.getAllInstructions().some(i => i.config.settings.auth)) {
      var isLoggedIn = false;
      if (!isLoggedIn) {
        return next.cancel(new Redirect('login'));
      }
    }

    return next();
  }	
}

(Note that this is not yet added to https://github.com/aurelia-auth0/basic-templates/tree/master/skeleton-esnext repository).

The line var isLoggedIn = false; in the class AuthorizeStep is just a placeholder for the invocation of the authentication service offered by Auth0 - and this is where I would like to get the advice from someone who "speaks" better Aurelia than I do.

The following code is taken from the Auth0's current sample written for Aurelia users - the sample that made me accept the offer to take care of aurelia samples for Auth0 community, as it violates the Aurelia recommended approach that uses the router pipeline's authorization step.

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import {Router} from 'aurelia-router';
import {tokenIsExpired} from './utils/tokenUtils';

@inject(HttpClient, Router)
export class App {
  message = 'Auth0 - Aurelia';
  lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN);
  isAuthenticated = false;
  
  constructor(http, router) {
    this.http = http;
    this.router = router;
    var self = this;
    
    this.router.configure(config => {
      config.map([
        {
          route: ['', 'public-route'],
          name: 'public',
          moduleId: './public-route'
        },
        {
          route: 'private-route',
          name: 'private',
          moduleId: './private-route'
        }
      ]);
    });
    
    this.lock.on("authenticated", (authResult) => {
      self.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error) {
          // Handle error
          return;
        }

        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('profile', JSON.stringify(profile));
        self.isAuthenticated = true;
        self.lock.hide();
      });
    });

    if(tokenIsExpired())  {
      this.isAuthenticated = false;
    }
    else {
      this.isAuthenticated = true;
    }
  }
  
  login() {
    this.lock.show();   
  }
  
  logout() {
    localStorage.removeItem('profile');
    localStorage.removeItem('id_token');
    this.isAuthenticated = false;   
    this.decodedJwt = null;
  }
  
  getDecodedJwt() {
    let jwt = localStorage.getItem('id_token');
    if(jwt) {
      this.decodedJwt = JSON.stringify(jwt_decode(jwt), null, 2);
    }
    else {
      this.decodedJwt = "No JWT Saved";
    }
  }
}

Open issues

Since Auth0 provides full support for its services via Auth0 Admin Dashboard, the application using these services has to comply with

1. Define callback URLs
   After the user authenticates we will only call back to any of these URLs. You can specify multiple valid URLs by comma-separating them (typically to handle different environments like QA or testing). You can use the star symbol as a wildcard for subdomains ('*.google.com'). Make sure to specify the protocol, http:// or https://, otherwise the callback may fail in some cases.

2. Define callback URLs
   A set of URLs that are valid to redirect to after logout from Auth0. After a user logs out from Auth0 you can redirect them with the returnTo query parameter. The URL that you use in returnTo must be listed here. You can specify multiple valid URLs by comma-separating them. You can use the star symbol as a wildcard for subdomains ('*.google.com'). Notice that querystrings and hash information are not taking into account when validating these URLs. Read more about this at https://auth0.com/docs/logout

3. Define allowed origins
   Allowed Origins are URLs that will be allowed to make requests from JavaScript to Auth0 API (typically used with CORS). By default, all your callback URLs will be allowed. This field allows you to enter other origins if you need to. You can specify multiple valid URLs by comma-separating them or one by line, and also use wildcards at the subdomain level (e.g.: https://*.contoso.com). Notice that querystrings and hash information are not taking into account when validating these URLs.