Skip to main content
Docs

useAuth() | Vue

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

Returns

  • Name
    isLoaded
    Type
    Ref<boolean>
    Description

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

  • Name
    isSignedIn
    Type
    Ref<boolean>
    Description

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

  • Name
    userId
    Type
    Ref<string>
    Description

    The ID of the current user.

  • Name
    sessionId
    Type
    Ref<string>
    Description

    The ID of the current session.

  • Name
    orgId
    Type
    Ref<string>
    Description

    The ID of the user's active organization.

  • Name
    orgRole
    Type
    Ref<string>
    Description

    The current user's role in their active organization.

  • Name
    orgSlug
    Type
    Ref<string>
    Description

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

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

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

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

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

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

    A function that checks if the user has specific permissions or roles. See the reference docClerk Icon.

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.

App.vue
<script setup>
import { useAuth } from '@clerk/vue'

const { getToken, isLoaded, isSignedIn } = useAuth()

const fetchProtectedData = async () => {
  const token = await getToken.value()

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

  return response.json()
}
</script>

<template>
  <div v-if="!isLoaded">Loading...</div>
  <div v-else-if="!isSignedIn">Sign in to view this page</div>
  <div v-else>
    <!-- Your protected content here -->
  </div>
</template>

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on