How to redirect users to landing page, as soon as session has expired?

Get Help
,
1

Hello! Sorry if this question was answered. I really couldn’t find the same scenario (but probably is around there).

Context: I’m using https://www.npmjs.com/package/@auth0/nextjs-auth0.

I have this scenario:

My user login, and they see a chat where they chat with an assistant. They chat for a while and then they leave the computer for 5 days, and they come back and the browser tab is still there in the chat.
They don’t know, but the session has expired (After 72 hours) (Applications > API > Auth0 Management API > Settings > Access Token Expiration).
They will send another chat to the assistant, but the backend is going to return with an error because the session has expired (basically this is going to return no session: auth0.getSession(req)).

That’s a really bad UX.

How can I auto-redirect the user to the landing page after those 72 hours of inactivity? How can I know exactly when the token is going to expire and the user has to login again?

I’m using this code in the NextJS backend:

import { Auth0Client } from '@auth0/nextjs-auth0/server';

const auth0 = new Auth0Client({});

const session = await auth0.getSession(req);

if (!session || !session.user) {
 res.status(401).json({
    status: 'error',
    knownError: KNOWN_ERRORS.SESSION_EXPIRED,
    message: 'Session expired.',
  });

  return null;
}

But, as I told you, this code is going to be executed on the backend, on the API call. I want to avoid the user seeing this “Session expired” message.

Question: What should I add on the frontend to auto-redirect the user to the landing page? or maybe just showing a pop-up with some information about this, like: “your session expired”. How/Where can I get the info to know exactly when the token is going to expire?

Thanks!

3

Hi @brodanoel,

Welcome to the Auth0 Community!

You can redirect the users when using the NextJS SDK from the middleware using a code snippet described in our nextjs-auth0 /EXAMPLES.md github page such as this:

const session = await auth0.getSession(request);


  if (!session) {
    // user is not authenticated, redirect to login page
    return NextResponse.redirect(
      new URL("/auth/login", request.nextUrl.origin)
    );
  }

It is not recommended to expose the access token on the frontend, but another method would be decoding it in your backend, and based on the exp claim you can determine when the access token is close to expire. You can check out this community post or this one, then pass this information to your frontend.

I hope this helps, and if you have further questions please let me know!
Best regards,
Remus

4

The middleware option won’t be a fix, because that would imply that the user made some fetch to the backend. That means it’s already late (please read my post in order to understand why).

I want the frontend to realize when the token has expired even if the user is far away from the computer, so when he come back, the next action is not an invalid action.
Imagine writing a 3 hours text and then the next call (to save it) the middleware just redirect you to the login and you lose everything.

Seems like the option would be something related to expose the expiration date and redirect the user as soon as it happens, or showing a modal when it happens (or is about to happen), but still not clear how/when to get that expiration date.