@urql/exchange-auth v3.0.0 causes false api suspended warning?

[GollyJer]

First... is it weird that exchange-auth has a 3.0.0 release on npm but there's no history of it in github releases?

Back to the question...
After rolling back @urql/exchange-auth from v3.0.0 to v2.2.1, authentication works correctly.

With v3.0.0:

LOG  Urql Creating new Urql client instance (Auth Bypass: false)
LOG  Urql Auth Exchange will be added.
LOG  Urql Getting auth token
LOG  Urql Error getting auth token: Error: [auth/-] An internal error has occurred. 
[ Permission denied:Consumer 'api_key:<KEY>' has been suspended. ]

It's clearly not a suspended api key because rolling back to v2 works as expected with the same key.
Here's our clent code so you can see how we're doing the auth. But, the error is thrown by the last catch in getAuthToken which makes it seem like a firebase issue. Why would the version of exchange-auth influence firebase token acquisition?

Thanks for any insights!

import {
  DEV_GRAPHQL_ENDPOINT,
  PROD_GRAPHQL_ENDPOINT,
  SECRETS_ENV,
  STAGING_GRAPHQL_ENDPOINT,
} from '@env';

import { useEffect } from 'react';

import { getAuth, getIdTokenResult } from '@react-native-firebase/auth';
import { authExchange } from '@urql/exchange-auth';
import { jwtDecode } from 'jwt-decode';
import useAsync from 'react-use/lib/useAsync';
import { Client, Exchange, fetchExchange } from 'urql';

import { firebase$ } from '~/src/shared-state';

// --- Configuration Flags ---
const LOG = true;
const BYPASS_AUTH_IN_DEV = false;
export const BYPASS_AUTH = __DEV__ && BYPASS_AUTH_IN_DEV;
// -------------------------

export const urqlLog = (message: string): void => {
  if (LOG) {
    // eslint-disable-next-line no-console
    console.log(`\u001B[38;5;14mUrql\u001B[0m ${message}`);
  }
};

const endpoint = {
  DEV: DEV_GRAPHQL_ENDPOINT,
  STAGING: STAGING_GRAPHQL_ENDPOINT,
  PROD: PROD_GRAPHQL_ENDPOINT,
};

export const graphqlEndpoint = endpoint[SECRETS_ENV];
urqlLog(`Connected to endpoint: ${graphqlEndpoint}`);
urqlLog(`Authentication Bypass: ${BYPASS_AUTH}`);

const MAX_RETRIES = 10;
const RETRY_INTERVAL = 500;

const getAuthToken = async () => {
  urqlLog('Getting auth token');

  try {
    const auth = getAuth();
    const { currentUser } = auth;
    if (!currentUser) {
      urqlLog('No current user found');
      return { token: undefined, tokenExpirationTime: undefined };
    }
    let tokenResult = await getIdTokenResult(currentUser, true);

    let retries = MAX_RETRIES;
    while (!tokenResult.claims['https://hasura.io/jwt/claims'] && retries > 0) {
      urqlLog(`Retrying token fetch... (${MAX_RETRIES - retries + 1})`);
      // eslint-disable-next-line no-await-in-loop
      await new Promise((resolve) => {
        setTimeout(resolve, RETRY_INTERVAL);
      });
      // eslint-disable-next-line no-await-in-loop
      tokenResult = await getIdTokenResult(currentUser, true);
      retries -= 1;
    }

    if (!tokenResult.claims['https://hasura.io/jwt/claims']) {
      throw new Error('https://hasura.io/jwt/claims not found in the token after retries');
    }

    urqlLog('Successfully retrieved auth token');
    return {
      token: tokenResult.token,
      tokenExpirationTime: new Date(tokenResult.expirationTime).getTime(),
    };
  } catch (error) {
    urqlLog(`\u001B[38;5;196mError\u001B[0m getting auth token: ${error}`);
    return { token: undefined, tokenExpirationTime: undefined };
  }
};

// Singleton instance for the urql client
let clientInstance: Client | undefined;

