Mastering User Authentication in Laravel 11: A Comprehensive Guide
Hello, this time I will discuss the PHP framework that is most widely used by developers throughout the world, namely Laravel. This time, Laravel has released the latest version in 2024, namely version 11.
For this reason, so that our knowledge remains updated, one of the best ways is to keep learning, and by studying, our knowledge will remain updated.
OK, this time I will discuss Laravel 11 for authentication needs by logging in, registering and logging out, this feature is very important if you are a specialist or want to learn to create CMS.
And so that it doesn’t take too long, read my review below, prepare coffee and popcorn, let’s learn Laravel 11 together completely from installation to logout, okay?
Install Laravel 11
Before we move on to installing Laravel, let’s first look at the doc page for Laravel 11.
This is the newest Laravel on the official Laravel page, now by default to version 11 (current year is 2024).
There are lots of magical features, and please read first about the latest Laravel 11.
And the newest feature in Laravel 11 is famous for folders that are simpler and easier to remember compared to previous versions.
First of all, we have to install Laravel 11 first, we will install Laravel 11 using the Laragon application.
If you don’t know what Laragon is then I suggest you google it and try Laragon directly, because with Laragon we can call our application directly from A browser like XAMPP.
But Laragon has an extraordinary feature, namely that you can easily change the PHP version, of course, well, the installation is like this.
Software
- Laragon (https://laragon.org/)
- Visual Studio Code (https://code.visualstudio.com/download)
- PHP 8.2 / PHP 8.3
- DBeaver (sql client)
- Composer
- Xampp (to run database only)
Open laragon
If you don’t have the Laragon application, you can download and install it first on your computer, you can access it here
If you don’t have the Laragon application, you can download and install it first on your computer, you can access it here
oke when laragon have opened so you can search in below, and klik terminal, this is so power full terminal.
- then type “terminal”
- then type in “terminal” with
- # laravel new laravel11
laravel11 is the name of our project folder, to make it easier please follow my method, if it works you can use the name of the project you are working on.
and fill in whatever is needed, then wait until it’s finished, if you have questions about what database to use, you can use whatever you want to use, I chose mysql.
For your information, when we use mysql, it will be in the env, by default the database used is sqllite, and it needs to be configured first with mysql
This is your installed laravel on your desk is finished, and so we can run to next step, so we must to run laragon aplication, it’s like that then please run Laragon.
Open laragon aplication and click “Start All” this is setting to run we are project laravel.
After your are click “Start All” so the project is running, and open it in the browser by typing “laravel11.test”, if successful it will be like this.
for your information, when you use laragon, you can access your project with name folder project.
This we use “laravel11.test” because the name folder is “laravel11” if you have another project for example is “laravelChatBoot” so you can access in browser using “laravelChatBoot.test”,
oke, after weare project running well, so we must to open project in vscode, i can lern to you how to open in terminal.
Is very simple way, just type “code .” so you aplication / project opened in vscode, after that let’s open laravel in vscode
- type “cd laravel11” (in laragon terminal)
- then type “code .”
how, is very simple right, and if it works it will be like this, i using vscode in my project laravel11.
Because vscode have many extention powerfull, and free exacly, i using path explorer in right side, if you using in left side you can setting in vscode too.
next we must to setting .env file, this file in root folder, and not to hard to find this file, set the db connection first in the .env file, settings like this, using mysql, because the default using sqlite.
Oke to make sure the connect is success, you can open your sql client, on my laptop, im using DBeaver.
This is aplication free, and so light, i like using this, and my windows and mac, DBeaver running so perfect.
After that, create a DB on our laptop, you can use DBever, XAMPP or something else to create database setting.
oke, when laravel11 db is already build, so then after that go back to the “terminal” we migrate.
This is to create several tables from Laravel which will later be used as login, registration.
No need to bother creating them because by default we have created them the first time we create a Laravel application.
Just type migration and Laravel magic will work under the system, let’s try it.
#php artisan migrate
So, if there are no errors in the terminal then the table has been created, and we can see it in the DBeaver application.
Please open the DBeaver application to make sure it has been created or not, I’m sure it has been created.
Because no errors have occurred. After success, open DBeaver and if successful it will look like this.
that’s a sign that we have been successful in connecting between laravel and its db connection using dbever or for mysql connection
Route Settings
After all the required database and table settings have been completed, it’s time to create the application.
First, we determine the route, this is used to set where our application runs.
If you look at a website that has parameters behind it, for example, ‘azizan.com/profil’ then what is behind it are the settings for the route, and we will create a profile function like what we have specified.
Setting the route is the program flow that we will determine. This time I will give it in full, starting from registration, login and logout, so it looks like this
Edit the web.php file in this path
C:\laragon\www\laravel11\routes\web.php
then type like this:
<?php
use App\Http\Controllers\AuthController;
use App\Http\Controllers\HomeController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::group(['middleware' => 'guest'], function () {
Route::get('/register', [AuthController::class, 'register'])->name('register');
Route::post('/register', [AuthController::class, 'registerPost'])->name('register');
Route::get('/login', [AuthController::class, 'login'])->name('login');
Route::post('/login', [AuthController::class, 'loginPost'])->name('login');
});
Route::group(['middleware' => 'auth'], function () {
Route::get('/home', [HomeController::class, 'index']);
Route::delete('/logout', [AuthController::class, 'logout'])->name('logout');
});and if you have, try accessing it in your browser by typing for like this, First we will direct it to register, you can follow as follows in your browser.
http://laravel11.test/register
This is a simple html page created with bootrapp, and a simple register display has been built and if it works it will look like this.
After that, go back to the AuthController and create the registerPost function
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
public function registerPost(Request $request)
{
$user = new User();
$user->name = $request->name;
$user->email = $request->email;
$user->password = Hash::make($request->password);
$user->save();
return back()->with('success', 'Register successfully');
}then return to the browser and enter the data to be registered, Make sure all the data to be registered is correct.
Click register, and if it’s like this then it’s successful
There will be a green box, this indicates your account has been successfully added, and congratulations you have entered the system.
So, to see the results, you can open your DBeaver application, check the users and taraa tables.
Your user has been successfully entered, now the registration process has gone well, and we have succeeded, congratulations.
Create a Login Page
After we are successful in the registration section, then we will go to the login process.
The function of this process is to enter the system, just like a door, login is the first gate to enter the system.
But first we will create a simple login page, and this method is the same as registering, we use bootstrap, After registration is complete, then we will create a login page
And the way to do it is that we set the controller first, stay in AuthController and add the login function
public function login()
{
return view('login');
}
use Illuminate\Support\Facades\Auth;
public function loginPost(Request $request)
{
$credetials = [
'email' => $request->email,
'password' => $request->password,
];
if (Auth::attempt($credetials)) {
return redirect('/home')->with('success', 'Login berhasil');
}
return back()->with('error', 'Email or Password salah');
}After the controller has been successfully created, next we create the blade page, and create the login view on this path
C:\laragon\www\laravel11\resources\views\login.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="row justify-content-center mt-5">
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h1 class="card-title">Login</h1>
</div>
<div class="card-body">
@if(Session::has('error'))
<div class="alert alert-danger" role="alert">
{{ Session::get('error') }}
</div>
@endif
<form action="{{ route('login') }}" method="POST">
@csrf
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" name="email" class="form-control" id="email" placeholder="name@example.com" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" name="password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<div class="d-grid">
<button class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>OK, after creating it, next we try it in our browser, after that access it in the browser.
and if it works it will be like this, There will be a simple login display in your browser.
We try to log in with the data we registered earlier, Make sure the password and user are correct as registered.
If you find a page like this, don’t worry, because we haven’t created a home page yet
CREATE HOME PAGE
OK, after registering and logging in well, it’s time for us to create a home page.
This page is a page that can only be accessed by those who have logged in.
This means that if someone has not registered and logged in then this page cannot be accessed.
Create a controller first by typing
#php artisan make:controller HomeController
once created then open the file and then fill it in with this script
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
function index(){
return view('home');
}
}
?>Ffter adding in controller then we create the blade page here
C:\laragon\www\laravel11\resources\views\home.blade.php
copy all the following contents and paste it in home.blade.php, if there are errors, please contact me.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<form action="{{ route('logout') }}" method="POST" class="d-flex" role="search">
@csrf
@method('DELETE')
<button class="btn btn-danger" type="submit">Logout</button>
</form>
</div>
</div>
</nav>
<div class="container">
<h1> Welcome, {{ Auth::user()->name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>Before we try that, first add a logout function to the AuthController, logout This appears on the home page, don’t worry, let’s just do it because we are on the logout page.
public function logout()
{
Auth::logout();
return redirect()->route('login');
}After that, let’s try logging in once again
If the login fails it will look like this, There will be an error box that appears, this shows that the user and password are incorrect,
After successful login you will be able to access home, and if you log in successfully it will look like this
OK, if you log out, the page will return to login.
So, if friends want to see directly the code that I have created, please check here, OK?
You can check the code on my github
https://github.com/AzizanNur/laravel11
OK, so we have created this article, hopefully it will be useful for friends who want to be part of web development using Laravel.
If you have any questions, please ask me a question by following or sending it via my social media account which I have included below.
Or there are some scripts that don’t work well, please contact me, I will respond quickly.
See you in the next article, thank you.
Author: Azizan Nur Rohman
IG: @azizan_nr
fb: Azizan Nur Rohman
LinkedIn: https://www.linkedin.com/in/azizan-nur-rohman-842980a0/
github: https://github.com/AzizanNur/
