How do I get a token outside of useAuth with @clerk/expo

[nvsd]

I'm trying to add an auth header to my fetch function but I'm finding it difficult.

import {Clerk} from @clerk/expo is undefined
I could use useAuth but this is awkward I want to do something like

import {getToken} from '@clerk/expo'

fetch('whatever', {headers: {Authorization: await getToken()}})

[JonLoesch]

I'm not a Clerk expert but I ran into a similar issue (with react not expo). My workaround was to manually instantiate a Clerk instance (had to import @clerk/clerk-js directly) and then have it exported from some util module, globally available. Then it was a simple matter of getting the token from the global object (see here). Judging from my brief look through the source, a singleton object is what the <ClerkProvider> does anyway -- but if you construct it yourself and pass it in via the Clerk prop, then you have direct access to the clerk object outside of the react tree.

I'm really not sure if this is best practice. Their examples show that if you can do things using custom hooks you should do that -- that approach doesn't work in my case but maybe it does for you. Also, it appears that Clerk sets a global window.Clerk reference to the singleton object ... so maybe that's the recommended approach to getting global imperative access? idk, I just am more comfortable with controlling initialization myself so I don't have to worry about order of operations when it comes to initializing clerk and my fetch middleware.

Not sure if any of this helps, but figured I'd ping since I ran into a very similar issue and found your post while looking for solutions.

[nvsd]

@JonLoesch It helps. I figured out how to achieve the API I wanted using hooks. I asked on Discord but didn't get a straight answer.

I also dug through the source code and found the same things. I was going to do something similar but went with the hooks route.

It would seem like they expect you to repeat a bunch of logic on every API call or revert to some awkward API where you pass in the getToken function to another function.

const Component = () => {
  const {getToken} = useAuth();
  
useEffect(() => {
  authApi(getToken, 'users')
}, [])

  return (
    <div />
  )
}

const authApi = async (getToken, url) => {
  const token = await getToken()
  return fetch(url, {headers: {Authorization: token}})
}

Doing the above was a poor DX to me, and since I'm using react query, it didn't solve the issue.
I had to do a lot of work to make a semi-decent DX for the rest of the devs on my team but ultimately ended up with

export const api = ky.create({
  prefixUrl: env.apiUrl,
  hooks: { beforeRequest: [printRequest], afterResponse: [printResponse] },
});

export type Api = typeof api;
export type GetToken = () => Promise<string | null>;

const createAuthApi = async (tokenGetter: GetToken) => {
  const token = await tokenGetter();
  if (!token) throw new Error('User is not signed in');
  return api.extend({ headers: { Authorization: `Bearer ${token}` } });
};

type AuthQueryFunction<
  T = unknown,
  TQueryKey extends QueryKey = QueryKey,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  TPageParam = any,
> = (api: Api, context: QueryFunctionContext<TQueryKey, TPageParam>) => T | Promise<T>;

export function useAuthQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>({
  authQueryFn,
  ...options
}: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
  authQueryFn: AuthQueryFunction<TQueryFnData, TQueryKey, unknown>;
}): UseQueryResult<TData, TError> {
  const { getToken } = useAuth();
  return useQuery({
    ...options,
    queryFn: async (args) => {
      const api = await createAuthApi(getToken);
      
      // I pass the created api with the auth header already setup to the caller
      return authQueryFn(api, args);
    },
  });
}

and using that looks like

