X Auth - Nuxt Authentication Layer

A reusable Nuxt layer providing comprehensive authentication functionality with Stack Auth integration.

Features

• 🔐 Multiple Auth Methods: Credentials, OAuth, Magic Link, OTP
• 🎨 Pre-built Components: Login, Signup, Password Reset forms
• 🧩 Composables: useXAuth, useXStackAuth for easy integration
• ⚙️ Configurable: Customizable redirects and feature toggles
• 🎯 TypeScript: Full TypeScript support with type definitions
• 🎨 Styled: Beautiful UI components with Tailwind CSS and Nuxt UI

Installation

npm install @xenterprises/nuxt-x-app

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ["@xenterprises/nuxt-x-app"],
});

Configuration

Configure the layer in your app.config.ts:

export default defineAppConfig({
  xAuth: {
    redirects: {
      login: "/auth/login",
      signup: "/auth/signup",
      afterLogin: "/",
      afterSignup: "/",
      afterLogout: "/auth/login",
    },
    features: {
      oauth: true,
      magicLink: true,
      otp: true,
      forgotPassword: true,
    },
  },
});

Environment Variables

Required Stack Auth configuration:

STACK_PROJECT_ID=your_project_id
STACK_PUBLISHABLE_CLIENT_KEY=your_publishable_key

Usage

Basic Authentication

<script setup>
const { login, signup, logout, user, isLoading } = useXAuth();

// Login
await login("[email protected]", "password");

// Signup
await signup("[email protected]", "password");

// Logout
await logout();
</script>

Available Pages

The layer provides these auth pages automatically:

• /auth/login - Login form
• /auth/signup - Signup form
• /auth/forgot-password - Password reset
• /auth/magic-link - Magic link authentication
• /auth/otp - OTP verification
• /auth/logout - Logout handler

Available Components

<template>
  <!-- Use the auth components directly -->
  <XAuthLogin />
  <XAuthSignup />
  <XAuthForgotPassword />
  <XAuthMagicLink />
  <XAuthOtp />
  <XAuthOAuthButton provider="google" />
</template>

Composables

useXAuth()

Main authentication composable with simplified interface:

const {
  // State
  user,
  isLoading,
  isAuthenticated,

  // Methods
  login,
  signup,
  logout,
  forgotPassword,
  loginWithProvider,
  sendOtp,
  verifyOtp,
  sendMagicLink,
} = useXAuth();

useXStackAuth()

Lower-level Stack Auth integration:

const {
  stackClient,
  currentUser,
  signInWithCredential,
  signUpWithCredential,
  signOut,
  getAuthHeaders,
} = useXStackAuth();

Development

The .playground directory contains a test application for developing the layer:

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Publishing

npm publish --access public

License

MIT