Nuxt Nation カンファレンス開催決定!11月12日〜13日、ご参加をお待ちしております。

nuxt-fortify
nuxt-fortify

Laravel FortifyとSanctumをNuxtで利用する

🎉 Nuxt Laravel FortifyおよびSanctumモジュール

npm versionnpm downloadsLicenseNuxt

このNuxtモジュールは、NuxtとLaravel FortifyおよびSanctumをSSRフレンドリーな方法でシームレスに統合し、豊富な認証機能を提供します。このモジュールを使用することで、Laravel Fortifyの機能を活用し、APIトークンとSPA Cookieベースの認証の両方を実行できます。

🚀 機能

  • ユーザー登録 📋
  • パスワードのリセット 🔄
  • メールアドレス確認 📧
  • プロフィール情報の更新 ✏️
  • パスワードの更新 🔐
  • 二要素認証 🔒

🛠️ インストールと設定

💡注意: Laravel FortifyLaravel Sanctum、およびfortify-sanctumパッケージをバックエンドのLaravelアプリケーションにインストールして設定する必要があります。fortify-sanctumパッケージは、Laravel Fortifyの認証機能をLaravel Sanctumと容易に統合します。


nuxt-fortifyモジュールをNuxtプロジェクトに追加します。

npx nuxi@latest module add nuxt-fortify

💻 Nuxt設定

nuxt.config.jsにモジュールをインストールして設定することで、Nuxtプロジェクトに追加します。

// nuxt.config.js
export default {
  modules: [
    'nuxt-fortify',
  ],
  nuxtFortify: {
    baseUrl: 'https://127.0.0.1:3000/api',
    origin: 'https://127.0.0.1:3000',
    authMode: 'cookie',
    authHome: '/dashboard',
    endpoints: {
      csrf: '/sanctum/csrf-cookie',
      user: '/user',
      // other endpoints...
    },
    features: {
        registration: true,
        resetPasswords: true,
        twoFactorAuthentication: true,
      // other features...
    }
    // other configurations...
  }
}

📜 設定

キーデータ型デフォルト値必須
baseUrl文字列https://127.0.0.1:3000/apiはい
authMode文字列cookieはい
loginRouteエンドポイント/loginいいえ
authHomeエンドポイント/homeいいえ
cookieKey文字列XSRF-TOKENいいえ
cookieHeader文字列X-XSRF-TOKENいいえ
tokenStorageKey文字列API-TOKENいいえ
endpoints.csrfエンドポイント/sanctum/csrf-cookieいいえ
endpoints.loginエンドポイント/loginいいえ
endpoints.logoutエンドポイント/logoutいいえ
endpoints.userエンドポイント/userいいえ
endpoints.tfa.enableエンドポイント/user/two-factor-authenticationいいえ
endpoints.tfa.disableエンドポイント/user/two-factor-authenticationいいえ
endpoints.tfa.codeエンドポイント/user/two-factor-qr-codeいいえ
endpoints.tfa.confirmエンドポイント/user/confirmed-two-factor-authenticationいいえ
endpoints.tfa.recoveryCodeエンドポイント/user/two-factor-recovery-codesいいえ
endpoints.tfa.challengeエンドポイント/two-factor-challengeいいえ
endpoints.registerエンドポイント/registerいいえ
endpoints.resetPasswordエンドポイント/forgot-passwordいいえ
endpoints.updatePasswordエンドポイント/reset-passwordいいえ
endpoints.confirmPasswordエンドポイント/user/confirm-passwordいいえ
endpoints.resendEmailVerificationLinkエンドポイント/email/verification-notificationいいえ
intendedRedirectブール値trueいいえ
features.registrationブール値trueいいえ
features.resetPasswordsブール値trueいいえ
features.emailVerificationブール値trueいいえ
features.updateProfileInformationブール値trueいいえ
features.updatePasswordsブール値trueいいえ
features.twoFactorAuthenticationブール値trueいいえ
tfaRouteエンドポイント/two-factor-authenticationいいえ
logLevel数値1いいえ
origin文字列https://127.0.0.1:3000はい

🌐 エンドポイント設定

エンドポイントキーパスリクエストメソッド
csrf/sanctum/csrf-cookiePOST
login/loginPOST
logout/logoutPOST
user/userPOST
tfa.enable/user/two-factor-authenticationPOST
tfa.disable/user/two-factor-authenticationDELETE
tfa.code/user/two-factor-qr-codeGET
tfa.confirm/user/confirmed-two-factor-authenticationPOST
tfa.recoveryCode/user/two-factor-recovery-codesGET
tfa.challenge/two-factor-challengePOST
register/registerPOST
resetPassword/forgot-passwordPOST
updatePassword/reset-passwordPOST
confirmPassword/user/confirm-passwordPOST
resendEmailVerificationLink/email/verification-notificationPOST

これらの手順と設定に従うことで、Laravel FortifyとSanctumを完全に統合したNuxtアプリケーションを構築し、堅牢な認証ソリューションを実現できます。🚀

🤝 コントリビューション

このモジュールを強化するためのコントリビューションを歓迎します。コントリビューションの手順は以下のとおりです。

  1. リポジトリのフォーク:GitHubでこのリポジトリをフォークします。
  2. フォークのクローン:フォークしたリポジトリをローカルマシンにクローンします。
    git clone https://github.com/dev-charles15531/nuxt-forify.git
    cd nuxt-fortify
    
  3. ブランチの作成:機能追加やバグ修正のための新しいブランチを作成します。
    git checkout -b feature-or-bugfix-name
    
  4. 変更の実施:機能を追加またはバグを修正します。コードがプロジェクトのコーディング規約に従っており、すべてのテストに合格していることを確認してください。
  5. 変更のコミット:明確で簡潔なコミットメッセージで変更をコミットします。
    git add .
    git commit -m "Description of the feature or fix"
    
  6. フォークへのプッシュ:変更をフォークしたリポジトリにプッシュします。
    git push origin feature-or-bugfix-name
    
  7. プルリクエストの送信:メインリポジトリにプルリクエストを送信します。変更内容と、対処する問題または機能を明確に説明してください。

📝 ガイドライン

  • プロジェクトで使用されているコーディングスタイルに従ってください。
  • 明確で簡潔なコミットメッセージを書いてください。
  • コードがすべてのテストに合格し、新しい問題が発生していないことを確認してください。
  • 変更によってモジュールの使用方法または設定方法が影響を受ける場合は、ドキュメントを更新してください。

📧 お問い合わせ

ご質問やヘルプが必要な場合は、お気軽にissueを作成するか、このリポジトリのメンテナーにお問い合わせください。

コントリビューションありがとうございます!皆様のご尽力に感謝いたします。🙌