export const useUsers = () => {
  const { data, ...rest } = useAuthQuery({
    queryKey: ['users'],
    authQueryFn: (api) => api.get(`users`).json<User[]>()
  });

  return { users: data, ...rest };

It's disappointing and frustrating that it seemed like there was no acknowledgment of a problem here when I asked on Discord. I'll give them the benefit of the doubt since it seemed like me and the clerk dev weren't communicating that well.

The issue still remains, though: the fact that developers can't encapsulate await getToken inside the function you use to fetch makes API design so awkward.

[airowe]

@nvsd How did you handle mutations in this flow?

[nvsd]

@airowe I can dig it up. We actually moved off of clerk due to this and some other unrelated requirements but it should be in the git history somewhere.

[airowe]

@nvsd No worries. I ended up moving off react-query and sticking with Clerk for now.

[dimkl]

hello @nvsd and thank you for opening this issue.
The Clerk from import {Clerk} from @clerk/expo is being populated when ClerkProvider is being loaded.
I think that using the above code inside a component (inside ClerkProvider), it will be populated.

I think you could also try the following solutions:

// 1. Using hook exported from the @clerk/expo
import { useClerk } from '@clerk/expo';
const clerk = useClerk();
const token = await clerk.session?.getToken();

fetch('whatever', {headers: {Authorization: token })

// 2. initializing a new clerk client using @clerk/clerk-js
import Clerk from '@clerk/clerk-js/headless';
const clerk = new Clerk(publishableKey);
const token = await Clerk.session?.getToken();

fetch('whatever', {headers: {Authorization: token })

[JonLoesch]

@nvsd Glad you got something working, and it sounds like you've already solved the problem, even if you're not 100% happy with the solution. I'm going to try to flesh out my idea a bit more because I think it may be what you're looking for? As I've understood it, it sounds like you want your DX to be something along the lines of a globally available api, rather than as a parameter in a hook callback. Assuming I have understood that correctly, then what you could have is something like (This is basically a re-working of existing code on this thread):

import Clerk from '@clerk/clerk-js/headless';

export const _api = ky.create({
  prefixUrl: env.apiUrl,
  hooks: { beforeRequest: [printRequest], afterResponse: [printResponse] },
});

export type Api = typeof _api;

export const clerk = new Clerk(publishableKey);

export const api = async () => {
  const token = await clerk.session?.getToken();
  if (!token) throw new Error('User is not signed in');
  return api.extend({ headers: { Authorization: `Bearer ${token}` } });
}

And then wherever you have your <ClerkProvider publishableKey={...}> near the root of your application you can replace it with this instead:

<ClerkProvider Clerk={clerk}>
  ...
</ClerkProvider>

This way both requests going through your api logic and requests coming from Clerk built in components (i.e. going through the react context) will be using the same underlying Clerk object. I think you'll still need to call api.extend(...) on every api request, because the token does not necessarily stay constant throughout the lifetime of the application. But at least this way you don't have to go through hooks for every request.

[oldo]

I was hoping this would work but unfortunately for me it hasn't.

[JonLoesch]

P.S. This is not clerk related but maybe still worth mentioning?

I said you needed to call api.extend(...) on every API request. I'm not 100% sure that's true because I don't know what API / HTTP tech you're using.

For example, I'm using in a trpc application which has this for custom headers:

export interface HTTPLinkOptions {
  ...
  headers?:
    | HTTPHeaders
    | ((...) => HTTPHeaders | Promise<HTTPHeaders>);
}

The fact that it offers () => Promise<HTTPHeaders> as an option means that for my use case, I actually was able to initialize the api once and then have it call an async callback to get the headers every time (which would then do getToken). I'm not sure what API / HTTP tech you're working with and if that's an option for you.

[phuhl]

I have the same issue using @clerk/clerk-react. I'd love some kind of official way to retrieve a token outside of the react context with the react library

[Richard87]

Hi! We also have the same issue.

I would love a way to subscribe to a valid token, that would just renew automatically before expired or null if logged out, this would solve alot of issues

export default function TokenWindowProvider({children}) {
  const clerk = useClerk();
  const token = await clerk.session?.subscribeToToken(token => {
     window.clerkToken = token;
  });
  
  return children
}

[leonardo-motta-deel]

solving this on client side is easy, use clerk headless

[nvsd]

This is a thread about @clerk/expo and a potential missing requirement in that library.

If the answer to the question "How do I get a token outside of useAuth with @clerk/expo" is to install another library that exposes the underlying class that the first one is already using privately, then in my opinion, there's a problem.

Maybe you disagree, but we should flesh that idea out instead of saying, "It's easy, use two libraries"

[airowe]

I know this is an old issue, but definitely a sore point for us as well using Clerk. Has anyone found a seamless solution to use here?

[ronnycoding]

this is the solution I implement on expo

context/graphql/GraphQLClientContext.tsx

// GraphQLClientContext.tsx
import React from "react";
import { GraphQLClient } from "graphql-request";

// Create a context with an undefined GraphQLClient by default
const GraphQLClientContext = React.createContext<GraphQLClient | undefined>(
  undefined
);

export default GraphQLClientContext;

context/graphql/GraphQLClientProvider.tsx

import React, { useEffect, useState } from "react";
import GraphQLClientContext from "./GraphQLClientContext";
import { useAuth } from "@clerk/clerk-expo";
import { getGqlClient } from "../../gql-client";
import { GraphQLClient } from "graphql-request";

export const GraphQLClientProvider: React.FC<{
  children: React.JSX.Element;
}> = ({ children }) => {
  const { getToken } = useAuth();
  const [client, setClient] = useState<GraphQLClient>();

  useEffect(() => {
    const initClient = async () => {
      const token = await getToken({ template: "hasura" });
      if (!token) return;
      const newClient = getGqlClient(token);
      setClient(newClient);
    };

    initClient();
  }, [getToken]);

  if (!client) return null; // Optionally, render a loading spinner or a similar indicator

  return (
    <GraphQLClientContext.Provider value={client}>
      {children}
    </GraphQLClientContext.Provider>
  );
};

hooks/useGraphQLClient.ts

import { useContext } from "react";
import GraphQLClientContext from "../context/graphql/GraphQLClientContext";

const useGraphQLClient = () => {
  const client = useContext(GraphQLClientContext);
  if (!client) {
    throw new Error(
      "useGraphQLClient must be used within a GraphQLClientProvider"
    );
  }
  return client;
};

export default useGraphQLClient;

finally App.tsx

import { GraphQLClientProvider } from "./src/context/graphql/GraphQLClientProvider";

export function App () {
  return (
    <GraphQLClientProvider>
     <MyApp/>
    </GraphQLClientProvider>
  )
}

[hwildwood]

After going round in circles for hours, I think I've got something working. I'm using clerk-expo and it looks like you can import the singleton clerk instance which is created by the <ClerkProvider.../>. I'm not sure if this is recommended or just un-documented but it works.

Here's an example of how I use it to add the bearer token in an Axios interceptor. This means I can use vanilla react-query without any extra boiler plate.

import { clerk } from '@clerk/clerk-expo/dist/singleton';

api.interceptors.request.use(async (config) => {
  const token = await clerk.session?.getToken();
  console.log('Checking token....');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
    console.log('Using token ' + token);
  }
  return config;
});

[oldo]

Yes! Finally! This worked. Thank you!

[titidutarn]

Don't think this refreshes tokens 🥲

[hwildwood]

@titidutarn Are you sure it doesn't refresh the tokens? I haven't seen any errors around expired tokens so far.

In theory @clerk/clerk-expo/dist/singleton is a direct reference to the clerk instance which is used by the ClerkProvider so it should handle refreshing.

[titidutarn]

Oh I was gonna reformat all my code and saw your message. God bless.
I wanted to double check so I tried it again and it's working now, don't know what I was doing wrong.
I will keep you updated, but yes seems to work actually.

[JordanKoszarek]

I didn't want to add expo, but if you have access to clerk you can add listeners that are called whenever user or session are updated:

import { useEffect } from 'react';
import { useClerk } from '@clerk/clerk-react';

const useClerkProvider = () => {
  const clerk = useClerk();
  const unsubscribeRef = useRef();

  useEffect(() => {
    const handleClerkChange = (clerk) => {
      console.log(clerk);
     // Cache it every time it updates
      clerk.session;
    };

    if (clerk.clerkjs) {
      unsubscribeRef.current = clerk.clerkjs.addListener(handleClerkChange);
    }

    return () => {
      if (unsubscribeRef.current) {
        unsubscribeRef.current();
      }
    };
  }, [clerk?.clerkjs]);
};

export default useClerkListener;

[JordanKoszarek]

Docs: https://clerk.com/docs/references/javascript/clerk/clerk#add-listener

[oldo]

Good to know, thanks