Is there a preferred authentication method?

Help Requests
1

I’ve seen examples of people handling authentication two different ways.

Method 1
Rob E. demonstrated a method that checks to see if we have an authenticated user in main.js. If there isn’t, then app.setRoot() is set to a login.ts page – otherwise, app.setRoot() is set to app.ts.

Method 2
In the Aurelia Docs, they show using the Navigation Pipeline to add an authorization step. I realize this is related more to Authorization, but it seems as though this method could also be used to force authentication.

Is there a preferred method? Are there pros/cons to these methods that could guide someone to use one over the other?

One issue that I’ve had with Method 1 is that I can’t seem to find a way to force someone to a specific landing page after login. IOW, if the user types: https://myapp/page3 into the browser (using Method 1), login.ts will be loaded and displayed but the url doesn’t change. Once they’ve successfully logged in, I have the following code – but this still tries to land them on https://myapp/page3 and I cannot find a way to force them to https://home.

private async loginClick(){
    let result = await this.dataService.signIn(this.username, this.password);
    if(result.isValid) {
       this.dataService.user = result.User;
       this.router.navigate('/', {replace: true, trigger: false});
       this.aurelia.setRoot(PLATFORM.moduleName("app"));
       return true;
    }
   ...
}

My routes are all defined in app.ts so maybe that’s why it can’t route to home – because it hasn’t been defined yet?

1 Like
2

I don’t know the direct answer and am working through the issue with you.

So for me the question that first pops up is:
How to they handle that in plain javascript?

My thought for that flow would be:
A check of state/cookie to see if they are authenticated or not.
If yes:
continue to requested page
If not:
original URL or partial URL is stored somewhere that can be accessed later
redirect to the login flow.

For the login flow…
On successful login:
check is made to see if there is a stored URL
if found redirect to that URL

For Aurelia wouldn’t we do something similar?
Save the route and restore upon successful login? Using app (or its equivalent), and its activate life-cycle to rehydrate that call?

The question that comes up there is where to save that so it can be accessed on successful login. Depending on what authentication system you are using, anything saved might be lost, when for instance the authentication system returns the success/fail using the callback url, so you would have to be careful where you persisted that, and how long you wanted it to live.

My thought on the latter would be a cookie or local storage with a timestamp of some type if required.

Am I off base here?

1 Like
3

So, I’m not so much looking for how to do it – I’ve actually implemented both in different projects. My real question is – is one method better than the other?

Also, in your example, you were trying to load whatever page the user was originally trying to land on within the app. In the example I gave, I’m actually not wanting to do that. I’m actually trying to force everyone to the home page after they first log in. That part I have not been able to accomplish with Method 1.

1 Like
4

Sorry, I can’t help with what others might consider that.

On the second part, for changing root won’t it just automagically go go whatever the default route is?
route: ['', 'home']

1 Like