Read session and user data in your Nuxt app with Clerk

Clerk provides composables to access the session and user data in your Nuxt application.

Client-side

useAuth()

The useAuth() composable provides access to the current user's authentication state and methods to manage the active session. You can use this composable to protect pages; learn more about how to use it to protect pages in the dedicated guide.

In the following example, the isLoaded property checks if Clerk has finished initializing and the isSignedIn property checks if the user is signed in in order to protect the page.

<script setup>
const { isSignedIn, isLoaded, userId } = useAuth()
</script>

<template>
  <!-- Use `isLoaded` to check if Clerk is loaded -->
  <div v-if="!isLoaded">Loading...</div>
  <!-- Use `isSignedIn` to check if the user is signed in -->
  <div v-else-if="!isSignedIn">Sign in to access this page</div>
  <!-- Use `userId` to access the current user's ID -->
  <div v-else>Hello, {{ userId }}!</div>
</template>

useUser()

The useUser() composable provides access the User object, which contains the current user's data such as their full name.

The following example uses the useUser() composable to display the user's first name if they are signed in. The isLoaded property checks if Clerk has finished initializing and the isSignedIn property checks if a user is currently signed in.

<script setup>
const { isLoaded, isSignedIn, user } = useUser()
</script>

<template>
  <div v-if="!isLoaded">Loading...</div>
  <div v-else-if="!isSignedIn">Sign in to access this page</div>
  <div v-else>Hello, {{ user.firstName }}!</div>
</template>

Server-side

The Auth object is available at event.context.auth() in your event handlers⁠. This JavaScript object contains important authentication information like the current user's session ID, user ID, and organization ID, and an isAuthenticated property to protect your API routes from unauthenticated users.

In some cases, you may need the full Backend User object of the currently active user. This is helpful if you want to render information, like their first and last name, directly from the server. The clerkClient() helper returns an instance of the JavaScript Backend SDK, which exposes Clerk's Backend API resources through methods such as the getUser() method. This method returns the full Backend User object.

The following example uses the Auth object to access the userId and isAuthenticated properties. The userId is passed to the Backend SDK's getUser() method to get the user's full Backend User object.

import { clerkClient } from '@clerk/nuxt/server'

export default defineEventHandler(async (event) => {
  // Use `auth` to get the user's ID
  const { isAuthenticated, userId } = event.context.auth()

  // Protect the API route by checking if the user is signed in
  if (!isAuthenticated) {
    throw createError({
      statusCode: 401,
      statusMessage: 'Unauthorized: No user ID provided',
    })
  }

  // Get the user's full `Backend User` object
  const user = await clerkClient(event).users.getUser(userId)

  return user
})