January 22, 2025 - David Oyinbo

Auth module for Nuxt server apps

Authentication module for Nuxt 3 apps: Local login, GitHub/Google providers, token handling, route/global middlewares, and a small set of composables.

TypeScriptNuxt 3AuthLibraryNPM

NPM Package

GitHub Repo

Overview

Supports Local auth (login/logout/user/refresh), GitHub and Google providers, token persistence (cookies), redirects, $authFetch client, and route/global middlewares. Ships with TypeScript types and works in server apps.

Highlights

Providers

Local auth (login, logout, user, refresh)
GitHub & Google OAuth
Configurable endpoints and scopes

Middlewares + Tokens

Route and global middlewares (auth, auth-guest)
Cookie-based tokens with max age and token type
Redirects for logged-in/out states

Minimal usage

nuxt.config.tsts

export default defineNuxtConfig({
  modules: ["@workmate/nuxt-auth"],
  auth: {
    apiClient: {
      baseURL: "http://localhost:8080/api/v1", // set to your backend base URL
    },
    providers: {
      local: {
        endpoints: {
          signIn: {
            path: "/api/auth/login/password",
            method: "POST",
            tokenKey: "token",
            refreshTokenKey: "refresh_token",
            body: { principal: "email_address", password: "password" },
          },
          user: { path: "/api/auth/user", userKey: "user" },
        },
      },
    },
  },
});

// In a component/composable
const { login, loggedIn } = useAuth();
await login("local", { principal, password });

// Authenticated fetch helpers
// 1) useAuthFetch: composable that behaves like useFetch but sends the auth header
const { data: me } = await useAuthFetch("/api/auth/user");

// 2) $authFetch: $fetch-style helper that sends the auth header
const { $authFetch } = useNuxtApp();
await $authFetch("/api/protected");