@jtekt/vuetify-auth

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(
  {
    strategies: {
      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,
      },
    },
  },
  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 } }

Identity resolution

Each strategy resolves the authenticated user's id and name from the profile returned by the auth response. Configure which fields to use via identity:

strategies: {
  oidc: {
    clientId: "...",
    authority: "...",
    // defaults: identifierLookupField: "sub", nameLookupField: "name", source: "auth"
    identity: {
      identifierLookupField: "sub,preferred_username", // comma-separated, tried in order
      nameLookupField: "name,display_name",
    },
  },
  credentials: {
    loginEndpoint: "...",
    // defaults: identifierLookupField: "_id", nameLookupField: "name", source: "auth"
    identity: {
      identifierLookupField: "_id",
      nameLookupField: "name",
    },
  },
}

Both fields support dot-notation for nested values (e.g. "user.profile.id").

Enrichment

Each strategy can optionally call an enrichment endpoint after authentication. The response is stored as session.user.profile.

strategies: {
  credentials: {
    loginEndpoint: "...",
    enrichment: {
      endpoint: "/api/auth/me",
    },
    // Resolve identity from the enrichment response instead of the login response
    identity: {
      identifierLookupField: "employee_number",
      nameLookupField: "name",
      source: "enrichment",
    },
  },
}

When identity.source is "enrichment", both identifierLookupField and nameLookupField are resolved from the enrichment response. Requires enrichment to be configured.

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)