​
Introduction

offers a complete authentication system out of the box. It is based on Laravel authentication system with some additions.

​
Update Password Rules

Go to HandleInertiaRequests.php, under share method and update password rules for your app.

By default, for production environment, password should be at least 8 characters long with at least one uppercase letter, one lowercase letter, one number, one symbol, and not compromised in a public password data breach leak. You can find all the available rules here.

For all other environments (development, testing, staging) it should be only 4 characters long without any other restrictions.

Password::defaults(function () {
    return $this->app->isProduction()
        ? Password::min(8)
            ->mixedCase()
            ->numbers()
            ->symbols()
            ->uncompromised()
        : Password::min(4);
});

​
Email verification

By default, all registered users (via email and password) must verify their emails before using the application. Email are verified by clicking the link sent in email after successful registration.

Unverified users can access some parts like name, email and password update, but should be restricted from using your services.

To prevent unverified users from access you can protect your routes with middleware. Go to routes/web.php and search for verified. You will see that settings, checkout and subscription routes are protected from unverified users. Add your new routes under same middleware to protect them.

Users registered with social media accounts are verified upon success.

​
Disable email verification

If you want to allow email registrations without verification, just remove the MustVerifyEmail contract from User model. Everything else can stay the same since verified middleware will always pass in this case, but it’s still recommended to remove the middleware from your routes.

​
Banned users

You can ban/unban your users (for example when they violate the terms, etc.). Banned users will not be able to login to application or register new account with same email address.

If you don’t want to use ban system, you can just totally ignore it, or remove the code relevant to bans.

You can ban users via admin panel in users datatable.

​
Layout

Authentication system consist of several components:

  • Login resources/js/Pages/Auth/Login.vue
  • Register resources/js/Pages/Auth/Register.vue
  • Email verification resources/js/Pages/Auth/VerifyEmail.vue
  • Forgot password resources/js/Pages/Auth/ForgotPassword.vue
  • Password reset resources/js/Pages/Auth/ResetPassword.vue

Each component is wrapped in resources/js/Pages/Auth/Partials/Wrapper.vue where you can customize the layout.

You can change the layout without updating the code.

Open your .env file and set AUTH_FORM_LAYOUT to centered, left or right.
Default layout is centered.

Centered layout displays just the form in the center of the page.

Left and right layout displays the form on the left or right side, along with some content and background image.

By default, placeholder image is used as the background image. You can easily update the image, remove it, change background color, add background gradient, etc. Just go to the Wrapper.vue component and search for bg-.

Wrapper accepts the header property. Header for login and register forms can be updated in AuthenticatedSessionController and RegisteredUserController controllers under method header().

You can pass an empty array if you don’t want to display header and description, or you can remove the description and display the title only.

Headers for other authentication forms are passed as header property in their controllers.

​
Labels

By default, form input labels are displayed above the input fields. If you want to hide labels, set AUTH_FORM_SHOW_LABELS to false in your .env file.

​
Name input on Register

By default, registration form contains input field for name. To remove the field from registration form, set AUTH_WITH_NAME_FIELD to false in your .env file.

​
Show/hide password

To enable password visibility toggle, pass the prop toggleable to Input component.

<Input type="password" v-model="form.password" required toggleable />

​
Social providers position

By default, social providers for login and registration are displayed below email and password. To display them at the top, set AUTH_FORM_SOCIAL_PROVIDERS_POSITION to top in your .env file.

​
Open as modals

By default, login and register forms will open as new pages /login and /register.

If you want to open them as modals, go to resources/js/Components/MainMenu.vue, and update buttons:

<Button type="button" variant="ghost" @click="authRef?.open()">
  {{ $t("Login") }}
</Button>
<Button type="button" @click="authRef?.open('register')">
  {{ $t("Sign up") }}
</Button>

For small devices, replace current buttons under SheetFooter with this:

<Button type="button" variant="outline" class="w-full" @click="authRef?.open()">
  {{ $t("Login") }}
</Button>
<Button type="button" class="w-full" @click="authRef?.open('register')">
  {{ $t("Sign up") }}
</Button>
AdministratorsSocial Login