Where to authenticate user in a SPA? - asp.net

Question

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

Answer 1

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
Aurelia Authentication Best Practices, Multiple Shells
Aurelia Authentication Best Practices, Sessions
Sentry, an Aurelia Authentication Template