Vue Auth Plugin

Simple authentication plugin for Vue 3, Vue router and Vuetify with built-in:

• Login page
• OIDC callback handling
• Route protection
• Redirect after login/logout

Install

npm install @jtekt/vuetify-auth

Requirements

• Vue 3
• Vue Router
• Vuetify 3+

This plugin uses Vuetify components internally (login page), so Vuetify must be installed and registered in your app.

Setup

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import { createAuthPlugin } from "@jtekt/vuetify-auth";
import { createVuetify } from "vuetify";
import "vuetify/styles";

const vuetify = createVuetify();

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: HomeView }, // protected
    { path: "/about", component: AboutView, meta: { public: true } }, // public
  ],
});

const auth = createAuthPlugin(
  {
    oidc: {
      clientId: import.meta.env.VITE_OIDC_CLIENT_ID,
      authority: import.meta.env.VITE_OIDC_AUTHORITY,
    },
    credentials: {
      loginEndpoint: import.meta.env.VITE_LOGIN_URL,
      resetPasswordEndpoint: import.meta.env.VITE_PASSWORD_RESET_URL,
    },
    enhancementEndpoint: import.meta.env.VITE_ENHANCEMENT_URL,
  },
  router
);

// register BEFORE router
app.use(vuetify).use(auth).use(router).mount("#app");

What the plugin does

• Adds routes:

  • /auth/login
  • /auth/oidc-callback

• Protects all routes by default

• Redirects unauthenticated users to login

• Redirects back after login using ?redirect=...

Public Routes

Mark routes as public using meta:

{ path: "/public", component: Page, meta: { public: true } }

Or in the page component with a route block:

<template>
  <h1>Public Page</h1>
  This is public to all users
</template>

<route lang="json">
{
  "meta": {
    "public": true
  }
}
</route>

You can change the key via:

createAuthPlugin({
  publicRouteMetaKey: "isPublic"
}, router)

And use like

{ path: "/public", component: Page, meta: { isPublic: true } }

Composable

import { useAuth } from "@jtekt/vuetify-auth";

const {
  session,
  isLoading,
  error,
  loginWithCredentials,
  loginWithOidc,
  logout,
  hasOidc,
  hasCredentials,
  loginUrl,
  resetPasswordUrl,
} = useAuth();

Notes

• Vuetify is required because the built-in auth pages use it
• If both OIDC and credentials are provided, both are available
• Login page is handled internally (you don’t need to create one)