Add HelloJohn authentication to your Vue 3 app in 10 minutes. Plugin-based setup, composables, and route guards.

Time: ~10 minutes Prerequisites: A HelloJohn account (Cloud) or a self-hosted server running locally.

Install the SDK

npm install @hellojohn/vue

yarn add @hellojohn/vue

pnpm add @hellojohn/vue

Register the plugin

Add the HelloJohn plugin to your Vue app in main.ts:

src/main.ts

import { createApp } from 'vue'
import { HelloJohnPlugin } from '@hellojohn/vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.use(HelloJohnPlugin, {
  publishableKey: 'pk_live_XXXXXXXXXXXXXXXX',
})

app.mount('#app')

Never use your Secret Key in frontend code. Only use the Publishable Key (pk_...).

Use the pre-built <SignIn> component:

src/views/SignInView.vue

<template>
  <div class="flex min-h-screen items-center justify-center">
    <SignIn redirect-url="/dashboard" />
  </div>
</template>

<script setup lang="ts">
import { SignIn } from '@hellojohn/vue'
</script>

Add an auth guard to your Vue Router:

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { useAuth } from '@hellojohn/vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('../views/HomeView.vue') },
    { path: '/sign-in', component: () => import('../views/SignInView.vue') },
    {
      path: '/dashboard',
      component: () => import('../views/DashboardView.vue'),
      meta: { requiresAuth: true },
    },
  ],
})

router.beforeEach(async (to) => {
  if (to.meta.requiresAuth) {
    const { isSignedIn } = useAuth()
    if (!isSignedIn.value) {
      return { path: '/sign-in' }
    }
  }
})

export default router

Access the user with `useAuth`

Use the useAuth composable in any component:

src/views/DashboardView.vue

<template>
  <div>
    <h1>Welcome, {{ user?.name }}!</h1>
    <button @click="signOut">Sign out</button>
  </div>
</template>

<script setup lang="ts">
import { useAuth } from '@hellojohn/vue'

const { user, signOut } = useAuth()
</script>

Add a UserButton

Drop the <UserButton> anywhere to show the signed-in user with a sign-out menu:

src/components/Navbar.vue

<template>
  <nav class="flex items-center justify-between p-4">
    <span class="font-semibold">My App</span>
    <UserButton />
  </nav>
</template>

<script setup lang="ts">
import { UserButton } from '@hellojohn/vue'
</script>

Verify it works

Start your dev server: npm run dev
Visit /sign-in — you should see the HelloJohn sign-in form
Create an account and sign in
Visit /dashboard — unauthenticated users are redirected to /sign-in

Quickstart — Vue

Install the SDK

Register the plugin

Protect routes with a navigation guard

Access the user with `useAuth`

Add a UserButton

Verify it works

Next steps

On this page