Angular 7 - On page refresh/new tab, auth is lost and requires user to click login

[arl]

I have followed the angular 2 quickstart guide, but no matter what, on page refresh/new tab opened for the angular app, the user is forced to click Login again. Auth0 Angular SDK Quickstarts: Login

I have added localhost and port number to the Allowed Web Origins, but in the handleAuthenticationMethod the authResult is always null, so the user is forced to Click Login, which redirects them to the home page, not an ideal user experience.

this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.localLogin(authResult);
this.router.navigate([‘/dashboard’]);
} else if (err) {
this.router.navigate([‘/dashboard’]);
console.log(err);
alert(Error: ${err.error}. Check the console for further details.);
}
});

How can I fix this? Ideally on new page open it should automatically login, if they have previously logged in.

[charsleysa]

Hi @arl

Looks like the Angular QuickStart was updated so things are a little different to what I remember.

From what I can see in the new QuickStart you may be able to modify the code in the AppComponent.

In the ngOnInit function, change the following lines of code:

    if (this.auth.isAuthenticated()) {
      this.auth.renewTokens();
    }

to

    this.auth.renewTokens();

What this will do is always execute your renewTokens() function when the app initializes which in turn calls the checkSession() function in the auth0-js library which checks to see if there is a valid Auth0 session for the user and if so will return you with a new access_token.

You may need to play around with a few different options / order of checks and operations depending on your needs.

Hope this helps!