Help needed on how to implement auth with Hasura + React + Firebase after following Hasura article

[vaibhavverma9]

I've spending the last few days reading this article trying to implement authorization and authentication with Hasura + React + Firebase, but I keep running into the following issue:

[Error: cannot start as connection_init failed with: claims key: 'https://hasura.io/jwt/claims' not found

This is particularly strange because my Firebase function has https://hasura.io/jwt/claims as a key.

I even tried implementing an alternative implementation written here: https://medium.com/swlh/hasura-authentication-with-firebase-ee5543d57772

Same error.

This is my Firebase cloud function:

const functions = require("firebase-functions");
const admin = require("firebase-admin");
var cors = require('cors');
admin.initializeApp(functions.config().firebase);

const updateClaims = (uid) => admin.auth().setCustomUserClaims(uid, {
  "https://hasura.io/jwt/claims": {
    "x-hasura-default-role": "user",
    "x-hasura-allowed-roles": ["user"],
    "x-hasura-user-id": uid,
  },
});

exports.processSignUp = functions.auth.user().onCreate((user) => updateClaims(user.uid))

exports.refreshToken = functions.https.onRequest((req, res) => {
  let uid = req.query.uid.trim();
  if(!uid.includes('+')) uid = '+' + uid; 
  console.log('TOKEN REFRESH', uid);
  updateClaims(uid).then(() => {
      res.status(200).send('success');
    }).catch((error) => {
      console.error('REFRESH ERROR', error);
      res.status(400).send(error);
    })
  }
)

And after signing in via Firebase, this is my React frontend trying to authenticate / authorize the user:

    const user = firebaseApp.auth().currentUser; 
    if (user) {
      const token = await user.getIdToken(); 
      const idTokenResult = await user.getIdTokenResult();
      const hasuraClaim = idTokenResult.claims["https://hasura.io/jwt/claims"];
      
      if (hasuraClaim) {
        setAuthState({ status: "in", user, token });
      } else {
        const endpoint = 'https://[UNIQUE_NAME].cloudfunctions.net/refreshToken';
        const res = await fetch(`${endpoint}?uid=${user.uid}`);
        if(res.status == 200){
          const validToken = await user.getIdToken(true);
          setAuthState({ status: "in", user, token });
        }
      }
    } else {
      setAuthState({ status: "out" });
    }
  }

  if(authState.status == "in") return <FirebaseAuthenticatedApp authState={authState} />
  else return <Loading />
}

function FirebaseAuthenticatedApp({authState}){
  const isIn = authState.status === "in";
  const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new WebSocketLink({
      uri: graphqlEndpoint,
      options: {
        lazy: true,
        reconnect: true,
        timeout: 30000,
        connectionParams: {
          headers
        }
      }
    }),
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-first'
      },
      query: {
        fetchPolicy: 'cache-first'
      },
    }
  });

  return (
    <ApolloProvider client={client}>           
     <AppUser />
    </ApolloProvider>
  )  
}

A valid token with status 200 is retrieved from my cloud function. It is passed into the function FirebaseAuthenticatedApp, but when setting the client, the error [Error: cannot start as connection_init failed with: claims key: 'https://hasura.io/jwt/claims' not found appears. Any clue on how to resolve this error?