Run ThunderID

Register an app

Build a flow

4

Connect your app

Vue Quickstart

This is step 4 of the getting started sequence. By the end you will have a working Vue 3 app with sign-in and sign-out powered by ThunderID.

What You Will Learn

• Create a new Vue 3 app using Vite

• Install the @thunderid/vue package

• Add working sign-in and sign-out

• Display the signed-in user's profile

Prerequisites

• About 15 minutes

• Steps 1–3 complete: ThunderID running, an application registered, and a sign-in flow built. Start at Get ThunderID if you haven't already.

• Node.js installed on your system

• npm, yarn, or pnpm

• Your preferred code editor

1

Create a Vue App

Create your new Vue 3 app using Vite:

npm

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

Yarn

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn install

pnpm

pnpm create vite my-vue-app --template vue
cd my-vue-app
pnpm install

2

Install @thunderid/vue

Install the ThunderID Vue SDK in your project:

npm

npm install @thunderid/vue

Yarn

yarn add @thunderid/vue

pnpm

pnpm add @thunderid/vue

Bun

bun add @thunderid/vue

3

Register the Plugin and Add ThunderIDProvider

The @thunderid/vue SDK provides a Vue plugin that registers the ThunderIDProvider component globally. Register the plugin in main.js, then wrap your root component with ThunderIDProvider in App.vue.

Step 1: Update src/main.js to register the plugin:

src/main.js

import { createApp } from 'vue'
import { ThunderIDPlugin } from '@thunderid/vue'
import App from './App.vue'
import './style.css'

const app = createApp(App)
app.use(ThunderIDPlugin)
app.mount('#app')

Step 2: Wrap your application with ThunderIDProvider in src/App.vue:

src/App.vue

<template>
  <ThunderIDProvider
    client-id="<your-client-id>"
    base-url="https://localhost:8090"
  >
    <!-- your app content goes here -->
  </ThunderIDProvider>
</template>

<script setup>
</script>

Configuration

Replace <your-client-id> with the Client ID you obtained when creating the application in ThunderID.

Configuration Parameters

Parameter	Description
client-id	The Client ID from your ThunderID application
base-url	Your ThunderID instance URL (e.g., https://localhost:8090)

4

Add Sign-In And Sign-Out

The ThunderID Vue SDK provides SignInButton and SignOutButton components along with SignedIn, SignedOut, and Loading components for conditional rendering.

Replace the content of src/App.vue with:

src/App.vue

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

<template>
  <ThunderIDProvider
    client-id="<your-client-id>"
    base-url="https://localhost:8090"
  >
    <Loading>
      <div>Loading authentication...</div>
    </Loading>

    <header>
      <h1>ThunderID Auth Demo</h1>
      <SignedIn>
        <SignOutButton>Sign Out</SignOutButton>
      </SignedIn>
      <SignedOut>
        <SignInButton>Sign In</SignInButton>
      </SignedOut>
    </header>
  </ThunderIDProvider>
</template>

5

Display User Profile Information

Use the User component with a scoped slot to access and display user profile information:

src/App.vue

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

<template>
  <ThunderIDProvider
    client-id="<your-client-id>"
    base-url="https://localhost:8090"
  >
    <Loading>
      <div>Loading authentication...</div>
    </Loading>

    <header>
      <h1>ThunderID Auth Demo</h1>
      <SignedIn>
        <SignOutButton>Sign Out</SignOutButton>
      </SignedIn>
      <SignedOut>
        <SignInButton>Sign In</SignInButton>
      </SignedOut>
    </header>

    <main>
      <SignedIn>
        <User>
          <template #default="{ user }">
            <div class="user-profile">
              <img
                v-if="user.picture"
                :src="user.picture"
                :alt="user.name || 'User avatar'"
                style="width: 80px; height: 80px; border-radius: 50%"
              />
              <h2>Welcome, {{ user.name || user.username }}!</h2>
              <div class="user-details">
                <p><strong>Email:</strong> {{ user.email }}</p>
                <p><strong>First Name:</strong> {{ user.given_name }}</p>
                <p><strong>Last Name:</strong> {{ user.family_name }}</p>
              </div>
            </div>
          </template>
        </User>
      </SignedIn>
    </main>
  </ThunderIDProvider>
</template>

6

Run Your App

Start the development server:

npm

npm run dev

Yarn

yarn dev

pnpm

pnpm run dev

Visit your app at http://localhost:5173

Success

You should see the sign-in button. Click it, you'll be redirected to the ThunderID-hosted sign-in page. Authenticate with the test user you created in step 2, and you will land back in your app with the user profile displayed.

You're Done

You have completed the full getting started sequence:

1. ✅ ThunderID running
2. ✅ Application registered with a Client ID
3. ✅ Sign-in flow built in the Flow Designer
4. ✅ Vue 3 app integrated and authenticating

What's Next

Upgrade the sign-in flow

Add MFA, passkeys, or social login to your flow, no app code changes required.

Flow Designer →