Setting the token for all requests

[rumfiske]

We use NextAuth with Cognito as a provider. When the user's token gets refreshed, the OpenAPI token doesn't update correctly. So I get "Unauthorized" error. Even when the token indeed did get refreshed.

This will return undefined until I refresh the page a couple of times.

useEffect(() => {
    OpenAPI.TOKEN = session?.access_token as string;
  }, [session]);

I also update the token when the user sign in, or when a token is refreshed in [...nextauth]/route.ts

 callbacks: {
  async jwt({ token, account }: any) {
    if (account) {
      // Save the access token and refresh token in the JWT on initial login
      return {
        access_token: account.access_token,
        expires_at: account.expires_at,
        refresh_token: account.refresh_token,
      };
    } else if (Date.now() < token.expires_at * 1000) {
      // If the access token has not expired yet, return it
      console.log("not expired");
      return token;
    } else {
      console.log("expired, refreshing...");
      try {
        // token expired
        const response = await fetch(process.env.COGNITO_TOKEN_URL ?? "", {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: new URLSearchParams({
            client_id: process.env.COGNITO_CLIENT_ID ?? "",
            grant_type: "refresh_token",

            refresh_token: token.refresh_token,
          }),
          method: "POST",
          cache: "no-cache",
        });

        const tokens: CognitoTokenSet = await response.json();

        if (!response.ok) throw tokens;
        OpenAPI.TOKEN = tokens.access_token as string;
        return {
          ...token, // Keep the previous token properties
          access_token: tokens.access_token,
          expires_at: Math.floor(Date.now() / 1000 + tokens.expires_in),
          // Fall back to old refresh token, but note that
          // many providers may only allow using a refresh token once.
          refresh_token: token.refresh_token,
        };
      } catch (error) {
        console.error("Error refreshing access token", error);
        // The error property will be used client-side to handle the refresh token error
        return {
          ...token,
          error: "RefreshAccessTokenError" as const,
        };
      }
    }
  },
  
  ```

[mrlubos]

@rumfiske Is this a regression? Would you be able to create a StackBlitz example to recreate?

[rumfiske]

As I can see here on initial load, it's undefined. (Line 13)

[mrlubos]

Can you await the UI until the token gets set? This sounds like an implementation issue, not necessarily a bug with the package

[rumfiske]

In Next.js, most code is server-rendered. Is the token stored in a "client-only" place. I think this might be the cause of the issue. It's called RSC (React-Server-Components)

[mrlubos]

I'd need to see a running example to help fix this, there's nothing setting the token in the snippet above. Print out the API call and token setter and you should see that API gets called first

[mstosio]

This might be related to the issue that I created :) ferdikoomen/openapi-typescript-codegen#2133