Learn Nuxt with a Collection of 100+ Tips!

nuxt-fortify
nuxt-fortify

Use Laravel fortify and sanctum with Nuxt

๐ŸŽ‰ Nuxt Laravel Fortify and Sanctum Module

npm versionnpm downloadsLicenseNuxt

This Nuxt module seamlessly integrates Nuxt with Laravel Fortify and Sanctum in an SSR-friendly way, offering a rich set of authentication features. With this module, you can leverage Laravel Fortify's capabilities and perform both API Token and SPA cookie-based authentication.

๐Ÿš€ Features

  • Registration ๐Ÿ“‹
  • Reset Passwords ๐Ÿ”„
  • Email Verification ๐Ÿ“ง
  • Update Profile Information โœ๏ธ
  • Update Passwords ๐Ÿ”
  • Two-Factor Authentication ๐Ÿ”’

๐Ÿ› ๏ธ Installation and Configuration

๐Ÿ’กNotice: You need to install and setup Laravel Fortify, Laravel Sanctum, and fortify-sanctum package in your backend Laravel application. The fortify-sanctum package easily integrates Laravel Fortify's authentication features with Laravel Sanctum


Add nuxt-fortify module to your nuxt project

npx nuxi@latest module add nuxt-fortify

๐Ÿ’ป Nuxt Configuration

Add the module to your Nuxt project by installing it and configuring it in nuxt.config.js.

// nuxt.config.js
export default {
  modules: [
    'nuxt-fortify',
  ],
  nuxtFortify: {
    baseUrl: 'http://localhost:3000/api',
    origin: 'http://localhost: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...
  }
}

๐Ÿ“œ Configs

KeyData TypeDefault ValueRequired
baseUrlstringhttp://localhost:3000/apiYes
authModestringcookieYes
loginRouteendpoint/loginNo
authHomeendpoint/homeNo
cookieKeystringXSRF-TOKENNo
cookieHeaderstringX-XSRF-TOKENNo
tokenStorageKeystringAPI-TOKENNo
endpoints.csrfendpoint/sanctum/csrf-cookieNo
endpoints.loginendpoint/loginNo
endpoints.logoutendpoint/logoutNo
endpoints.userendpoint/userNo
endpoints.tfa.enableendpoint/user/two-factor-authenticationNo
endpoints.tfa.disableendpoint/user/two-factor-authenticationNo
endpoints.tfa.codeendpoint/user/two-factor-qr-codeNo
endpoints.tfa.confirmendpoint/user/confirmed-two-factor-authenticationNo
endpoints.tfa.recoveryCodeendpoint/user/two-factor-recovery-codesNo
endpoints.tfa.challengeendpoint/two-factor-challengeNo
endpoints.registerendpoint/registerNo
endpoints.resetPasswordendpoint/forgot-passwordNo
endpoints.updatePasswordendpoint/reset-passwordNo
endpoints.confirmPasswordendpoint/user/confirm-passwordNo
endpoints.resendEmailVerificationLinkendpoint/email/verification-notificationNo
intendedRedirectbooleantrueNo
features.registrationbooleantrueNo
features.resetPasswordsbooleantrueNo
features.emailVerificationbooleantrueNo
features.updateProfileInformationbooleantrueNo
features.updatePasswordsbooleantrueNo
features.twoFactorAuthenticationbooleantrueNo
tfaRouteendpoint/two-factor-authenticationNo
logLevelnumber1No
originstringhttp://localhost:3000Yes

๐ŸŒ Endpoints Configuration

Endpoint KeyPathRequest Method
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

By following these steps and configurations, you'll have a fully integrated Nuxt application with Laravel Fortify and Sanctum, delivering a robust authentication solution. ๐Ÿš€

๐Ÿค Contributing

We welcome contributions to enhance this module. Here are the steps to contribute:

  1. Fork the Repository: Create a fork of this repository on GitHub.
  2. Clone Your Fork: Clone your forked repository to your local machine.
    git clone https://github.com/dev-charles15531/nuxt-forify.git
    cd nuxt-fortify
    
  3. Create a Branch: Create a new branch for your feature or bug fix.
    git checkout -b feature-or-bugfix-name
    
  4. Make Changes: Implement your feature or bug fix. Ensure your code follows the project's coding standards and passes all tests.
  5. Commit Changes: Commit your changes with a clear and concise commit message.
    git add .
    git commit -m "Description of the feature or fix"
    
  6. Push to Your Fork: Push your changes to your forked repository.
    git push origin feature-or-bugfix-name
    
  7. Open a Pull Request: Open a pull request to the main repository. Provide a clear description of your changes and the problem or feature they address.

๐Ÿ“ Guidelines

  • Follow the coding style used in the project.
  • Write clear, concise commit messages.
  • Ensure your code passes all tests and does not introduce new issues.
  • Update documentation if your changes affect how the module is used or configured.

๐Ÿ“ง Contact

If you have any questions or need help, feel free to open an issue or contact the maintainer of this repository.

Thank you for contributing! Your efforts are greatly appreciated. ๐Ÿ™Œ