Error: Could not verify JWT: JWSError (CompactDecodeError Invalid number of parts: Expected 3 parts; got 1)

[ajenkins]

I'm trying to use Hasura with Clerk for authentication. I followed all of the steps here.

Here's my code where I set up the auth headers:

import { useState, useEffect } from "react";
import { GraphQLClient } from "graphql-request";
import { useAuth } from "@clerk/clerk-expo";

const endpoint = "https://my-app.hasura.app/v1/graphql";

function useGraphqlClient() {
  const [token, setToken] = useState<string | null>(null);
  const { getToken } = useAuth();

  useEffect(() => {
    (async () => {
      setToken(await getToken({ template: "hasura" }));
    })();
  }, []);

  console.log("token", token);

  const client = new GraphQLClient(endpoint, {
    headers: { Authorization: `Bearer ${token}` },
  });

  return client;
}

export default useGraphqlClient;

Here's where I try to fetch data:

import { Text } from "react-native";
import { gql } from "graphql-request";
import { useQuery, useQueryClient } from "@tanstack/react-query";

import useGraphqlClient from "../../hooks/useGraphqlClient";

const id = "b99bc981-4ecd-49da-b743-7aa26b43c8de";

function useMyProfile(myId: string) {
  const client = useGraphqlClient();
  return useQuery({
    queryKey: ["users", myId],
    queryFn: async () => {
      // @ts-ignore
      const { user } = await client.request(
        gql`
          query GetMyProfile($myId: uuid!) {
            users_by_pk(id: $myId) {
              name
            }
          }
        `,
        { myId }
      );
      return user;
    },
  });
}

function EditProfileScreen() {
  const { status, data, error } = useMyProfile(id);

  if (status === "error" && error instanceof Error) {
    return <Text style={{ color: "red" }}>{error.message}</Text>;
  }

  if (status === "loading") {
    return <Text>Loading...</Text>;
  }

  return <Text>Hello, {data.name}</Text>;
}

export default EditProfileScreen;

But I get this error:

[Error: Could not verify JWT: JWSError (CompactDecodeError Invalid number of parts: Expected 3 parts; got 1): {"response":{"errors":[{"extensions":{"code":"invalid-jwt","path":"$"},"message":"Could not verify JWT: JWSError (CompactDecodeError Invalid number of parts: Expected 3 parts; got 1)"}],"status":200,"headers":{"map":{"cf-cache-status":"DYNAMIC","cf-ray":"7ba24c1599a83018-BOS","content-encoding":"gzip","content-security-policy":"upgrade-insecure-requests","content-type":"application/json; charset=utf-8","date":"Wed, 19 Apr 2023 04:10:20 GMT","referrer-policy":"strict-origin-when-cross-origin","server":"cloudflare","strict-transport-security":"max-age=31536000; includeSubDomains","x-content-type-options":"nosniff","x-frame-options":"SAMEORIGIN","x-xss-protection":"0"}}},"request":{"query":"\n          query GetMyProfile($myId: uuid!) {\n            users_by_pk(id: $myId) {\n              name\n            }\n          }\n        ","variables":{"myId":"b99bc981-4ecd-49da-b743-7aa26b43c8de"}}}]

This is what my JWT looks like:

This is what my Clerk JWT template config looks like:

This is what my Hasura env config looks like:

How do I fix this error?

[ajenkins]

I tried adding "type": "RS256" and "claims_format": "stringified_json" (separately) to my Hasura env config, but neither setting fixed my issue.

[ajenkins]

I also tried creating a brand new Hasura project, but got exactly the same result.

[ajenkins]

I figured it out. It was just a very misleading error message. Due to a race condition/caching error, my token was coming back as null. So my request headers looked like this:

{"Authorization": "Bearer null"}

So the "1 part" alluded to by the error message was just the string "null". The fix was to update my code to make sure that the auth token gets set in the headers before the request is made.