Read user data
Clerk provides composables to read user data in your Nuxt application.
Client-side
useAuth()
The useAuth() composable provides access to the current user's authentication state. It includes the isSignedIn property to check if the active user is signed in, which is helpful for protecting a 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 to the current user's User object, which contains the current user's data such as their ID. It also includes the isSignedIn property to check if the active user is signed in, which is helpful for protecting a page.
<script setup>
import { useUser } from '@clerk/vue'
const { isSignedIn, user, isLoaded } = useUser()
</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 view this page</div>
<div v-else>Hello {{ user?.id }}!</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 clerkClient, 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 getUser() method to get the user's full Backend User object. The isAuthenticated property is used to protect the API route from unauthenticated users.
import { clerkClient } from '@clerk/nuxt/server'
export default defineEventHandler(async (event) => {
// Use `auth` to access the `isAuthenticated` and `userId` properties
const { isAuthenticated, userId } = event.context.auth()
// Protect the API route by checking if the user is signed in
if (!isAuthenticated) {
// Add logic to handle unauthenticated users:
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
})Feedback
Last updated on