Laravel 10 E-Commerce Project - Admin and User Authentication

In this video, we are going to learn about creating admin and user authentication.

For authentication, I will be using the Laravel/UI package. I have already installed the Laravel/UI package in the previous video. Now, let's customize it.

Customizing the User Migration

First, open the user migration and add a column:

$table->string('utype')->default('USR')->comment('ADM for Admin and USR for User or Customer');

Now, let's refresh the migration. Run the command in the command prompt:

php artisan migrate:refresh

Creating a Middleware for the Admin

Now, let's create a middleware for the admin. So, run the command:

php artisan make:middleware AuthAdmin

Now, open the AuthAdmin middleware from App\Http\Middleware and inside the handle method, add the following:

if(Auth::user()->utype != 'ADM')
{
    session()->flush();
    return redirect()->route('login');
}

Configuring the Kernel.php File

Now, go to the App\Http directory and from here, let's open the Kernel.php file. Inside the middleware Aliases, add the following:

'auth.admin' => \App\Http\Middleware\AuthAdmin::class,

Configuring the RouteServiceProvider.php File

Now, go to the App\Providers directory and from here, open the RouteServiceProvider.php file. And here, from this const Home variable, just remove this home only and add a forward slash (/):

public const HOME = '/';

Creating Controllers for the User and Admin

Now, let's create two controllers, one for the user and another for the admin. So, run the command in the command prompt:

php artisan make:controller UserController
Php artisan make:controller AdminController

Ok, controllers are created. Now, let's open these controllers. So, go to the controller directory and from here, let's open the User controller and add a function inside this controller:

public function index()
{
    return view("users.index");
}

Now, open the AdminController and add a function:

public function index()
{
    return view("admin.index");
}

Creating Index Views for the User and Admin

Now, let's create this index view. So, in the resources directory, go inside the views folder and let's open the views directory. And here, let's create one for the user and another for the admin. Now, inside these folders, create an index.blade.php file. In this view file, add the layout tag here:

@extends('layouts.base')
@section('content')
    <h1>User Dashboard</h1>
@endsection

Similarly, in the admin index view, add the following:

@extends('layouts.base')
@section('content')
    <h1>Admin Dashboard</h1>
@endsection

Creating Routes for the User and Admin

Now, let's create routes for these. Go to the web.php file and here, add the route for the user and admin:

Route::middleware('auth')->group(function(){
    Route::get('/my-account',[UserController::class,'index'])->name('user.index');
});

Route::middleware(['auth','auth.admin'])->group(function(){
    Route::get('/admin',[AdminController::class,'index'])->name('admin.index');
});

Adding the Menu to the Layout File

Now, go to the layout file and here, add the menu:

<li class="onhover-dropdown">
    <div class="cart-media name-usr">
        @auth <span>{{ Auth::user()->name }}</span> @endauth <i data-feather="user"></i>
    </div>
    <div class="onhover-div profile-dropdown">
        <ul>
            @if(Route::has('login'))
                @auth
                    @if(Auth::user()->utype === 'ADM')
                        <li>
                            <a href="{{route('admin.index')}}" class="d-block">Dashboard</a>
                        </li>
                    @else
                        <li>
                            <a href="{{route('user.index')}}" class="d-block">My Account</a>
                        </li>
                    @endif
                    <li>
                        <a href="{{route('logout')}}" onclick="event.preventDefault();document.getElementById('frmlogout').submit();" class="d-block">Logout</a>
                        <form id="frmlogout" action="{{route('logout')}}" method="POST">
                            @csrf
                        </form>
                    </li>
                @else
                    <li>
                        <a href="{{route('login')}}" class="d-block">Login</a>
                    </li>
                    <li>
                        <a href="{{route('register')}}" class="d-block">Register</a>
                    </li>
                @endauth                                                    
            @endif
        </ul>
    </div>
</li>

Testing the Application

Now, all done, so let's check. So, run the application:

Php artisan serve

Now, go to the Localhost:8000:

Here is the login and register link:

Now, let's register two users, one for the admin and another for a normal user:

Admin:

Email: admin@surfsidemedia.in

Password: 12345678

Now, the user is created. Let's log out and register another user:

User:

Email: user@surfsidemedia.in

Password: 12345678

Now, go to the phpMyAdmin:

And let's open the database:

And browse the users table:

Now, edit this record and change the utype as ADM for the admin user:

Now, let's check this, so log out from here:

Now, let's log in with admin credentials:

Here is the admin dashboard:

Now, if I log in with user credentials, you can see the user dashboard is here:

If I want to access the admin page, it will redirect us to the login page:

So, in this way, you can create Admin and User Authentication