API reference

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 ``.

<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>

The `ChangeCredential` component renders a form that lets a signed-in user set a new value for one of their own credentials. It collects only a new value and its confirmation, checks it against the applicable rules as the user types, and posts the change to ThunderID. It reads the rules it needs from the user type schema already resolved by `ThunderIDProvider` (`GET /users/me/meta`), so it adds no network request beyond the write itself. Every default label, placeholder, and message is built from the credential attribute's own `displayName` in that schema, so it always matches whatever an admin named it there. By default it manages the `password` credential. To manage a different one, for example a PIN declared on the user type schema, set `attribute`; render the component once per credential to let a user manage more than one. :::note `ChangeCredential` collects only a new value and its confirmation, not the account's existing value. The self-service credential write path does not verify the current value today, so asking for one would only teach the user a false sense of security. Once server-side current-value verification ships, that field returns without a breaking change to this component's public props. :::

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

<template>
  <div>
    <h2>Security</h2>
    <ChangeCredential />
  </div>
</template>

The `Loading` component renders its default slot while the authentication state is being determined. It checks the current authentication state and displays a loading indicator or custom content during the initial authentication check. Once authentication is complete, it renders an optional `#fallback` slot or nothing by default. This makes it ideal for providing user feedback during the initial app load or authentication verification.

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

<template>
  <Loading>
    <div>Checking authentication...</div>
  </Loading>
</template>

The `SignInButton` component initiates the sign-in flow when clicked. It automatically handles loading state and error handling, and supports custom UI via a scoped default slot. If a `signInUrl` is configured on the ``, the button navigates to that URL instead of triggering the embedded flow.

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

<template>
  <SignInButton />
</template>

The `SignOutButton` component signs out the current user, clears their session, and revokes authentication tokens when clicked. It automatically handles loading state and error handling, and supports custom UI via a scoped default slot.

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

<template>
  <SignOutButton />
</template>

The `SignUpButton` component triggers the sign-up (registration) flow when clicked. It automatically handles loading state and error handling, and supports custom UI via a scoped default slot. If a `signUpUrl` is configured on the ``, the button navigates to that URL instead of triggering the embedded flow.

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

<template>
  <SignUpButton />
</template>

The `SignedIn` component conditionally renders its default slot only when the user is authenticated with ThunderID. It checks the current authentication state and displays protected UI content for signed-in users. When the user is not authenticated, it renders an optional `#fallback` slot or nothing by default. This makes it ideal for guarding routes or UI sections that require authentication.

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

<template>
  <SignedIn>
    <p>Welcome! You are signed in.</p>
  </SignedIn>
</template>

The `SignedOut` component conditionally renders its default slot only when the user is not authenticated with ThunderID. It checks the current authentication state and displays content for unauthenticated users, while rendering an optional `#fallback` slot (or nothing by default) when the user is authenticated. This makes it ideal for showing sign-in prompts, public landing pages, or content that should only be visible to guests.

<script setup>
import { SignedOut, SignInButton } from '@thunderid/vue'
</script>

<template>
  <SignedOut>
    <div>
      <h1>Welcome!</h1>
      <SignInButton />
    </div>
  </SignedOut>
</template>

The `User` component is a declarative way to access the authenticated user object from the ThunderID authentication context. It uses a scoped slot to expose the user data, making it easy to display user information or conditionally render UI based on authentication state.

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

<template>
  <User>
    <template #default="{ user }">
      <div>
        <h1>Welcome, {{ user.name }}!</h1>
        <p>Email: {{ user.email }}</p>
      </div>
    </template>
    <template #fallback>
      <p>Please sign in</p>
    </template>
  </User>
</template>

The `UserDropdown` component renders an avatar button that opens a dropdown menu with user information and common actions like viewing the profile and signing out. You can insert additional menu items between the Profile link and Sign Out.

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

<template>
  <header>
    <UserDropdown />
  </header>
</template>

The `UserProfile` component renders a complete user profile management interface where users can view and edit their personal information.

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

<template>
  <div>
    <h1>My Profile</h1>
    <UserProfile />
  </div>
</template>

The `ThunderIDProvider` is the root provider component that configures `@thunderid/vue` and provides ThunderID context to your entire Vue application. It must wrap your application to enable authentication features.

<template>
  <ThunderIDProvider
    client-id="<your-app-client-id>"
    base-url="https://localhost:8090"
  >
    <router-view />
  </ThunderIDProvider>
</template>