// Function to initialize the urql client (now uses BYPASS_AUTH)
export const createUrqlClient = async (): Promise<Client> => {
  // Check if the instance already exists
  if (clientInstance) {
    urqlLog(`Returning existing Urql client instance (Auth Bypass: ${BYPASS_AUTH})`);
    return clientInstance;
  }

  urqlLog(`Creating new Urql client instance (Auth Bypass: ${BYPASS_AUTH})`);

  let token: string | undefined;
  let tokenExpirationTime: number | undefined;
  const exchanges: Exchange[] = [];

  if (__DEV__ && BYPASS_AUTH) {
    urqlLog('Auth exchange skipped due to BYPASS_AUTH flag.');
  } else {
    urqlLog('Auth Exchange will be added.');
    ({ token, tokenExpirationTime } = await getAuthToken());

    exchanges.push(
      authExchange(async (utils) => {
        let currentToken = token;
        let currentTokenExpirationTime = tokenExpirationTime;

        return {
          addAuthToOperation(operation) {
            if (!currentToken) {
              urqlLog('addAuthToOperation - token not found (auth enabled)');
              return operation;
            }

            const operationWithAuth = utils.appendHeaders(operation, {
              Authorization: `Bearer ${currentToken}`,
            });

            try {
              // @ts-expect-error Property 'name' does not exist on type 'string'. Maybe? 🤷‍♀️ It works though!
              const queryName = operation.query.definitions?.[0]?.name?.value ?? 'UnnamedQuery';
              const decodedToken = jwtDecode(currentToken);
              const firebaseId = decodedToken['https://hasura.io/jwt/claims']?.[
                'x-hasura-user-id'
              ]?.replaceAll('"', '');

              urqlLog(`Running ${queryName} as user: ${firebaseId ?? 'Unknown User'}`);
            } catch (error) {
              urqlLog(`\u001B[38;5;196mError decoding token:\u001B[0m ${error}`);
            }

            return operationWithAuth;
          },

          willAuthError() {
            const isTokenMissing = currentToken === undefined;
            const isTokenExpired =
              !!currentTokenExpirationTime && Date.now() >= currentTokenExpirationTime;

            let refreshToken = false;
            if (firebase$.didIdChange.peek()) {
              refreshToken = true;
              firebase$.didIdChange.set(false);
            }

            if (isTokenMissing) urqlLog('willAuthError - token missing (auth enabled)');
            if (isTokenExpired) urqlLog('willAuthError - token expired (auth enabled)');
            if (refreshToken)
              urqlLog('willAuthError - firebase id didChange - refreshToken (auth enabled)');

            // Only consider auth errors if auth is actually enabled
            return isTokenMissing || isTokenExpired || refreshToken;
          },

          didAuthError(error, _operation) {
            urqlLog(`didAuthError (auth enabled): ${JSON.stringify(error, undefined, 2)}`);
            const foundAuthError = error.graphQLErrors.some(
              (e) =>
                e.extensions?.code === 'unauthenticated' ||
                e.extensions?.code === 'forbidden' ||
                e.extensions?.code === 'invalid-token' ||
                e.extensions?.code === 'jwt-invalid-claims' ||
                e.message?.includes('Unauthorized') ||
                e.message?.includes('Forbidden'),
            );
            urqlLog(
              `\u001B[31mAuth Error (auth enabled):\u001B[0m ${foundAuthError}, ${JSON.stringify(error.graphQLErrors, undefined, 2)}`,
            );
            return foundAuthError;
          },

          async refreshAuth() {
            urqlLog('Refreshing auth token (auth enabled)');
            const { token: newToken, tokenExpirationTime: newExpirationTime } =
              await getAuthToken();
            currentToken = newToken;
            currentTokenExpirationTime = newExpirationTime;
            token = newToken; // Update outer scope token as well
            tokenExpirationTime = newExpirationTime; // Update outer scope expiration as well
          },
        };
      }),
    );
  }

  exchanges.push(fetchExchange);

  const newClient = new Client({
    url: graphqlEndpoint,
    requestPolicy: 'network-only',
    fetchOptions: {
      headers: {
        'content-type': 'application/json',
      },
    },
    exchanges,
    preferGetMethod: false,
  });

  // Store the newly created client in the singleton variable
  clientInstance = newClient;

  urqlLog('Urql client instance created and stored.');
  return newClient;
};

export const useUrqlClientAsync = () => {
  const urql = useAsync(async () => createUrqlClient(), []);

  useEffect(() => {
    if (urql.error) {
      urqlLog(`\u001B[38;5;196mError in useUrqlClientAsync:\u001B[0m ${urql.error}`);
    }
  }, [urql.error]);

  return {
    isLoading: urql.loading,
    value: urql.value,
  };
};

[JoviDeCroock]

The only change in v3 is it requiring urql core v6 which you can see in the changelog

[GollyJer]

Yeah, it really doesn't make sense but is completely reproducable.
I was hoping maybe you would have a random idea.

My next step will be to generate a new firebase key and update to v3 and see what happens. I am hoping that isn't the issue because I really don't want to have to do it in Prod. 😀

Thanks for your feedback and the work on Urql. 🙏