Same-origin requests

If your client and server are on the same origin (e.g. making an API call to foo.com/api from JavaScript running on foo.com), the session token(opens in a new tab) is automatically passed to the backend in a cookie. This means that all requests to same-origin endpoints are authenticated by default.

Using Fetch

You can use the native browser Fetch API as you normally would and the request will be authenticated.

fetch('/api/foo').then(res => res.json());

useSWR hook

If you are using React or Next.js and would like to use the useSWR(opens in a new tab) hook, it’s as simple as supplying the API route with whichever fetcher function you are using. Because of the automatic revalidation feature(opens in a new tab) of SWR, you need to retrieve and set the session token in the Authorization header. Call the asynchronous getToken method from the useAuth() hook and add it as a Bearer token.

import useSWR from 'swr';
import { useAuth } from '@clerk/nextjs';
 
export default function useClerkSWR(url) {
  const { getToken } = useAuth();
 
  const fetcher = async (...args) => {
    return fetch(...args, {
      headers: { Authorization: `Bearer ${await getToken()}` }
    }).then(res => res.json());
  };
 
  return useSWR(url, fetcher);
}

import useSWR from 'swr';
import { useAuth } from '@clerk/nextjs';
 
export default function useClerkSWR(url: string) {
  const { getToken } = useAuth();
 
  const fetcher = async (...args: [RequestInfo]) => {
    return fetch(...args, {
      headers: { Authorization: `Bearer ${await getToken()}` }
    }).then(res => res.json());
  };
 
  return useSWR(url, fetcher);
}

When you re-focus a page or switch between tabs, SWR automatically revalidates data. This can be useful to immediately synchronize to the latest state in scenarios like stale mobile tabs, or laptops that went to sleep.

Tanstack Query (React Query)

If you are using Tanstack Query(opens in a new tab), formally known as React Query, in your application, you need to use a query function that throws errors. Since the native Fetch API does not, you can add it in.

import { useQuery } from '@tanstack/react-query';
 
const { data, error } = useQuery('foo', async () => {
  const res = await fetch('/api/foo');
  if (!res.ok) {
    throw new Error('Network response error')
  }
  return res.json()
});

Background fetching

For applications that are fetching content in the background, like when a tab is no longer focused, you will need to include an Authorization header along with your request.

import { useAuth } from '@clerk/nextjs';
 
export default function useFetch() {
  const { getToken } = useAuth();
 
  const authenticatedFetch = async (...args) => {
    return fetch(...args, {
      headers: { Authorization: `Bearer ${await getToken()}` }
    }).then(res => res.json());
  };
  return authenticatedFetch;
}

Last updated on January 8, 2024