Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

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.

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

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

Server-side rendering: req.auth

Edge Middleware: req.auth

Was this helpful?

Clerk © 2022