Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

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
} = 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

import { withAuth } from "@clerk/nextjs/api";
export default withAuth(async ( req, res ) => {
const { userId, sessionId, getToken } = req.auth;
const supabaseToken = await getToken({template: "supabase"})
// Load any data your application needs for the API route
return { props: {} };
});

Server-side rendering: req.auth

import { withServerSideAuth } from "@clerk/nextjs/ssr";
export default MyPage(){
return ...;
}
export const getServerSideProps = withServerSideAuth(
async ({ req }) => {
const { userId, sessionId, getToken } = req.auth;
const hasuraToken = await getToken({template: "hasura"})
// Load any data your application needs and pass to props
return { props: {} };
}
);

Edge Middleware: req.auth

import { withEdgeMiddlewareAuth } from "@clerk/nextjs/edge-middleware";
export default withEdgeMiddlewareAuth(
async ( req ) => {
const { userId, sessionId, getToken } = req.auth;
const supabaseToken = await getToken({template: "supabase"})
// Run your middleware
// Complete response
return NextResponse.next();
}
);

Was this helpful?

Clerk © 2022