25-May-2024
.
Admin
Hi, Dev
In this tutorial, I'll guide you through the process of creating a custom user login and registration page in a Laravel 11 application.
Laravel offers various packages for authentication scaffolding, such as Jetstream, Breeze, Fortify, and UI. However, there are times when we need to build custom login, registration, dashboard, and logout functionalities to implement our unique logic and design. In this tutorial, we will use the Laravel Auth facade to create custom user authentication scaffolding step by step.
So, let's follow the following steps to complete a simple example:
you can see below preview of the pages:
Login Page:
Register Page:
Dashboard Page::
Step for Laravel 11 Custom Auth Login and Registration Tutorial
Step 1: Install Laravel 11
Step 2: Create Routes
Step 3: Create Controller
Step 4: Create Blade Files
Run Laravel App
Step 1: Install Laravel 11
This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Create Routes
In this step, we need to create a custom routes for login, register, home, and logout. So open your routes/web.php file and add the following routes.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\AuthController;
Route::get('/', function () {
return view('welcome');
});
Route::get('login', [AuthController::class, 'index'])->name('login');
Route::post('post-login', [AuthController::class, 'postLogin'])->name('login.post');
Route::get('registration', [AuthController::class, 'registration'])->name('register');
Route::post('post-registration', [AuthController::class, 'postRegistration'])->name('register.post');
Route::get('dashboard', [AuthController::class, 'dashboard']);
Route::get('logout', [AuthController::class, 'logout'])->name('logout');
Step 3: Create Controller
In this step, we will create a new AuthController controller with index(), registration(), postLogin(), postRegistration(), dashboard(), create(), and logout() methods.
app/Http/Controllers/Auth/AuthController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Session;
use App\Models\User;
use Hash;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
class AuthController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index(): View
{
return view('auth.login');
}
/**
* Write code on Method
*
* @return response()
*/
public function registration(): View
{
return view('auth.registration');
}
/**
* Write code on Method
*
* @return response()
*/
public function postLogin(Request $request): RedirectResponse
{
$request->validate([
'email' => 'required',
'password' => 'required',
]);
$credentials = $request->only('email', 'password');
if (Auth::attempt($credentials)) {
return redirect()->intended('dashboard')
->withSuccess('You have Successfully loggedin');
}
return redirect("login")->withError('Oppes! You have entered invalid credentials');
}
/**
* Write code on Method
*
* @return response()
*/
public function postRegistration(Request $request): RedirectResponse
{
$request->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required|min:6',
]);
$data = $request->all();
$user = $this->create($data);
Auth::login($user);
return redirect("dashboard")->withSuccess('Great! You have Successfully loggedin');
}
/**
* Write code on Method
*
* @return response()
*/
public function dashboard()
{
if(Auth::check()){
return view('dashboard');
}
return redirect("login")->withSuccess('Opps! You do not have access');
}
/**
* Write code on Method
*
* @return response()
*/
public function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password'])
]);
}
/**
* Write code on Method
*
* @return response()
*/
public function logout(): RedirectResponse
{
Session::flush();
Auth::logout();
return Redirect('login');
}
}
Step 4: Create Blade Files
Here, we need to create blade files for login, register, and home page. So let's create the files one by one:
resources/views/auth/login.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 11 Custom User Login Page - NiceSnippets.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style type="text/css">
body{
background: #F8F9FA;
}
</style>
</head>
<body>
<section class="bg-light py-3 py-md-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5 col-xxl-4">
<div class="card border border-light-subtle rounded-3 shadow-sm mt-5">
<div class="card-body p-3 p-md-4 p-xl-5">
<div class="text-center mb-3">
<a href="#!">
<img src="https://www.NiceSnippets.com/assets/images/footer-logo-2.png" alt="BootstrapBrain Logo" width="250">
</a>
</div>
<h2 class="fs-6 fw-normal text-center text-secondary mb-4">Sign in to your account</h2>
<form method="POST" action="{{ route('login.post') }}">
@csrf
@session('error')
<div class="alert alert-danger" role="alert">
{{ $value }}
</div>
@endsession
<div class="row gy-2 overflow-hidden">
<div class="col-12">
<div class="form-floating mb-3">
<input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" placeholder="name@example.com" required>
<label for="email" class="form-label">{{ __('Email Address') }}</label>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" id="password" value="" placeholder="Password" required>
<label for="password" class="form-label">{{ __('Password') }}</label>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-12">
<div class="d-flex gap-2 justify-content-between">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" name="rememberMe" id="rememberMe">
<label class="form-check-label text-secondary" for="rememberMe">
Keep me logged in
</label>
</div>
<a href="#!" class="link-primary text-decoration-none">{{ __('forgot password?') }}</a>
</div>
</div>
<div class="col-12">
<div class="d-grid my-3">
<button class="btn btn-primary btn-lg" type="submit">{{ __('Login') }}</button>
</div>
</div>
<div class="col-12">
<p class="m-0 text-secondary text-center">Don't have an account? <a href="{{ route('register') }}" class="link-primary text-decoration-none">Sign up</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
resources/views/auth/registration.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 11 Custom User Register Page - NiceSnippets.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style type="text/css">
body{
background: #F8F9FA;
}
</style>
</head>
<body>
<section class="bg-light py-3 py-md-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5 col-xxl-4">
<div class="card border border-light-subtle rounded-3 shadow-sm">
<div class="card-body p-3 p-md-4 p-xl-5">
<div class="text-center mb-3">
<a href="#!">
<img src="https://www.NiceSnippets.com/assets/images/footer-logo-2.png" alt="BootstrapBrain Logo" width="250">
</a>
</div>
<h2 class="fs-6 fw-normal text-center text-secondary mb-4">Sign up to your account</h2>
<form method="POST" action="{{ route('register.post') }}">
@csrf
@session('error')
<div class="alert alert-danger" role="alert">
{{ $value }}
</div>
@endsession
<div class="row gy-2 overflow-hidden">
<div class="col-12">
<div class="form-floating mb-3">
<input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="name" placeholder="name@example.com" required>
<label for="name" class="form-label">{{ __('Name') }}</label>
</div>
@error('name')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" placeholder="name@example.com" required>
<label for="email" class="form-label">{{ __('Email Address') }}</label>
</div>
@error('email')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" id="password" value="" placeholder="Password" required>
<label for="password" class="form-label">{{ __('Password') }}</label>
</div>
@error('password')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" id="password_confirmation" value="" placeholder="password_confirmation" required>
<label for="password_confirmation" class="form-label">{{ __('Confirm Password') }}</label>
</div>
@error('password_confirmation')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-12">
<div class="d-grid my-3">
<button class="btn btn-primary btn-lg" type="submit">{{ __('Register') }}</button>
</div>
</div>
<div class="col-12">
<p class="m-0 text-secondary text-center">Have an account? <a href="{{ route('login') }}" class="link-primary text-decoration-none">Sign in</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
resources/views/dashboard.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 11 Custom Dashboard - NiceSnippets.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<div class="row">
<div class="col-md-11">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<img src="https://www.NiceSnippets.com/assets/images/logo-it-2.png" alt="BootstrapBrain Logo" width="300">
</a>
</div>
<div class="col-md-1">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</div>
</header>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
@session('success')
<div class="alert alert-success" role="alert">
{{ $value }}
</div>
@endsession
<h1 class="display-5 fw-bold">Hi, {{ auth()->user()->name }}</h1>
<p class="col-md-8 fs-4">Welcome to dashboard.<br/>Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Dashboard</button>
</div>
</div>
</div>
</main>
</body>
</html>
Run Laravel App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8000/login
I hope it can help you...
#Laravel 11
