useMutations inside hooks don't seem to respect auth

[haswalt]

I suspect i'm doing something wrong but i'm having some issues with the auth exchange and setting credentials for mutations.

I'm using firebase auth which allows getting a bearer token using await auth().currentUser.getIdToken(). The flow in my app:

1. user selected login with SSO provider
2. credential returned from SSO provider
3. user authenticated with firebase
4. isAuthenticated updated when user recognised
5. a mutation is fired to send the users id to my own server

In the auth exhcnage i'm using this:

getAuth: async ({authState}) => {
          try {
            const user = auth().currentUser;
            if (user) {
              const idToken = await user.getIdToken();
              return {token: idToken};
            }
          } catch (err) {
            console.error(err);
          }


          auth().signout()

          return null;
        },

Then to add token to an operation:

addAuthToOperation: ({authState, operation}) => {
          if (!authState || !authState.token) {
            return operation;
          }

          const fetchOptions =
            typeof operation.context.fetchOptions === 'function'
              ? operation.context.fetchOptions()
              : operation.context.fetchOptions || {};

          return makeOperation(operation.kind, operation, {
            ...operation.context,
            fetchOptions: {
              ...fetchOptions,
              headers: {
                ...fetchOptions.headers,
                Authorization: `Bearer ${authState.token}`,
              },
            },
          });
        },

The issue is that the mutation I fire off to the server doesn't not apply the bearer token. My mutation is created in a hook to share the work between UI:

export const useAuth = () => {
  const authenticate = async (user, authenticateWithServer) => {
    const {account} = await authenticateWithServer({
      input: user
    });

 // do some other config with returned account
  };

 return {authenticate}
}

This mutation has no token applied. I observe the order of running to be:

• getAuth
• addAuthToOperation

as expected however the auth().currentUser.getIdToken() seems to actualy finish after the addAuthToOperation is fired therefore the token is never added. Subsequent queries seem to have the bearer token added fine in the correct order.

I can observer the currentUser is indeed set in getAuth in all instances, and the token is returned bu AFTER the auth is added to the operation.

The client is only recreated once during authentication (to clear cache) and even when trying with a delay between calling my mutation I still see no token added.

Am I doing something wrong?

Here is some logging that shows to order I was talking about:

 LOG  SSO loginWithGoogle getIdToken
 LOG  CLIENT create true
 LOG  CLIENT getAuth start
 LOG  CLIENT getAuth has user
 LOG  CLIENT getAuth get token
 LOG  SSO loginWithGoogle authenticate
 LOG  CLIENT getAuth got token ... -> TOKEN IS CORRECTLY RETURNED
 LOG  CLIENT addAuthToOperation {} {"token": ...} -> TOKEN IS ADDED TO OTHER OPERATION HERE
AUTH authenticate start -> AFTER DELAY MUTATION IS RUN
 LOG  CLIENT addAuthToOperation {"input": ...} null -> THIS TIME THE TOKEN IS MISSING
 LOG  CLIENT {"error": ...}
 LOG  AUTH logout start
 LOG  AUTH authenticate authenticated
 LOG  AUTH logout reset
 LOG  FIREBASE onAuthStateChanged null
 LOG  CLIENT create false
 LOG  [Function onSSOStateChange] false
 LOG  [Function onSSOStateChange] false
 LOG  CLIENT getAuth start
 LOG  CLIENT getAuth logout
 LOG  AUTH logout start