Skip to main content
Docs

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 object, , , and a set of useful helper methods for signing in and signing up. Learn more in the .

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. .

event.context.auth() options

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

    An optional 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 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:

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

The clerkClient() helper returns an instance of the . 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.

Quiz

When protecting pages/routes using middleware, what is the difference between using defineNuxtRouteMiddleware() and clerkMiddleware()? Why not use one or the other?

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on