Where to authenticate user in a SPA?

4
votes

I have an Aurelia SPA that connects to a ASP.NET Core backend. I use Auth0 for authentication (using aurelia-auth, not the Auth0 Lock widget).

I currently log in with Auth0 directly, not using the SPA. This gives me issues because the Auth0 implementation in my API expects the id_token and not the access_token. This issue can be passed by telling aurelia-auth to use the id_token as access token. But this complicates further communication between Auth0 and the Aurelia app. Auth0 expects the access_token for user profile calls and such.

Should I authenticate via my own API instead? Or should I make two different fetch-clients in Aurelia? One for calling my API (using the id_token) and one for calling the Auth0 API (using the access_token).

1
asp.netauthenticationaureliaauth0

1 Answers

5
votes

I've written a number of blogs on the subject, and I'll link them below for further reading. My recommendation is to create a separate "authentication" root viewModel that is available to all users, distinct from your "app" root viewModel which is available to only logged in users.

main.js

import AuthService from 'AuthService';

export function configure(aurelia) {
    aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // After starting the aurelia, we can request the AuthService directly
  // from the DI container on the aurelia object. We can then set the 
  // correct root by querying the AuthService's isAuthenticated method.
  aurelia.start().then(() => {
        var auth = aurelia.container.get(AuthService);
        let root = auth.isAuthenticated() ? 'app' : 'login';
        aurelia.setRoot(root);
    });
}

Further reading