Clerk.tsx

const ClerkContext = createContext<Resource<Clerk>>();

const loadClerk = async () => {
  const clerk = new Clerk(publishableKey);
  await clerk.load();
  return clerk;
}

export function ClerkProvider(props: { children: JSX.Element}) {
  const [clerk] = createResource(loadClerk);
  
  return (
    <ClerkContext.Provider value={clerk}>
      {children}
    </ClerkContext.Provider>
  );
}

export const useClerk = () => {
  return useContext(ClerkContext);
}