Nuxt Laravel Auth

A Nuxt module is used to manage authentication and data from Laravel. Features include full sanctum and passport support with support for separate auth and data apps which can be used when running a separate SSO application.

• ✨  Release Notes

Features

• Sanctum Auth support
• Socialite Social Auth support
• Supports seperate data and SSO apps
• Included pagination handler
• Laravel Error Handler
• SSR support
• Full Typescript support

Quick Setup

1. Install the module to your Nuxt application with one command:

npx nuxi module add auth-laravel

2.Add variables to .env or nuxt.config

.env
LARAVEL_BASE_URL='http://localhost:8000'
// other config options listed below

or

nuxt.config.ts
laravel {
    baseUrl: 'http://localhost:8000'
    // other config options listed below
}

That's it! You can now use Nuxt Laravel Auth in your Nuxt app ✨

See below for a full list of config setting that are acepted by Nuxt Laravel auth

Using the Module

Here is a list of all of the built in composeables for this module:

useLaravelAuth

Login with email method

const { handleLoginWithEmail } = useLaravelAuth();
const handleFormSubmit = () => {
  handleLoginWithEmail({
    email: "[email protected]",
    password: "mypassword",
    remember: false,
  });
};

Register with email method

const { handleRegisterWithEmail } = useLaravelAuth();
const handleFormSubmit = () => {
  handleRegisterWithEmail({
    name: "John Doe",
    email: "[email protected]",
    password: "mypassword",
    password_confirmation: "mypassword",
  });
};

Logout from account method

const { handleLogout } = useLaravelAuth();
const handleLogoutButtonClick = () => {
  handleLogout();
};

Forgot Password method

const { handleForgotPassword } = useLaravelAuth();
const handleFormSubmit = () => {
  handleRegisterWithEmail({
    email: "[email protected]",
  });
};

Reset Password Method

const { handleResetPassword } = useLaravelAuth();
const handleFormSubmit = () => {
  handleResetPassword({
    token: route.params.token,
    email: route.query.email,
    password: "mypassword",
    password_confirmation: "mypassword",
  });
};

Social Login

const { handleSocialAuth } = useLaravelAuth();
const handleFormSubmit = () => {
  handleSocialAuth("google");
};

useLaravelUser

Get the current user

const user = useLaravelUser<T>(); // We can pass T as a custom user type when retuning extra data from Laravel

useLaravelRequest && useAsyncLaravelRequest

Basic Laravel request example

const { data } = await useLaravelRequest<LaravelResponse<Team[]>>(
  "/api/teams", // endpoint
  {} // fetch options
);

Async Laravel request example - using useAsyncData under the hood

const { data, laravelErrors, laravelMessage, error, status, refresh } =
  await useAsyncLaravelRequest<LaravelResponse<Team[]>>(
    "/api/teams", // endpoint
    "test", // key
    {} // fetch options
  );

useLaravelPagination

const pages = useLaravelPagination(total: number, perPage: number, currentPage: number)

Configuring the module

Here is a list of all the options that can be passed into the Nuxt Config or via the .env file.

Nuxt Config	env	type	default	Required
baseUrl	LARAVEL_URL	string		yes
CSRFurl	LARAVEL_CSRF_URL	string	/sanctum/csrf-cookie	no
cookieToken	LARAVEL_COOKIE_TOKEN	string	XSRF-TOKEN	no
requestToken	LARAVEL_REQUEST_TOKEN	string	X-XSRF-TOKEN	no
authBaseUrl	LARAVEL_AUTH_URL	string	baseUrl	no
authCSRFurl	LARAVEL_AUTH_CSRF_URL	string	CSRFurl	no
authCookieToken	LARAVEL_AUTH_COOKIE_TOKEN	string	cookieToken	no
authRequestToken	LARAVEL_AUTH_REQUEST_TOKEN	string	requestToken	no
authLoginUrl	LARAVEL_AUTH_LOGIN_URL	string	/login	no
authRegisterUrl	LARAVEL_AUTH_REGISTER_URL	string	/register	no
authLogoutUrl	LARAVEL_AUTH_LOGOUT_URL	string	/logout	no
authForgotPasswordUrl	LARAVEL_AUTH_FORGOT_PASSWORD_URL	string	/forgot-password	no
authResetPasswordUrl	LARAVEL_AUTH_RESET_PASSWORD_URL	string	/reset-password	no
authVerifyUrl	LARAVEL_AUTH_VERIFY_URL	string	/email/verify	no
authProviders.authGoogleUrl	LARAVEL_AUTH_GOOGLE_URL	string		no
authProviders.authAppleUrl	LARAVEL_AUTH_APPLE_URL	string		no
authProviders.authFacebookUrl	LARAVEL_AUTH_FACEBOOK_URL	string		no
authProviders.authTwitterUrl	LARAVEL_AUTH_TWITTER_URL	string		no
authProviders.authLinkedinUrl	LARAVEL_AUTH_LINKEDIN_URL	string		no
authProviders.authGithubUrl	LARAVEL_AUTH_GITHUB_URL	string		no
authProviders.authGitlabUrl	LARAVEL_AUTH_GITLAB_URL	string		no
authProviders.authBitbucketUrl	LARAVEL_AUTH_BITBUCKET_URL	string		no
authProviders.authSlackUrl	LARAVEL_AUTH_SLACK_URL	string		no

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release