oidc-client-js consistently redirects users to the login page

I've been immersed in a project that involves integrating OIDC authentication into a react SPA using authorization code with PKCE. I'm utilizing the oidc-client-js library for this purpose. The issue I'm facing is that, post-authentication, I keep getting redirected back to the login pattern. Even though my code seems to be correct, there might be an asynchronous problem causing this loop. Any assistance you can offer would be greatly appreciated. Can you please help me out?

Thank you in advance.

My Configuration:

const userManager = new UserManager({
authority: identityProvider,
client_id: window.REACT_APP_CLIENT_ID,
response_type: 'code',
redirect_uri: 'http://localhost:3000/auth-callback',
scope: 'openid',
loadUserInfo: false,
revokeAccessTokenOnSignout: true,
filterProtocolClaims: true,
monitorSession: true,
metadata: {
    issuer: identityProvider,
    jwks_uri: `${identityProvider}/pf/JWKS`,
    // more configurations follow...
}

)

And so on...

javascriptopenid-connect

Answer №1

To ensure better control over the timing of when signInRedirect is executed, it is important to consider the return value of userManager.getUser. One suggested approach would be:

  • Display the current logged in state (true or false) on the screen when the page first loads
  • Implement a temporary login button to manually trigger sign in redirects instead of automatically doing so in useEffect

Once this method is proven to be reliable, you can reinstate the automatic redirect on page load. To assist with this process, feel free to refer to my code snippet for comparison - running this sample code should provide further insights.

Answer №2

After verifying the user in the userManager instance, I realized that my authentication process at the hooks level was not thorough enough.

Appreciate your quick and effective assistance.

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

Ajax/PHP - unrecognized value in autofill

I have implemented this particular example to execute an ajax data query from a MySQL database, which returns a table. Currently, this setup functions correctly when text is manually entered into the input form. Example: https://i.sstatic.net/TTgLz.jpg T ...

javascriptphpjquerymysqlajax

Using AngularJS: Implementing asynchronous $http.jsonp request through a service

I am currently developing a straightforward application that involves the following steps: 1. The user provides 2 parameters and clicks a button 2. Angular communicates with an external JAVA Servlet that sends back JSON data 3. The application displays the ...

javascriptajaxasynchronousangularjs

If you want to retrieve the calculated value of a div using jQuery

I have a scenario where I have 3 list items (li) under an unordered list (ul). I am interested in finding the height of these list items, but without explicitly defining their height. So far, when inspecting with Firebug, I noticed that the computed height ...

javascriptjqueryhtmlheight

I am having trouble with my React tutorial for tic tac toe as the handleClick function is not receiving the

Currently, I am working my way through the React tutorial available at: https://react.dev/learn/tutorial-tic-tac-toe My current challenge lies in passing a value to the handleClick function to determine which square should be set to 'X'. Despi ...

javascriptreactjs

Using Angular 4 constructor value in a condition with *ngIf

Within this TypeScript snippet, there is a variable called moreinfo that is initially set to 1. In the constructor, however, the value of moreinfo is changed to 2. Subsequently, based on whether the value is 1 or 2, different div elements are displayed usi ...

javascripthtmlangulartypescript

What methods can be used to test included content in Angular?

When testing an Angular component that includes transclusion slots utilizing <ng-content>, it becomes challenging to verify if the transcluded content is correctly placed within the component. For instance: // base-button.component.ts @Component({ ...

javascriptangularunit-testingtesting

Toggle the visibility of a table column based on user selection in Vue.js

I am having issues with displaying and hiding based on checkbox click events. Can anyone assist in identifying the mistake? When clicking on an ID, it should hide the ID column. Similarly, clicking on "first" should show/hide based on checkbox clicks, and ...

javascriptvue.jsvuejs3vuex

Client is currently experiencing difficulties receiving text content from the server

When working on a CRUD operation involving Indian language messages, I encountered an issue. While I was able to successfully create and save the message, upon attempting to read it back, all I received was "???". It seems like there is some sort of encodi ...

javascriptjavajqueryfrontendserver-side

Update JavaScript variable value when there is a change in the onchange

Greetings, thank you for taking the time to read this. I am currently working with an input that includes a datepicker calendar. This calendar has variables called minDays and MaxDays which allow users to select a specific number of days. In my HTML form, ...

javascriptphphtmlajaxonchange

Converting unprocessed data into an array or JSON format using JavaScript

Any help with this would be greatly appreciated. My goal is to store the raw data into an array starting from BEGIN:VEVENT to END:VEVENT Raw Data BEGIN : VEVENT\r\nDTSTART; TZID = America / New_York : 20161231 T123000\r\nDTEND; TZID = ...

javascriptarraysjsonnode.js

Angular's expression is incapable of determining the variable's type through the use of the constructor property

I attempted to use an angular expression to determine if a scope variable is an array. However, when using variable.constructor === Array for the check, the result always showed as false. It was only when I used a scope function with return variable.const ...

javascriptangularjs

Using SCSS for Dynamic Class Names with Pseudo Elements ::before and ::after

I am having trouble implementing dynamic classes on my website. My goal is to change the colors of ::before and ::after based on the class assigned to the parent 'picture' class. In the SCSS code snippet below, I have marked the lines that need ...

javascripthtmlangularsass

What is the best way to use JavaScript to conceal a section of a form div?

After receiving some code from a certain platform and implementing it to hide part of my form div element, I noticed that the element hides and unhides quickly when running in a browser. This rapid hiding and showing behavior occurs when clicking on the bu ...

javascriptjqueryhtmlcss

Fluid carousel and dynamic loading

Currently, I am experiencing an issue with the Liquid Slider while using ajax, specifically related to height. Below is the script I am using: var api2 = $.data( $('#slider-7')[0], 'liquidSlider'); $.ajax({ complete: function( ...

javascriptjqueryajax

WebSocket communication solely targeted towards the individual who initiated the group

Hi there, I'm currently working on creating a webrtc chat using socket.io. My goal is to broadcast all the other clients' streams to only the user who initiated the group chat. However, at the moment, all the other clients can receive the stream ...

javascriptnode.jsreactjssockets

Setting up a function in React to utilize an image stored in state

I have a function in my react component for image classification that retrieves the image from the img tag using document.getElementById: const img = document.getElementById('animal_image');. The image uploaded via the file input updates the sta ...

javascriptreactjstensorflow2.0filereader

Ways to have a Typescript generic inherit from a specific type

I'm facing an issue related to a component I have. const MyComponent = <T, extends { optionalProperty?: MyType }> When I try to call <MyComponent<SomeGeneric>>, I get this error message: Type 'SomeGeneric' has no properti ...

javascriptreactjstypescripttypes

Displaying a notification in React when the array of objects is empty

I need to create a notification based on whether my object contains any data or not. Initially, I store the data in a state called "data" and set it to null. When I receive data from the server, I update the data state with the returned data. If the data ...

javascriptreactjs

There is no prompt to grant permission for the Android app to access the camera

I'm currently working on an app using vue-js and cordova that involves the phone's camera for taking pictures. However, I am facing challenges in asking the user to grant permission for my app to access the camera. Despite trying the cordova-plu ...

javascriptandroidcordovavue.js

Tips for hiding a div element until its visibility is toggled:- Set the display property of

Looking for some guidance on this jQuery code I'm working with to create a toggle menu. The goal is to have the menu hidden when the page loads, and then revealed when a button is clicked. However, currently the menu starts off being visible instead o ...

javascriptjqueryhtml