.tsx

// AuthProvider.tsx (this is an abstraction)
type AuthProvider = () => {
  getToken(): Promise<string>;
};
  
export const {
  useContext, 
  createContextProvider: provideAuth,
} = createGenericContext<AuthProvider>();

export function useAuthProvider() {
  return useContext().value();
}

////////
// useAuth.tsx (this is production implementation)
export function useAuth() {
  const { getAccessTokenSilently } = useAuth0();
  
  return {
    getToken: getAccessTokenSilently,
  };
}

////////
// AppProvider.tsx
export const AppProvider() {
  return (
    <DependencyProvider providers={[provideAuth(useAuth)]}>
      <App />
    </DependencyProvier>
  );
}

////////
// useTodos.tsx
export function useTodos() {
  const { getToken } = useAuthProvider();
  
  return useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const token = await getToken();
      
    },
  });
}