Clerk Nuxt SDK

The Clerk Nuxt SDK gives you access to prebuilt components, composables, and helpers to make user authentication easier. Refer to the quickstart guide to get started.

Integration

To configure Clerk with Nuxt, you must pass the @clerk/nuxt module to your Nuxt config in your nuxt.config.ts file. See the reference for more information on configuring the module, including setting Clerk options like signInForceRedirectUrl.

Client-side helpers

Because the Nuxt SDK is built on top of the Clerk Vue SDK, you can use the composables that the Vue SDK provides. These composables include access to the Clerk object, User object, Organization object, and a set of useful helper methods for signing in and signing up. Learn more in the Clerk Vue SDK reference.

• useUser()
• useClerk()
• useAuth()
• useSignIn()
• useSignUp()
• useSession()
• useSessionList()
• useOrganization()

Objects

Learn about the key Clerk objects that power many of Clerk's SDKs.

Types

See the reference docs on types to get more information about the different types available for typing your application.

Auth object

The Auth object is available at event.context.auth() in your event handlers⁠. This JavaScript object contains important information like session data, your user's ID, as well as their Organization ID. Learn more about the Auth object.

event.context.auth() options

• Name opts? Type {acceptsToken: TokenType, treatPendingAsSignedOut: boolean } Description

An object that can be used to configure the behavior of the event.context.auth() function. It accepts the following properties:

• acceptsToken?: The type of authentication token(s) to accept. Valid values are:
  • 'session_token' - authenticates a user session.
  • 'oauth_token' - authenticates a machine request using OAuth.
  • 'm2m_token' - authenticates a machine to machine request.
  • 'api_key' - authenticates a machine request using API keys. Can be set to:
  • A single token type.
  • An array of token types.
  • 'any' to accept all available token types. Defaults to 'session_token'.
  • treatPendingAsSignedOut?: A boolean that indicates whether to treat pending session status as signed out. Defaults to true.

Example: Protect a route based on token type

The following example uses event.context.auth() to protect the route based on token type:

export default eventHandler((event) => {
  // Use `event.context.auth()` to protect a route based on token type
  const authObject = event.context.auth({ acceptsToken: 'any' })

if (authObject.tokenType === 'session_token') {
    console.log('This is a session token from a user')
  } else {
    console.log(`This is a ${authObject.tokenType} token`)
  }

return {}
})

clerkMiddleware()

The clerkMiddleware() helper integrates Clerk authentication and authorization into your Nuxt application through middleware. Learn more in the clerkMiddleware() reference.

clerkClient

clerkClient is a wrapper around the Backend API⁠ that makes it easier to interact with the API. For example, to retrieve a list of all users in your application, you can use the users.getUserList() method instead of manually making a fetch request to the https://api.clerk.com/v1/users endpoint.

To access a resource, you must first instantiate a clerkClient instance. See the reference documentation for more information.

Learn more about reading user data.

Protect pages and API routes

To protect pages, use the useAuth() helper to protect a single page, or use Nuxt's built-in route middleware⁠ to protect multiple pages. Learn more about protecting content.

To protect API routes (/api/**), use the clerkMiddleware() helper. Learn more in the clerkMiddleware() reference.