Back to Docs
SDK

Vue 3 SDK (idenplane-vue)

Vue 3 integration with composables, router guards, and Nuxt 3 support. Built for the Composition API.

Key Features

useAuth, useUser, usePermissions composables
Vue Router navigation guard (createAuthGuard)
AuthProvider component
OAuth 2.0 + PKCE
Automatic token refresh
Role-based access control
Nuxt 3 compatible
TypeScript support

Requirements

  • Vue 3.3+
  • TypeScript 5+ (recommended)
  • Node.js 18+

Installation

npm install idenplane-vue

Plugin Setup

Register the Idenplane plugin in your Vue app. It creates one shared client and kicks off session restoration immediately.

// main.ts
import { createApp } from 'vue';
import { IdenplanePlugin } from 'idenplane-vue';
import App from './App.vue';

const app = createApp(App);

app.use(IdenplanePlugin, {
  url: 'https://auth.example.com',
  realm: 'my-realm',
  clientId: 'my-vue-app',
  redirectUri: window.location.origin + '/callback',
});

app.mount('#app');

useAuth Composable

The primary composable for authentication in your components — returns Refs for reactive state plus login/logout/getToken.

<script setup lang="ts">
import { useAuth } from 'idenplane-vue';

const {
  isAuthenticated,
  isLoading,
  user,
  login,
  logout,
} = useAuth();
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="isAuthenticated">
    <p>Welcome, {{ user?.name }}!</p>
    <p>Email: {{ user?.email }}</p>
    <button @click="logout()">Logout</button>
  </div>
  <div v-else>
    <button @click="login()">Sign In</button>
  </div>
</template>

usePermissions Composable

Role and permission checks live in a separate composable from useAuth.

<script setup lang="ts">
import { usePermissions } from 'idenplane-vue';

const { hasRole, hasPermission, roles } = usePermissions();
</script>

<template>
  <p v-if="hasRole('admin')">You are an admin</p>
</template>

Router Guard

Protect routes with createAuthGuard, registered once via router.beforeEach — not a per-route factory call.

// router.ts
import { createRouter, createWebHistory } from 'vue-router';
import { createAuthGuard } from 'idenplane-vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    {
      path: '/dashboard',
      component: () => import('./views/Dashboard.vue'),
      meta: { requiresAuth: true },
    },
    {
      path: '/admin',
      component: () => import('./views/Admin.vue'),
      meta: { requiresAuth: true, roles: ['admin'] },
    },
    {
      path: '/callback',
      component: () => import('./views/Callback.vue'),
    },
  ],
});

router.beforeEach(createAuthGuard({ loginRoute: '/login' }));

export default router;

Callback Handler

Handle the OAuth callback after login redirect via the raw client exposed on useAuth().

<!-- views/Callback.vue -->
<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuth } from 'idenplane-vue';

const router = useRouter();
const { client } = useAuth();

onMounted(async () => {
  await client.handleCallback();
  router.push('/dashboard');
});
</script>

<template>
  <div>Signing in...</div>
</template>

API Requests with Token

Use getToken() for authenticated API calls.

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useAuth } from 'idenplane-vue';

const { getToken } = useAuth();
const profile = ref(null);

onMounted(async () => {
  const res = await fetch('/api/profile', {
    headers: {
      Authorization: 'Bearer ' + getToken(),
    },
  });
  profile.value = await res.json();
});
</script>

AuthProvider Component

Optionally wrap your app with AuthProvider for scoped auth context.

<!-- App.vue -->
<script setup lang="ts">
import { AuthProvider } from 'idenplane-vue';
</script>

<template>
  <AuthProvider>
    <RouterView />
  </AuthProvider>
</template>

Nuxt 3 Integration

For Nuxt 3, use the plugin in a Nuxt plugin file.

// plugins/idenplane.client.ts
import { IdenplanePlugin } from 'idenplane-vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(IdenplanePlugin, {
    url: 'https://auth.example.com',
    realm: 'my-realm',
    clientId: 'my-nuxt-app',
    redirectUri: window.location.origin + '/callback',
  });
});

// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to) => {
  const { isAuthenticated, login } = useAuth();
  if (!isAuthenticated.value) {
    await login();
  }
});