jpskill.com
🛠️ 開発・MCP コミュニティ

nuxt-better-auth

Nuxt.js アプリで認証機能を実装する際に、ユーザーセッション管理やサーバー側の認証処理、ルーティング保護などを簡単に行えるように、@onmax/nuxt-better-auth ライブラリの機能を活用するSkill。

📜 元の英語説明(参考)

Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Nuxt.js アプリで認証機能を実装する際に、ユーザーセッション管理やサーバー側の認証処理、ルーティング保護などを簡単に行えるように、@onmax/nuxt-better-auth ライブラリの機能を活用するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nuxt-better-auth.zip https://jpskill.com/download/8749.zip && unzip -o nuxt-better-auth.zip && rm nuxt-better-auth.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/8749.zip -OutFile "$d\nuxt-better-auth.zip"; Expand-Archive "$d\nuxt-better-auth.zip" -DestinationPath $d -Force; ri "$d\nuxt-better-auth.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して nuxt-better-auth.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → nuxt-better-auth フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Nuxt Better Auth

Better Auth上に構築された Nuxt 4+ 用の認証モジュールです。コンポーザブル、サーバーユーティリティ、およびルート保護を提供します。

アルファステータス: このモジュールは現在アルファ版 (v0.0.2-alpha.19) であり、本番環境での使用は推奨されません。API は変更される可能性があります。

どのような時に使うか

  • @onmax/nuxt-better-auth のインストール/設定
  • ログイン/サインアップ/サインアウトフローの実装
  • ルートの保護 (クライアントおよびサーバー)
  • API ルートでのユーザーセッションへのアクセス
  • Better Auth プラグイン (admin, passkey, 2FA) の統合
  • NuxtHub を使用したデータベースのセットアップ
  • 外部認証バックエンド用の clientOnly モードの使用
  • @nuxtjs/i18n を使用した i18n サポートの追加

Nuxt パターンの場合: nuxt スキルを使用してください NuxtHub データベースの場合: nuxthub スキルを使用してください

利用可能なガイダンス

ファイル トピック
references/installation.md モジュールのセットアップ、環境変数、設定ファイル
references/client-auth.md useUserSession, signIn/signUp/signOut, BetterAuthState, safe redirects
references/server-auth.md serverAuth, getUserSession, requireUserSession
references/route-protection.md routeRules, definePageMeta, middleware
references/plugins.md Better Auth プラグイン (admin, passkey, 2FA)
references/database.md NuxtHub 統合、Drizzle スキーマ、FK を持つカスタムテーブル
references/client-only.md 外部認証バックエンド、clientOnly モード、CORS
references/types.md AuthUser, AuthSession, 型拡張

ファイルのロード

タスクに基づいて、これらの参照ファイルのロードを検討してください:

すべてのファイルを一度にロードしないでください。 現在のタスクに関連するもののみをロードしてください。

主要な概念

概念 説明
useUserSession() クライアントコンポーザブル - ユーザー、セッション、loggedIn、signIn/Out メソッド
requireUserSession() サーバーヘルパー - 認証されていない場合、401/403 をスローします
auth ルートモード 'user', 'guest', { user: {...} }, または false
serverAuth() サーバールートで Better Auth インスタンスを取得します

クイックリファレンス

// Client: useUserSession()
const { user, loggedIn, signIn, signOut } = useUserSession()
await signIn.email({ email, password }, { onSuccess: () => navigateTo('/') })
// Server: requireUserSession()
const { user } = await requireUserSession(event, { user: { role: 'admin' } })
// nuxt.config.ts: Route protection
routeRules: {
  '/admin/**': { auth: { user: { role: 'admin' } } },
  '/login': { auth: 'guest' },
  '/app/**': { auth: 'user' }
}

リソース

トークン効率: メインスキル ~300 トークン、各サブファイル ~800-1200 トークン

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Nuxt Better Auth

Authentication module for Nuxt 4+ built on Better Auth. Provides composables, server utilities, and route protection.

Alpha Status: This module is currently in alpha (v0.0.2-alpha.19) and not recommended for production use. APIs may change.

When to Use

  • Installing/configuring @onmax/nuxt-better-auth
  • Implementing login/signup/signout flows
  • Protecting routes (client and server)
  • Accessing user session in API routes
  • Integrating Better Auth plugins (admin, passkey, 2FA)
  • Setting up database with NuxtHub
  • Using clientOnly mode for external auth backends
  • Adding i18n support with @nuxtjs/i18n

For Nuxt patterns: use nuxt skill For NuxtHub database: use nuxthub skill

Available Guidance

File Topics
references/installation.md Module setup, env vars, config files
references/client-auth.md useUserSession, signIn/signUp/signOut, BetterAuthState, safe redirects
references/server-auth.md serverAuth, getUserSession, requireUserSession
references/route-protection.md routeRules, definePageMeta, middleware
references/plugins.md Better Auth plugins (admin, passkey, 2FA)
references/database.md NuxtHub integration, Drizzle schema, custom tables with FKs
references/client-only.md External auth backend, clientOnly mode, CORS
references/types.md AuthUser, AuthSession, type augmentation

Loading Files

Consider loading these reference files based on your task:

DO NOT load all files at once. Load only what's relevant to your current task.

Key Concepts

Concept Description
useUserSession() Client composable - user, session, loggedIn, signIn/Out methods
requireUserSession() Server helper - throws 401/403 if not authenticated
auth route mode 'user', 'guest', { user: {...} }, or false
serverAuth() Get Better Auth instance in server routes

Quick Reference

// Client: useUserSession()
const { user, loggedIn, signIn, signOut } = useUserSession()
await signIn.email({ email, password }, { onSuccess: () => navigateTo('/') })
// Server: requireUserSession()
const { user } = await requireUserSession(event, { user: { role: 'admin' } })
// nuxt.config.ts: Route protection
routeRules: {
  '/admin/**': { auth: { user: { role: 'admin' } } },
  '/login': { auth: 'guest' },
  '/app/**': { auth: 'user' }
}

Resources

Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens