auth-cms

Nuxt 3 module for OAuth 2.0 client management and Social Login (Google, Line)

Features

• OAuth 2.0 Client CRUD management
• Social Login configuration (Google, Line)
• OAuth consent/authorize screen
• Auth composables (login, logout, user state, MFA verification)
• Auth route middleware
• Auto-initialized auth state via Nuxt plugin
• Fully typed with TypeScript

Installation

npm i auth-cms

Setup

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['auth-cms'],

  authCms: {
    baseURL: '/api',              // API base path (default: '/api')
    tokenKey: '_my_info_',         // localStorage key for token (default: '_my_info_')
    tokenExpiryKey: '_token_expiry_', // localStorage key for expiry
    apiKey: '',                    // x-api-key header value (if needed)
    loginPath: '/login',           // redirect path when unauthenticated
    homePath: '/',                 // redirect path after login
  },
})

Usage

Auth Middleware

Protect routes by adding middleware:

// pages/admin.vue
definePageMeta({
  middleware: 'auth-cms',
})

Auth Composable

<script setup lang="ts">
const { user, isAuthenticated, login, logout, fetchUser } = useAuth()

async function handleLogin() {
  const res = await login('username', 'password')
  if (res.mfaRequired) {
    // Show OTP input, then call verifyMfa
    await verifyMfa(res.mfaToken, '123456')
  }
  await fetchUser()
}
</script>

OAuth Clients Manager Component

The OAuthClientsManager component provides the full CRUD UI with search, stats, and social login config.

<template>
  <AuthCmsOAuthClientsManager @success="onSuccess" @error="onError" />
</template>

<script setup lang="ts">
function onSuccess(msg: string) { console.log(msg) }
function onError(msg: string) { console.error(msg) }
</script>

Social Login Config Component

<template>
  <AuthCmsSocialLoginConfig @success="onSuccess" @error="onError" />
</template>

OAuth Authorize Screen

<template>
  <AuthCmsOAuthAuthorize />
</template>

API Endpoints Expected

The module expects these backend endpoints (under baseURL):

| Method | Endpoint | Purpose | |--------|----------|---------| | POST | /auth/login | Login | | POST | /mfa/verify-login | MFA OTP verification | | GET | /user/data | Fetch current user | | GET | /oauth/clients | List OAuth clients | | POST | /oauth/clients | Create client | | PUT | /oauth/clients/:id | Update client | | DELETE | /oauth/clients/:id | Delete client | | POST | /oauth/clients/:id/regenerate-secret | Regenerate secret | | GET | /oauth/social/config | Get social config | | PUT | /oauth/social/config/google | Save Google config | | PUT | /oauth/social/config/line | Save Line config | | POST | /oauth/authorize/consent | Submit consent |

Requirements

• Nuxt 3.15+
• Tailwind CSS (for component styling)