Laravel 11 Custom User Login and Registration
Hello, laravel web developers! In this article, we'll see how to create a custom login and registration in laravel 11. In laravel 11, we'll create a custom login page, registration page, and logout page as per our requirements.
Laravel provides default auth scaffolding to basic authentication like login, registration, email verification, etc. It also provides Jetstream, Breeze, Fortify, and UI packages.
Laravel 11 Custom User Login and Registration
Step 1: Install Laravel 11 Application
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel laravel-11-example
Step 2: Define Routes
Next, we'll define the routes to the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\AuthController;
Route::get('/', function () {
return view('welcome');
});
// Authentication Routes
Route::controller(AuthController::class)->group(function () {
Route::get('login', 'index')->name('login');
Route::post('login', 'postLogin')->name('login.post');
Route::get('registration', 'registration')->name('register');
Route::post('registration', 'postRegistration')->name('register.post');
Route::get('logout', 'logout')->name('logout');
});
Step 3: Create a Controller
Then, we'll create AuthController.php and define logic for login and registering the users.
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 logged in);
}
/**
* Write code on Method
*
* @return response()
*/
public function dashboard()
{
if(Auth::check()){
return view('dashboard');
}
return redirect("login")->withSuccess('Oops! 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
Next, we'll create a login.blade.php file and add the login page HTML to that file.
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 and Registration - Techsolutionstuff</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="logo.png" alt="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 Login and Registration - Techsolutionstuff</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="logo.png" alt="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 User Login and Registration - Techsolutionstuff</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="logo.png" alt="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.</p>
<button class="btn btn-primary btn-lg" type="button">Dashboard</button>
</div>
</div>
</div>
</main>
</body>
</html>
Step 5: Run the Laravel 11 Application
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like :
- Read Also: Laravel 11 Socialite Login with Google Account
- Read Also: How To Create Login and Register in Laravel 10 Livewire
- Read Also: How To Override Auth Login Method In Laravel 10
- Read Also: Login With Mobile Number Using Laravel
