Laravel 11 E-Commerce - Admin and User Authentication

Welcome back to the Laravel 11 E-Commerce Tutorial! In this video, we will learn how to create admin and user authentication for our e-commerce project.

Using Laravel/UI Package for Authentication

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

Adding a Column to 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 by running the command:

Php artisan migrate:refresh

Creating a Middleware for Admin

Next, let's create a middleware for the admin. Run the command:

php artisan make:middleware AuthAdmin

Now, open the AuthAdmin middleware and add the following code inside the handle method:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Symfony\Component\HttpFoundation\Response;

class AuthAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        if(Auth::check())
        {
            if(Auth::user()->utype === 'ADM')
            {
                return $next($request);
            }
            else
            {
                session()->flush();
                return redirect()->route('login');
            }
        }
        else
        {
            session()->flush();
            return redirect()->route('login');
        }        
    }
}

Creating Controllers for User and Admin

Now, let's create two controllers, one for the user and another for the admin. Run the following command:

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

Controllers are created. Now, let's open these controllers.

Adding Functions to the Controllers

Open the UserController and add a function:

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

Now, open the AdminController and add a function:

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

Creating Dashboard Views

Next, let's create the dashboard views. In the resources directory, go inside the views folder and create two folders, one for the user and another for the admin.

Inside these folders, create a dashboard.blade.php file. In this view file, extend the layout:

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

Similarly, in the admin dashboard view, add:

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

Creating Routes for User and Admin

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

Route::middleware([AuthUser::class])->group(function(){
    Route::get('/account-dashboard',[UserController::class,'account_dashboard'])->name('user.account.dashboard');
});
Route::middleware([AuthAdmin::class])->group(function(){
    Route::get('/admin',[AdminController::class,'index'])->name('admin.index');
});

Adding Login Link to the Layout

Finally, let's add the login link to the layout:

@guest
<div class="header-tools__item hover-container">
    <a class="header-tools__item" href="{{route('login')}}">
      <svg class="d-block" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <use href="#icon_user" />
      </svg>
    </a>
  </div>
@else                    
  <div class="header-tools__item hover-container">
    <a class="header-tools__item" href="{{ Auth::user()->utype=='ADM' ? route('admin.index') : route('user.account.dashboard')}}">
      <span class="pr-6px">{{Auth::user()->name}}</span>
      <svg class="d-block" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <use href="#icon_user" />
      </svg>
    </a>
  </div>
@endif

Testing the Application

Now, let's test the application. Run the application:

php artisan serve

Go to localhost:8000 and you will see the login and register links. Register two users, one for the admin and another for the normal user.

After registering, go to the phpMyAdmin and edit the record to change the utype to ADM for the admin user.

Now, let's check the application. Logout and login with the admin credentials. You will see the admin dashboard.

If you login with the user credentials, you will see the user dashboard. If you try to access the admin page, it will redirect you to the login page.

That's it! We have successfully created admin and user authentication for our e-commerce project.

So, that's all about creating admin and user authentication.