useAuth

Access the auth state inside your React components.

Overview

The useAuth hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session.

This hook is compatible with SSR and is recommended for all authentication tasks.

const {
  userId,
  sessionId,
  getToken,
  isLoaded,
  isSignedIn,
  signOut,
  orgId,
  orgRole,
  orgSlug,
} = useAuth();

This new hook should be used instead of:

useSession() , to access getToken() or the sessionId
useUser() , to access getToken() for integrations
useClerk() , to access signOut()

Usage

In the following basic example, useAuth is used to access the auth state and generate a new JWT for a custom Supabase integration in a NextJS application. Note that your component must be a descendant of <ClerkProvider/>.

Typescript

For better type support, we highly recommend updating to at least Typescript 4.6. Applications using Typescript will benefit significantly from Typescript's new Control Flow Analysis for Dependent Parameters when using our hooks.

1
import { useAuth } from '@clerk/clerk-react';
2
import { createClient } from "@supabase/supabase-js";
3

4
const supabaseClient = async (supabaseAccessToken) => {
5
    const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_KEY, {
6
      global: { headers: { Authorization: `Bearer ${supabaseAccessToken}` } },
7
    });
8
    // set Supabase JWT on the client object,
9
    // so it is sent up with all Supabase requests
10
    return supabase;
11
  };
12
  
13
function App() {
14
  const { getToken } = useAuth();
15

16
  const fetchData = async () => {
17
    // TODO #1: Replace with your JWT template name
18
    const supabaseAccessToken = await getToken({ template: 'supabase' });
19

20
    const supabase = await supabaseClient(supabaseAccessToken);
21
    
22
    // TODO #2: Replace with your database table name
23
    
24
    const { data, error } = await supabase.from('your_table').select();
25

26
    // TODO #3: Handle the response
27
  };
28

29
  return (
30
    <div className="app">
31
      <button onClick={fetchData}>Fetch data</button>
32
    </div>
33
  );
34
}

Alternative ways to access the auth object

There are times when you may need to access the auth object during SSR, API handlers and Edge middleware. The auth object is also available in Next.js, Remix, and Gatsby API routes, even during server-side rendering.

The following snippets are quick examples for NextJS applications. For more details, look at the starter guide for your framework of choice.

API Routes: `req.auth`

1
import { withAuth } from "@clerk/nextjs/api";
2

3
export default withAuth(async ( req, res ) => {
4
    const { userId } = req.auth;
5
    // Load any data your application needs for the API route
6
    return { props: {} };
7
});

Server-side rendering: `req.auth`

/pages/mypage.jsx1
import { withServerSideAuth } from "@clerk/nextjs/ssr";
2

3
export default MyPage(){
4
   return ...;
5
}
6

7
export const getServerSideProps = withServerSideAuth(
8
  async ({ req }) => {
9
    const { userId } = req.auth;
10
    // Load any data your application needs and pass to props
11
    return { props: {} };
12
  }
13
);

Edge Middleware: `req.auth`

1
import { withEdgeMiddlewareAuth } from "@clerk/nextjs/edge-middleware";
2

3
export default withEdgeMiddlewareAuth(
4
  async ( req ) => {
5
    const { userId } = req.auth;
6
    // Run your middleware
7

8
    // Complete response
9
    return NextResponse.next();
10
  }
11
);