isAuthenticated fails on login, works on refresh

Help
21

@dan-auth0 Sorry for the slow reply. That was exactly the problem. I actually submitted a PR to update the quickstart instructions and forgot to come back here to update the thread. Apologies. Here is the PR for your info. It has been merged. Update 01-login.md by dhawkings · Pull Request #9405 · auth0/docs · GitHub

2 Likes
22

Thanks for doing that @dhawkings!

2 Likes
23

Glad to hear that fixed the issue, Dhawkings! The same solution would apply to Angular using the new Angular SDK :slight_smile:

1 Like
24

Hey guys, I’m having the same problem using the new Angular SDK (auth0/auth0-angular) only when I add extra scopes in my loginWithRedirect().

loginWithRedirect() {
this.auth.loginWithRedirect(({
scope: ‘openid profile email read:sponsors create:sponsor read:programs delete:sponsor-program-enrolment’,
}))

isAuthenticated$ return false after the user successfully logs in but if I refresh the page it’s true.

If I simply call loginWithRedirect() without the extra scopes isAuthenticated$ returns true straightway.

I tested it using isLoading and the same problem happens.

Could someone help please :grinning:?

1 Like
25

Howdy, Eduardo, could you please provide us with a sandbox app that showcases this based on the architecture of your app, please? We just need to see how you are using the Auth0 Angular SDK, please. You can create one using Stackblitz or CodeSandbox. Do not include your Auth0 configuration variables. Alternatively, you can also create a GitHub repo with the sample app – we can run it on a sandbox. Thank you!

26

Hey, @dan-auth0 thanks for your reply. I’m pretty much doing exactly like Auth0 Angular SDK Quickstarts: Login the angular quickstart, that’s pretty much the architecture my app is following, the only difference is I was passing the custom scopes in the loginWithRedirect() method and it was causing a delay I don’t know why. And also I included these scopes in httpInterceptor tokenOptions.

But I think I found a solution yesterday:

I don’t know why but if I set my scopes in the authentication module initialization and don’t pass it in the loginWithRedirect() the delay does not occur and my isAuthenticated$ returns true straightway after the login.

Solution:

app.module.ts

AuthModule.forRoot({
  ...environment.auth,
  httpInterceptor: {
    ...environment.httpInterceptor,
  },
})

environment.ts
Before I was not setting my scopes in the auth section.

export const environment = {
production: false,
apiUrl: apiUrl,
appUrl: appUrl,
auth: {
domain: “mydomain-dev.au.auth0.com”,
clientId: “myclientId”,
audience: “myaudience”,
redirectUri: ${appUrl},
scope: ‘read:sponsors create:sponsor read:programs delete:sponsor-program-enrolment’
},
httpInterceptor: {
allowedList: [
{
uri: ${apiUrl}/*,
tokenOptions: {
// The attached token should target this audience
audience: ‘myaudience’,
// The attached token should have these scopes
scope: ‘read:sponsors create:sponsor read:programs delete:sponsor-program-enrolment’
}
}
]
}
};

app.component.ts
I’m not setting the scopes in the loginWithRedirect() method anymore.

loginWithRedirect() {
this.auth.loginWithRedirect();
}

This solution worked for me and no more delay with isAuthenticated$.

2 Likes
27

Glad to hear you found a solution, Eduardo. Would you like to file a bug report here for our engineers to research this, please?

1 Like
28

Hi @dan-auth0

I am facing the exact same issue with the Angular SDK. Has there been any solution or a bug fix?

I am exactly following this guide, but I’m unfortunately always getting false for isAuthenticated$ even after logging in successfully. Here are snippets of my code:

app.component.html:

 <div id="app" class="d-flex flex-column h-100">
  <div *ngIf="authService.isLoading$ | async; else loaded">
    Loading...
  </div>

  <ng-template #loaded>
    <router-outlet></router-outlet>
  </ng-template>
</div>

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
  selector: 'body',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(public authService: AuthService) { }
  ngOnInit() {
  }
}

auth-button.component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-auth-button',
  templateUrl: './auth-button.component.html',
  styles: [],
})
export class AuthButtonComponent implements OnInit {
  constructor(public authService: AuthService) { }

  ngOnInit(): void { }
}

auth-button.component.html:

<app-login-button *ngIf="(authService.isAuthenticated$ | async) === false">
</app-login-button>

<app-logout-button *ngIf="authService.isAuthenticated$ | async">
</app-logout-button>

Am I missing anything?