Angular isAuthenticated state is lost on refresh

Hi there,

I have been working on developing an Angular front end to communicate with a .net 6 API. I have chosen Auth0 for my authentication framework. I have followed the Angular quickstart to get up and running with my application and it seems to be working really well. I was doing some testing recently though and found that when I refresh my browser (Chrome) I lose authentication. I can hit the “login” button that I’ve built on my front end, which is supposed to redirect me to Auth0’s login window, however it appears that the page simply refreshes after sending a code to Auth0’s authorize endpoint and I’m still logged out after the redirection is complete.

Occasionally if I navigate from a protected route (one that requires authentication) back to the root of my application, I will suddenly regain authenticated status.

I have researched a few articles and according to what I’ve read, I need to implement Refresh token rotation in order to solve this issue. I believe I’ve done so correctly however I still appear to be encountering the issue. Any help here is greatly appreciated.

Example of my Auth0 implementation from app.module.ts:

Example of my Auth0 management dashboard (specifically refresh token rotation section):

  • Which SDK this is regarding: auth0-angular
  • SDK Version: 1.8.2
  • Platform Version: Angular 13
  • Code Snippets/Error Messages/Supporting Details/Screenshots:

Hi @austin-bmn,

Welcome to the Auth0 Community!

Are you setting useRefreshTokens to true? I see you are passing an env variable, but please confirm.

Otherwise, can you please tell us if you are successfully returned a refresh token after login?

Hi @dan.woda , thanks for the warm welcome.

Yes I’m setting useRefreshTokens to true, and it is persisting to my deployed environment. I have verified this through debugging the value.

How can I check if I am receiving the refresh token properly? I’m checking my local storage in my dev tools after logging in and I don’t see anything there.

Please let me know. Thanks,

Austin

@austin-bmn,

You can also inspect the request and response via DevTools Network tab. You can look at the response from the /token endpoint.

If you are having trouble, feel free to DM me a HAR file and I will take a look.

Thanks for the assistance Dan.

I’ve DM’d you the HAR file, and included a summary of the response here as well in case this is useful:

/token request: request to /oauth/token endpoint with Auth0-client and content type headers.

/token response: Valid access token in JWT format, along with scope, expiry and bearer token type.

Thanks for sending that over! It looks like you are successfully returned a refresh token. :+1:

Can you give us some more information about your application? Did you follow the Auth0 Angular SDK Quickstarts: Login to set up your implementation? Otherwise can you please share some code snippets?

Additionally, it might be helpful to have a screencast of the behavior you are describing. Feel free to DM it if it contains any sensitive info or for privacy.

Hi Dan,

I followed the Auth0 Angular SDK quickstart to set my app up. I’ll send some code snippets and a screencast of the behavior over DM.

1 Like

Dan examined my app.module.ts file closely and discovered that there were essentially two declarations for the auth configuration in my AuthModule declaration. Removing the unnecessary declaration fixed the issue.

Thanks again @dan.woda !

2 Likes

Thanks for updating with a solution!