Troubleshooting in Angular 7: When Auth0 parseHash response is returning null

Having trouble with Auth0.

Upon sign-out and browser refresh, my application is unexpectedly triggering the login event again and encountering user profile issues. The root of the problem seems to lie in the parseHash method within the authentication service:

  this.auth0.parseHash({ hash: window.location.hash }, (err, authResult) => {
  ...
  }

This method is being called by the ngrx effect:

  @Effect()
  init$ = defer(() => {
    const userData = localStorage.getItem("user");

    if (userData != null && userData != 'undefined') {
       let authActionObservable = of(new Login({user: JSON.parse(userData)}));
       this.authService.handleAuthentication();
       return authActionObservable;
    }
    this.authService.handleAuthentication();
  });

After refreshing the page, it seems that parseHash is returning null values for both authResult and err, even though they are populated correctly during the initial login process.

Although I am receiving the tokens upon successful login, the issue persists. I have double-checked all configurations, domains, and settings, and everything appears to be in order. I have also experimented with different values for { hash: window.location.hash }.

angulartypescriptauthenticationauth0

Answer №1

The issue stemmed from the in-memory variables storing tokens in the service being reset upon each page refresh. By re-initializing the values in the service's constructor, I was able to resolve the problem.

Here's an example using localStorage to illustrate my point:

constructor(public router: Router, private store: Store<State>, private http: HttpClient) {
  this._idToken = localStorage.getItem("Auth0IdToken");
  this._accessToken = localStorage.getItem("Auth0AccessToken");
  this._expiresAt = parseInt(localStorage.getItem("Auth0ExpiresAt"));
}

Answer №2

Many times I have observed HAR files being used to pinpoint issues during the logout process. If you're unable to view the HAR files, here are a few suggestions to consider:

  1. Take a look at the Logout Documentation
  2. Refer to this guide on managing Redirects post-logout and assess your logout handling methods.
  3. Ensure that you include the client_id parameter in the logout endpoint and set the Allowed Logout URL at the client level.

While I may not have the full picture, these suggestions provide a solid starting point. Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change a nested for-loop into an Observable that has been transformed using RxJS

Currently, the following function is operational, but I consider it a temporary solution as I'm extracting .value from a BehaviorSubject instead of maintaining it as an observable. Existing Code Snippet get ActiveBikeFilters(): any { const upd ...

javascriptangulartypescriptrxjs

Encountering an error in Angular when trying to add a dynamic component

I have a straightforward test code for implementing dynamic components in Angular 4. @Component({ selector: 'component', template: ` <ul><li #item *ngFor="let number of list">{{number}}</li></ul> <ng-temp ...

javascriptangularangular2-changedetection

Loop through an array of strings

When I receive the data as a string[] https://i.sstatic.net/ttyag.png However, when I attempt to loop over it subUrl(arr) { for(let i of arr) { console.log(i); } } No output is being logged. What could be causing this issue? ...

angulartypescript

Guidelines on dispatching events from Node.js/Express to Angular

I am in the process of a lengthy transaction and I want to keep my client informed about its progress. On the frontend, I am using Angular 4 and on the backend, it's nodeJS/Express. The client triggers the transaction through an HTTP Post request. An ...

node.jsangularexpress

What is the process for linking read-only methods to Redux object instances?

Let's say I have a "user" object stored in redux, with fields for first name and last name (interface User { firstName : string, lastName : string} if using typescript). After retrieving a user from redux, I want to obtain the full name of the user by ...

javascripttypescriptredux

What methods are available for utilizing a runtime variable that TypeScript is unaware of?

I am looking to implement a global variable in TypeScript that will be defined dynamically at runtime. This global variable is necessary for transferring configuration properties from the server-side language to JavaScript. My approach involves using TypeS ...

htmltypescript

Omit functions from category

This question reminds me of another question I came across, but it's not quite the same and I'm still struggling to figure it out. Basically, I need to duplicate a data structure but remove all the methods from it. interface XYZ { x: number; ...

typescript

Unable to locate the specified environment variable in the current nest

Currently, I am referring to the official documentation on the NestJs website that provides a guide on using config files: https://docs.nestjs.com/techniques/configuration Below is the code snippet I am working with: app.module import { Module } from &ap ...

javascripttypescriptenvironment-variablesnestjs

Implementing Angular2 with conditional loading

One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...

javascripthtmlangularsystemjs

Executing a Parent Function from a Child Component in Angular 11

I have successfully passed values between Angular components using Input/Output several times before, but I am currently facing a unique situation for which I cannot find a solution: There are two components involved: home.component (parent component) T ...

angulartypescript

What is the best way to securely store a JWT Token received from Cognito after logging in through the Cognito Hosted UI?

Our current architecture involves front end Angular and backend nodejs/express. This setup functions in the following order: User logs in to the site via Cognito Hosted UI Upon successful login, the user is redirected to our home page with a code sent in ...

node.jsangularjwttokenamazon-cognito

How can I simulate event data while testing a function that is triggered when an event is emitted from another component in Angular integration testing?

Within component A, there is a function responsible for updating the view based on data emitted from component B. The aim is to simply call this function and pass the data without integrating with component B as it would be too complicated for this particu ...

angularjasmineangular-testangular-event-emitter

Activate the Keypress event to update the input value in React upon pressing the Enter

I am facing an issue where I need to reset the value of an input using a method triggered by onPressEnter. Here is the input code: <Input type="text" placeholder="new account" onPressEnter={(event) => this.onCreateAccount(event)}> < ...

javascriptreactjstypescriptantd

Using HTML5 to display the {{data}} extracted from a JSON file right in the center of the text

Can someone help me with a question about working with html and angular5? <span [innerHTML]="'client.acceptance.explanation'| translate"></span> <span><b>{{data}}</b></span> I have text stored in a json file ...

jsonangularhtml

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

cssangularsassmarkdownscullyio

Fixing a compare function problem in Angular 6 mat-select

Being currently engrossed in an angular 6 project, I find myself grappling with a mat-select element that necessitates the use of the compareWith function due to my selection of objects. Curiously enough, even when I refrain from selecting any option, it ...

angularangular-material

The console is displaying an undefined error for _co.photo, but the code is functioning properly without any issues

I am facing an issue with an Angular component. When I create my component with a selector, it functions as expected: it executes the httpget and renders a photo with a title. However, I am receiving two errors in the console: ERROR TypeError: "_co.photo ...

javascriptangulartypescripthttpfrontend

What is the best way to divide text into key-value pairs using JavaScript?

I have data in text format from my Raspberry Pi that I need to insert into MongoDB as key-pair values or JSON for my Node.js Application. I'm relatively new to JavaScript and I'm looking for a solution. Any suggestions would be greatly appreciate ...

javascriptnode.jstypescriptmongodb

What is the best way to transfer a variable from an @Input property to a service within an Angular2 component?

I'm tackling what seems like a simple task, but I'm struggling to figure it out. My issue is this: How can I successfully pass a variable from @Input to a service in an Angular2 component? (Code has been simplified) This is my current component ...

javascriptangulartypescript

Having trouble with ngx-slick-carousel? Need help with managing the next and prev buttons?

I'm facing an issue where the next and prev buttons are not visible on my carousel component, even though they seem to be working properly. When I inspect the elements, I can see that the buttons are there. How can I make them visible? Here is my cod ...

angularimage-slider