Table of content
- 1. Introduction
- 2. Packages required
- 3. Project setup
- 3.1. Laravel installation
- 3.2. Laravel breeze installation
- 4. Creating multiple user views or dashboard
- 5. Creating multiple user roles in the database
- 5.1. Editing the users migration table
- 5.2. Editing the registration page
- 5.3. Editing the registration controller
- 5.4. Editing the user model
- 6. Multi-user authentication (main section)
- 6.1. Creating a middleware
- 6.2. Registering the middleware at the kernel
- 6.3. Redirecting users if authenticated
- 6.4. Configuring routes
- 7. Conclusion
- 8. Acknowledgements
1. Introduction
In this example, you will learn how to implement multi-authentication in laravel 8 and laravel breeze (inertia).
2. Package version
- Laravel v8.x
- Laravel breeze v1.4
3. Project setup
3.1. Laravel Installation
We would be using composer to install our new laravel package Laravel installation via composer.
If composer is not installed, install composer here.
composer create-project laravel/laravel example-app
cd example-app
3.2. Laravel Breeze installation
Now in the project's root directory we would install breeze Laravel Breeze
composer require laravel/breeze --dev
For this project I would be using React, but you can use Vue if you want to.
php artisan breeze:install vue
// Or...
php artisan breeze:install react
npm install
npm run dev
Don't forget to create a database and include the details of the database in the .env file at the root directory
// fill all details
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=""
DB_DATABASE=laravel
DB_USERNAME=""
DB_PASSWORD=
then run
php artisan migrate
4. Creating Multiple User Views or Dashboard
In this section we would be creating different views to route our different authenticated users to.
- AdminDashboard.js
- GuestDashboard.js
- UserDashboard.js
- Dashboard.js (The default dashboard created by breeze)
AdminDashboard.js
resources/js/Pages/AdminDashboard.js
import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";
export default function AdminDashboard(props) {
return (
<Authenticated
auth={props.auth}
errors={props.errors}
header={
<h2 className="text-xl font-semibold leading-tight text-gray-800">
Admin Dashboard
</h2>
}
>
<Head title="Admin Dashboard" />
<div className="py-12">
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
You're logged in as Admin!
</div>
</div>
</div>
</div>
</Authenticated>
);
}
GuestDashboard.js
resources/js/Pages/GuestDashboard.js
import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";
export default function GuestDashboard(props) {
return (
<Authenticated
auth={props.auth}
errors={props.errors}
header={
<h2 className="text-xl font-semibold leading-tight text-gray-800">
Guest Dashboard
</h2>
}
>
<Head title="Dashboard" />
<div className="py-12">
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
You're logged in as Guest!
</div>
</div>
</div>
</div>
</Authenticated>
);
}
UserDashboard
resources/js/Pages/UserDashboard.js
import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";
export default function Dashboard(props) {
return (
<Authenticated
auth={props.auth}
errors={props.errors}
header={
<h2 className="text-xl font-semibold leading-tight text-gray-800">
User Dashboard
</h2>
}
>
<Head title="Dashboard" />
<div className="py-12">
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
You're logged in as User!
</div>
</div>
</div>
</div>
</Authenticated>
);
}
Dashboard (The default dashboard created by breeze)
resources/js/Pages/Dashboard.js
import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";
export default function Dashboard(props) {
return (
<Authenticated
auth={props.auth}
errors={props.errors}
header={
<h2 className="text-xl font-semibold leading-tight text-gray-800">
Default dashboard from Dashboard Breeze //edit here
</h2>
}
>
<Head title="Dashboard" />
<div className="py-12">
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
You're logged in as User (Default dashboard from breeze)! //edit here
</div>
</div>
</div>
</div>
</Authenticated>
);
}
5. Creating multiple user roles in the database
5.1. Editing the users migration table
we are going to create a role column in the users table.
database/migrations/create_users_table.php
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('role'); //here
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
then run php artisan migrate:refresh
.
5.2. Editing the registration page
resources/js/Pages/Auth/Register.js
export default function Register() {
const { data, setData, post, processing, errors, reset } = useForm({
name: "",
email: "",
role: "", // make sure this is present
password: "",
password_confirmation: "",
});
....
return (
....
// put this after the email
<div className="mt-4">
<Label forInput="role" value="Role" />
<select
name="role" /* make sure this and data.role is the same */
id="role"
className="block w-full mt-1 rounded-md"
onChange={onHandleChange}
>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="guest">Guest</option>
</select>
</div>
....
);
}
5.3. Editing the registration controller
app/Http/Controllers/Auth/RegisteredUserController.php
public function store(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'role' => 'required|string', //edit here
'password' => ['required', 'confirmed', Rules\Password::defaults()],
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'role' => $request->role //edit here
]);
}
5.4. Editing the user model
app/Models/User.php
protected $fillable = [
'name',
'email',
'password',
'role' //edit here
];
6. Multi-User Authentication (main-section)
6.1. Creating a middleware
Run the command php artisan make:middleware CheckRole
app/Http/Middleware/CheckRole.php
public function handle(Request $request, Closure $next, string $role)
{
if ($role == 'admin' && auth()->user()->role != 'admin' ) {
abort(403);
}
if ($role == 'user' && auth()->user()->role != 'user' ) {
abort(403);
}
if ($role == 'guest' && auth()->user()->role != 'guest' ) {
abort(403);
}
return $next($request);
}
6.2. Registering the middleware at the kernel
app/Http/Kernel.php
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
'checkRole' => \App\Http\Middleware\CheckRole::class, //edit here
];
6.3. Redirecting users if authenticated
Create a controller
Run php artisan make:controller Auth/RedirectAuthenticatedUsersController
app/Http/Controllers/Auth/RedirectAuthenticatedUsersController.php
class RedirectAuthenticatedUsersController extends Controller
{
public function home()
{
if (auth()->user()->role == 'admin') {
return redirect('/adminDashboard');
}
elseif(auth()->user()->role == 'user'){
return redirect('/userDashboard');
}
elseif(auth()->user()->role == 'guest'){
return redirect('/guestDashboard');
}
else{
return auth()->logout();
}
}
}
Edit the Route service provider
app/Providers/RouteServiceProvider.php
public const HOME = "/redirectAuthenticatedUsers"; //edit here
6.4. Configuring routes
routes/web.php
/* Delete this
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
*/
Route::group(['middleware' => 'auth'], function() {
Route::inertia('/dashboard', 'Dashboard')->name('dashboard');
Route::get("/redirectAuthenticatedUsers", [RedirectAuthenticatedUsersController::class, "home"]);
Route::group(['middleware' => 'checkRole:admin'], function() {
Route::inertia('/adminDashboard', 'AdminDashboard')->name('adminDashboard');
});
Route::group(['middleware' => 'checkRole:user'], function() {
Route::inertia('/userDashboard', 'UserDashboard')->name('userDashboard');
});
Route::group(['middleware' => 'checkRole:guest'], function() {
Route::inertia('/guestDashboard', 'GuestDashboard')->name('guestDashboard');
});
});
Make sure you import
use App\Http\Controllers\Auth\RedirectAuthenticatedUsersController;
We are directly rendering the components in the file, but you can create a controller and render the components there, check example.
7. Conclusion
check the code from Github
Top comments (1)
Great article, Really helpful, Keep going
Web Tecky