║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: useAuth() | Vue description: Access and manage authentication state in your Vue application with Clerk's useAuth() composable. sdk: vue, nuxt

The useAuth() composable provides access to the current user's authentication state and methods to manage the session in your Vue application.

Returns

<Properties> - `isLoaded` - `Ref<boolean>`

A boolean that indicates whether Clerk has completed initialization. Initially false, becomes true once Clerk loads.

---

• isSignedIn
• Ref<boolean>

A boolean that indicates whether a user is currently signed in.

---

• userId
• Ref<string>

The ID of the current user.

---

• sessionId
• Ref<string>

The ID of the current session.

---

• orgId
• Ref<string>

The ID of the user's active organization.

---

• orgRole
• Ref<string>

The current user's role in their active organization.

---

• orgSlug
• Ref<string>

The URL-friendly identifier of the user's active organization.

---

• signOut()
• Ref<(options?: SignOutOptions) => Promise<void>>

A function that signs out the current user. Returns a promise that resolves when complete. See the reference doc.

---

• getToken()
• Ref<(options?: GetTokenOptions) => Promise<string | null>>

A function that retrieves the current user's session token or a custom JWT template. Returns a promise that resolves to the token. See the reference doc.

---

• has()
• Ref<(isAuthorizedParams: CheckAuthorizationParamsWithCustomPermissions) => boolean>

A function that checks if the user has specific permissions or roles. See the reference doc. </Properties>

How to use the useAuth() composable

The following example demonstrates how to use the useAuth() composable to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the getToken() method to retrieve a session token for fetching data from an external resource.

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

const fetchProtectedData = async () => {
  // Use `getToken()` to get the current user's session token
  const token = await getToken.value()

  // Use the token to fetch data from an external API
  const response = await fetch('https://api.example.com/data', {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })

  return response.json()
}
</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>
  <!-- Use `userId` to access the current user's ID and `sessionId` to access the current session ID -->
  <div v-else>Hello, {{ userId }}! Your current active session is {{ sessionId }}.</div>
</template>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║