Elegant Laravel Logo

Your Guide to Laravel Excellence

Laravel custom login and register Tutorial

Laravel custom login and register Tutorial

This guide will help you set up custom login and registration functionality in Laravel. We'll create a fully functional authentication system using Laravel's powerful features, focusing on custom user login and registration forms. This tutorial is beginner-friendly and assumes that you already have a fresh Laravel project connected to your database.

Views Setup

We will create the views for login, registration, and a simple home page. Create the Layout File Create a layout file at resources/views/index.blade.php:

		<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <title>Login - Laravel 11</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"
        />
    </head>

    <body>
        @yield('content')

        <script
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"
        ></script>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

Login Page

Create the Login View Create a login view at resources/views/login.blade.php:



@extends('index')
@section('content')

    <div class="h-100 d-flex align-items-center justify-content-center" style="height: 100vh!important;">
        <main class="form-signin w-25 m-auto bg-body-tertiary p-5" style="width: 60vh!important;">
            <form action="{{ route('login.authenticate') }}" method="POST">
                @csrf
                <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
                @if (Session::has('error'))
                    <div class="message mb-2 text-danger">{{ Session::get('error') }}</div>
                @endif
                <div class="form-floating mb-3">
                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                        id="email" placeholder="email">
                    <label for="email">Email address</label>
                    @error('email')
                        <div class="message mb-2 text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-floating mb-3">
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                        id="password" placeholder="password">
                    <label for="password">Password</label>
                    @error('password')
                        <div class="message mb-2 text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-check text-start my-3">
                    <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                        Remember me
                    </label>
                </div>
                <button class="btn btn-primary w-100 py-2" type="submit">{{ __('Sign in') }}</button>
                <p class="text-center my-4">OR</p>
                <a href="{{ route('register') }}" class="btn btn-primary py-2 w-100">{{ __('Sign up') }}</a>
            </form>
        </main>
    </div>

Registration View

Create the Registration View Create a registration view at resources/views/register.blade.php:

@extends('index')

@section('content')

    <div class="h-100 d-flex align-items-center justify-content-center" style="height: 100vh!important;">
        <main class="form-signin m-auto bg-body-tertiary p-5" style="width: 60vh!important;">
            <form action="{{ route('register.authenticate') }}" method="POST">
                @csrf
                <h1 class="h3 mb-3 fw-normal">Please sign up</h1>
                <div class="form-floating mb-3">
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                        id="name" placeholder="name">
                    <label for="name">Name</label>
                    @error('name')
                        <div class="message mb-2 text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-floating mb-3">
                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                        id="email" placeholder="email">
                    <label for="email">Email address</label>
                    @error('email')
                        <div class="message mb-2 text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-floating mb-3">
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                        id="password" placeholder="password">
                    <label for="password">Password</label>
                    @error('password')
                        <div class="message mb-2 text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <button class="btn btn-primary w-100 py-2" type="submit">{{ __('Sign up') }}</button>
                <p class="text-center my-4">OR</p>
                <a href="{{ route('login') }}" class="btn btn-primary py-2 w-100">{{ __('Sign in') }}</a>
            </form>
        </main>
    </div>

@endsection

Creating Controller

php artisan make:controller LoginController

php artisan make:controller RegisterController

Routes Setup

Define the routes for these controllers in routes/web.php:

Route::middleware('guest')->group(function () {

    Route::get('/login', [LoginController::class, 'login'])->name('login');
    Route::get('/register', [RegisterController::class, 'register'])->name('register');
    Route::post('/login/authenticate', [LoginController::class, 'authenticate'])->name('login.authenticate');
    Route::post('/register/authenticate', [RegisterController::class, 'store'])->name('register.authenticate');

});

Route::middleware('auth')->group(function () {

    Route::view('/home', 'home')->name('home');
    Route::get('/logout',  [LogoutController::class, 'logout'])->name('logout');

});

Controller Setup

Now lets finalize our code, goto your controllers. Goto your App\Http\Controllers\RegisterController

public function register()
{
    return view('register');
}

public function store(Request $request)
{
    $request->validate([
        'name' => ['required', 'string', 'min:3', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users,email'],
        'password' => ['required', 'min:6']
    ]);

    $user = User::create([
        'name' => $request->name,
        'email' =>  $request->email,
        'password' =>  Hash::make($request->password),
    ]);
    Auth::login($user);
    return redirect()->route('home');
}

Goto your App\Http\Controllers\LoginController

public function login()
{
    return view('login');
}

public function authenticate(Request $request)
{
    $credentials = $request->validate([
        'email' => 'required',
        'password' => 'required',
    ]);

    $authenticated = Auth::attempt($credentials);
    if (!$authenticated) {
        Session::flash('error', "Credentials does not match our record.");
        return Redirect::back();
    } else {
        return redirect()->route('home');
    }
}

Goto your App\Http\Controllers\LogoutController

public function logout()
{
    Session::flush();
    Auth::logout();
    return redirect()->route('login');
}
esc to close