āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/nuxt/overview ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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.
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.
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 Vue SDK reference.
Auth objectThe 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() optionsAn optional object that can be used to configure the behavior of the event.context.auth() function. It accepts the following properties:
treatPendingAsSignedOut?: A boolean that indicates whether to treat pending session status as signed out. Defaults to true.
</Properties>
The following example uses event.context.auth() to protect the route based on token type:
(acceptsToken: 'any') from the request.session_token, it logs that the request is from a user session.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 JS Backend SDK. Learn more.
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()andclerkMiddleware()? Why not use one or the other?
defineNuxtRouteMiddleware()is used to protect pages only and cannot protect API routes.clerkMiddleware()is used to protect API routes. It can protect pages, but on initial page reload only. On subsequent navigations, it won't be triggered because client-side navigation will bypass the middleware.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā