How do I prevent automatic redirect on session expiration

Help
,
1

When the session expires I would like to show a pop-up to the user before the redirect happens. How can I achieve this?

My front end is react, and I am using the @auth0/auth0-react package (v1.9.0).

Any leads would be beneficial.

Thank you

3

Hi @jilna.nt,

Welcome to the Auth0 Community!

Have you seen this thread? Check session without extending it - #5 by stephanie.chamblee

4

Hi @dan.woda

I tried that approach. Automatic redirect still happens.

try {
    token = await getAccessTokenSilently();
} catch (e: any) {
   if (e.error === "login_required") {
      // I want to add logic here to show the pop-up. After 5 seconds do logout();
   }
}

But what is currently happening is, that my logic is executed but auth0 also performs a logout(); So my pop-up is shown after the redirect and then my logout(); is being called. So for the user, the redirect is happening twice.

5

Dan,

I work with Jilna and we’ve been trying to debug this issue. Our client application is written in ReactJS and is using the React Auth0 package that is version 1.9.0. This package relies on the Auth0-SPA js version 1.19.3. We’re not directly using the spa js code as in the example you linked.

We believe there is an issue with how getAccessTokenSilently is working. When we use this to attempt to catch the error the app will still redirect even though the catch is specified. Is there a configuration value that may be specified through the configuration in React that is creating this behavior that may not be specified under normal circumstances with the basic spa-js configuration?

Here’s a more detailed look at our code. Please note the comments I’ve included to indicate our train of thought:

if (isAuthenticated) {
	// The user originally authenticated via the IdP so we have an identity token; get the access token.
	try {
		if (!!scope) {
			// A different scope than the default scope was requested for this access token.
			token = await getAccessTokenWithPopup({
				scope,
			});
		} else {
			token = await getAccessTokenSilently();
		}
	} catch (error: any) {
		console.log(`Threw error while fetching the token silently in use Request with error `, JSON.stringify(error));

		if (error.error === "login_required") {
			// Realized that the user is now not authenticated.
			// Show message...
			// Oh no! It redirects anyhow...
			// Appears that logout() is called
		} else {
			// Bad things happened...
			throw error;
		}
	}
}

We’re using this inside of an Axios interceptor for our requests to our service layer.