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
// pages/supabase.tsx
2
import { useAuth } from '@clerk/nextjs';
3
import { supabase } from './supabaseClient';
4

5
function SupabasePage() {
6
  const { getToken, isLoaded, isSignedIn } = useAuth();
7
  
8
  if (!isLoaded || !isSignedIn) {
9
    // You can handle the loading or signed state separately
10
    return null;
11
  }
12
  
13
  const fetchDataFromSupabase = async () => {
14
    const token = await getToken({ template: 'supabase' });
15
    supabase.auth.setAuth(token);
16
    const { data } = await supabase.from('your-table').select();
17
    return data;
18
  }
19
  
20
  return <div>...</div>;
21
}
22

23
export default App;

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
);