@urql/exchange-auth is incompatible with NextJs 15 when using cookies

[linucks]

Describe the bug

I'm combining the code from the next-js example and the with-refresh-auth example using NextJS 15.

NextJs makes all actions on cookies asynchronous and also makes it impossible to manage cookies outiside of a route handler or server action. This means that the functions in authExchange can no longer handle cookie functionality, namely:

• It's not possible to resync cookies in willAuthError as it's not an async function.
• It's not possible to set a cookie in willAuthError as it's not in a route handler or server action.
• Cleaning up by redirecting to a logout page from refreshAuth fails (although I'm not clear why).

I'm pasting in my example code from authExchange, where there are comments labelled "ISSUE" that show where the problem occurs:

const authExc = authExchange(async (utilities) => {
  let token = await getToken();
  let refreshToken = await getRefreshToken();

  return {
    addAuthToOperation(operation) {
      console.log("addAuthToOperation ", authValid(token));
      return authValid(token)
        ? utilities.appendHeaders(operation, {
            Authorization: `Bearer ${token}`,
          })
        : operation;
    },
    didAuthError(error) {
      console.log("didAuthError");
      return error.graphQLErrors.some(
        (e) => e.extensions?.code === "UNAUTHORIZED"
      );
    },
    willAuthError(operation) {
      console.log("willAuthError");
      // Sync tokens on every operation.
      // ISSUE: How to do this as not async function?
      // token = await getAuthToken(isAdmin);
      // refreshToken = await getRefreshToken(isAdmin);

      return true; // force auth error to trigger refreshAuth
      if (!token) {
        // Detect our login mutation and let this operation through:
        return (
          operation.kind !== "mutation" ||
          // Here we find any mutation definition with the "signin" field
          !operation.query.definitions.some((definition) => {
            return (
              definition.kind === "OperationDefinition" &&
              definition.selectionSet.selections.some((node) => {
                // The field name is just an example, since register may also be an exception
                return node.kind === "Field" && node.name.value === "signin";
              })
            );
          })
        );
      }
      return false;
    },
    async refreshAuth() {
      if (refreshValid(refreshToken)) {
        console.log("refreshAuth refreshing token");
        const result = await utilities.mutate(REFRESH_TOKEN_MUTATION, {
          refreshToken,
        });
        if (result.data?.refreshCredentials) {
          token = result.data.refreshCredentials.token;
          refreshToken = result.data.refreshCredentials.refreshToken;
          // ISSUE: This fails with:
          // Error: Cookies can only be modified in a Server Action or Route Handler.
          await saveAuthData({ token, refreshToken });
          return;
        }
      }
      console.log("Failed to refresh token - logging out");
      // Refresh has gone wrong so we need to cleanup and logout by redirecting to the logout page
      // ISSUE: his fails with: NEXT_REDIRECT;replace;/logout;307;
      redirect("/logout");
    },
  };
});

Reproduction

https://github.com/linucks/urql-authexchange-nextjs

Urql version

urql v5.1.0
urql/exchange-auth v2.2.0
urql/next v1.1.3"

Validations

• I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
• Read the docs.
• Follow our Code of Conduct

[JoviDeCroock]

This seems more like a next.js usage issue rather than an urql one. We want to keep willAuthError synchronous as it intends to be a synchronous pre-cursor to an operation.

You could however create your exchange inside of a component that leverages a mutable ref to track your token. I do see that as a more holistic solution as you'd want synchronous access to this anyway in different parts of your application to be strict on when and what to render.

The fact that a redirect does not work can probably be similarly solved, where this component where you create your auth boundary imports whatever routing hook next uses and leverage that in the exchange.

[linucks]

Thanks for the response @JoviDeCroock. Do you have an example as I'm not entirely sure what you mean? I think I could envisage something like that in a client component, but not in a server one, and that's where the issue is.

[JoviDeCroock]

I don't really use server components, I could find the redirect docs page https://nextjs.org/docs/app/api-reference/functions/redirect and using authDidError could cover you there

[linucks]

Do you mean didAuthError? I tried to redirect there and got the same 'NEXT_REDIRECT;replace;/logout;307;' error.

Even if that worked, it wouldn't address the issue with refreshing the authentication token, which needs to happen in refreshAuth.

With NextJS pretty much everything is a server component now, as even client components get an initial render on the server. If URQL is going to support NextJS going forward, then I think that this needs addressing - even if that's only with an example in the repostiory that covers how to deal with cookies and authentication.