Vue Quickstart

Use this guide to add ThunderID authentication to a Vue 3 application using the @thunderid/vue SDK.

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

Node.js installed on your system

npm, yarn, or pnpm

Your preferred code editor

Run ThunderID

Start a local ThunderID instance. Pick the method that works best for you:

$npx thunderid

Requires Node.js 18+

Full install guide →

Once it's running, the console is available at https://localhost:8090.

Create an Application

Open the Console at https://localhost:8090/console, navigate to Applications, and click Add Application:

Under Technology, select Vue.
Enter a name (e.g. My Vue App) and create an application. The rest of the settings can stay at their defaults.
Copy the Client ID from the General tab. You'll need it when configuring the SDK.
Under General, add http://localhost:5173 to the list of Authorized Redirect URIs.

Create a Vue App

Create your new Vue 3 app using Vite:

npm
Yarn
pnpm

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

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

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

Install @thunderid/vue

Install the ThunderID Vue SDK in your project:

npm
Yarn
pnpm
Bun

npm install @thunderid/vue

yarn add @thunderid/vue

pnpm add @thunderid/vue

bun add @thunderid/vue

Register the Plugin

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

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

Build with ThunderID Components

Update src/App.vue with ThunderID authentication components:

Configuration

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

src/App.vue
<script setup>
import {
  SignedIn,
  SignedOut,
  SignInButton,
  SignOutButton,
  UserDropdown,
} from '@thunderid/vue'
</script>

<template>
  <ThunderIDProvider
    client-id="<your-client-id>"
    base-url="https://localhost:8090"
  >
    <section id="center">
      <SignedIn>
        <UserDropdown />
      </SignedIn>
      <SignedOut>
        <SignInButton>Sign In</SignInButton>
      </SignedOut>
    </section>
  </ThunderIDProvider>
</template>

Run Your App

Start the development server:

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

Test credentials

You'll need a user to sign in with. If you haven't created one yet, open https://localhost:8090/console, navigate to Users, and add a test user with an email and password.

Success

Visit your app at 🌐 http://localhost:5173

You should see the <SignInButton />. Click it to be redirected to the ThunderID-hosted sign-in page. Login with your test user, then return to your app with the user dropdown displayed.