useThunderID()

The useThunderID composable provides access to the ThunderID authentication context in Vue applications. It allows you to retrieve authentication state, user information, and other context values managed by the <ThunderIDProvider />.

Usage

Import and use the composable inside <script setup> (or setup()) to access authentication data:

src/MyComponent.vue

<script setup>
import { useThunderID } from '@thunderid/vue'

const { isSignedIn, user, signIn, signOut } = useThunderID()
</script>

<template>
  <div>
    <template v-if="isSignedIn">
      <p>Welcome, {{ user?.name }}!</p>
      <button @click="signOut()">Sign Out</button>
    </template>
    <template v-else>
      <button @click="signIn()">Sign In</button>
    </template>
  </div>
</template>

note

This composable must be used inside a component rendered within <ThunderIDProvider /> (or after ThunderIDPlugin is installed). Otherwise, it will throw an error.

Reactive state

isSignedIn, isLoading, isInitialized, user, and organization are Vue Refs. In templates Vue unwraps them automatically (isSignedIn instead of isSignedIn.value). In <script> code you must access .value.

Return Values

The composable returns the full ThunderID context:

Property	Type	Description
isSignedIn	boolean	Whether the user is currently signed in
isLoading	boolean	Whether an authentication operation is in progress
user	User | null	The authenticated user object, or null if not signed in
organization	Organization | null	The current active organization
signIn	(...args) => Promise<User | EmbeddedSignInFlowResponse>	Initiates the sign-in flow
signOut	(...args) => Promise<any>	Signs the current user out
signUp	(...args) => Promise<any>	Initiates the sign-up flow
getAccessToken	() => Promise<string>	Returns the current access token
getDecodedIdToken	() => Promise<IdToken>	Returns the decoded ID token payload
http	{ request, requestAll }	Authenticated HTTP client (see Accessing Protected APIs)

Error Handling

If useThunderID is called outside of a <ThunderIDProvider />, it throws:

[ThunderID] useThunderID() was called outside of <ThunderIDProvider>. Make sure to install the ThunderIDPlugin or wrap your app with <ThunderIDProvider>.