Tutorial
Vue 3 Integration
Add Idenplane authentication to a Vue 3 application with the official plugin, composables, and router navigation guards.
Installation
Terminal
npm install idenplane-vuePlugin Setup
Register the Idenplane Vue plugin in main.ts before mounting your app.
src/main.ts
import { createApp } from 'vue';
import router from './router';
import { IdenplanePlugin } from 'idenplane-vue';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.use(IdenplanePlugin, {
url: import.meta.env.VITE_IDENPLANE_URL,
realm: import.meta.env.VITE_IDENPLANE_REALM,
clientId: import.meta.env.VITE_IDENPLANE_CLIENT_ID,
redirectUri: window.location.origin + '/callback',
});
app.mount('#app');useAuth Composable
Access authentication state and actions in any component using useAuth(). It returns Vue Refs, so state auto-unwraps in templates.
src/components/UserMenu.vue
<script setup lang="ts">
import { useAuth } from 'idenplane-vue';
const { user, isAuthenticated, isLoading, login, logout } = useAuth();
</script>
<template>
<div v-if="isLoading">Authenticating…</div>
<div v-else-if="isAuthenticated" class="user-menu">
<img :src="user?.picture" :alt="user?.name" />
<span>{{ user?.email }}</span>
<button @click="logout()">Sign Out</button>
</div>
<button v-else @click="login()">Sign In</button>
</template>Router Navigation Guards
Register createAuthGuard once via router.beforeEach — it reads meta.requiresAuth and meta.roles on each route.
src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import { createAuthGuard } from 'idenplane-vue';
const 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'] },
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// Registered once — createAuthGuard reads each route's own meta fields,
// so there's no per-route beforeEnter wiring needed.
router.beforeEach(createAuthGuard({ loginRoute: '/' }));
export default router;