I have an issue with refreshing tokens with Next'js & Nest.js. I have followed guide for Sessions wi...

kuba_huba

02/21/2024, 5:08 PM

I have an issue with refreshing tokens with Next'js & Nest.js. I have followed guide for Sessions with Server Components: https://supertokens.com/docs/thirdparty/nextjs/app-directory/protecting-route#sessions-with-server-components--pre Everything works fine until the access token expires and new one has to be issued. Then at this moment I receive an error that prevents anything from rendering.

Copy code

Warning: Functions are not valid as a React child

Refreshing the page afterwards with a valid access token doesn't cause issue. This stacktrace also mentions

SessionAuth

component, which makes me suspect that it's problem with the SuperTokens itself. Let me write this step by step what happens: 1. Refresh token epxires. 2. Browser sends two requests to:

/auth/session/refresh

and then

/auth/session/verify

(but not always). Response status codes are

3. While these requests happen, nothing is being rendered. These requests set the cookies accordingly. Error pasted below. 4. Refreshing site once again makes everyghing "just appear" and application behaves as desired. I have tried lowering the time

ACCESS_TOKEN_VALIDITY

environment variable to a few seconds to make sure that it's the invalid access token that causes trouble.

kuba_huba

02/21/2024, 5:09 PM

error

rp_st

02/21/2024, 5:10 PM

when the access token expires, you send the

<TryRefreshComponent />

component to the frontend as shown in the docs?

kuba_huba

02/21/2024, 5:14 PM

I do, but I've been doing slight refactoring, and I think I've spotted something. Give me a few minutes, I need to check it

kuba_huba

02/21/2024, 5:31 PM

My bad. Turns out that I've been returning components as is, without JSX.

Copy code

diff
export async function handleInvalidSession(hasInvalidClaims: boolean) {
  /**
   * `hasInvalidClaims` indicates that session claims did not pass validation. For example if email
   * verification is required but the user's email has not been verified.
   */
  if (hasInvalidClaims) {
    /**
     * This will make sure that the user is redirected based on their session claims. For example they
     * will be redirected to the email verification screen if needed.
     *
     * We pass in no children in this case to prevent hydration issues and still be able to redirect the
     * user.
     */
-    return RequiresAuth;
+    return <RequiresAuth />;
  } else {
    /**
     * This means that the session does not exist but we have session tokens for the user. In this case
     * the `TryRefreshComponent` will try to refresh the session.
     */
-    return TryRefreshComponent;
+    return <TryRefreshComponent />;
  }
}

kuba_huba

02/21/2024, 5:32 PM

The moment you said component a lightbulb popped above my head. Thanks @rp_st !

32 Views

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).