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

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.

event.context.auth() options

Example: Protect a route based on token type

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

• It accepts any token type (acceptsToken: 'any') from the request.
• If the token is a session_token, it logs that the request is from a user session.
• Otherwise, it logs that the request uses a machine token and specifies its 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.

clerkClient()

Clerk's JS Backend SDK 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 from the JS Backend SDK 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.

Protect pages and API routes

To protect pages, use the useAuth() helper to protect a single page, or use it with defineNuxtRouteMiddleware() alongside the createRouteMatcher() helper to protect multiple pages. Learn more.

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