Laravel 8 E-Commerce - Admin and User Authentication

In this video, we will learn about creating admin and user authentication for our e-commerce project. Let's see how we can create this authentication system.

First, we need to install the Jetstream package. Go to the command prompt and type the following command:

composer require laravel/Jetstream

Next, install the Jetstream Livewire package:

php artisan jetstream:install livewire

Now, run the following npm command:

npm install && npm run dev

Let's create a user table migration. Go to the database directory, then migrations, and open the create user table migration file. Inside this file, add a column for user type, which will define whether the user is an admin or a normal user.

public function up()
{
	Schema::create('users', function (Blueprint $table) {
		$table->id();
		$table->string('name');
		$table->string('email')->unique();
		$table->timestamp('email_verified_at')->nullable();
		$table->string('password');
		$table->rememberToken();
		$table->foreignId('current_team_id')->nullable();
		$table->text('profile_photo_path')->nullable();
		$table->string('utype')->default('USR')->comment('ADM for Admin and USR for User or Customer');
		$table->timestamps();
	});
}

Now, let's migrate the migration:

Go to the command prompt and run the following command:

php artisan migrate

Now, let's run the application:

Type the following command:

php artisan serve

Switch to the project and go to the layouts directory. Open the base.blade.php file and add login and register links. Also, create a menu for admin and normal users, and add a form for logout.

@if(Route::has('login'))
	@auth
		@if(Auth::user()->utype === 'ADM')
			<li class="menu-item menu-item-has-children parent" >
				<a title="My Account" href="#">My Account ({{Auth::user()->name}})<i class="fa fa-angle-down" aria-hidden="true"></i></a>
				<ul class="submenu curency" >
					<li class="menu-item" >
						<a title="Dashboard" href="{{ route('admin.dashboard') }}">Dashboard</a>
					</li>
					<li class="menu-item">
						<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
					</li>	
					<form id="logout-form" method="POST" action="{{ route('logout') }}">
						@csrf															
					</form>											
				</ul>
			</li>
		@else
			<li class="menu-item menu-item-has-children parent" >
				<a title="My Account" href="#">My Account ({{Auth::user()->name}})<i class="fa fa-angle-down" aria-hidden="true"></i></a>
				<ul class="submenu curency" >
					<li class="menu-item" >
						<a title="Dashboard" href="{{ route('user.dashboard') }}">Dashboard</a>
					</li>								
					<li class="menu-item">
						<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
					</li>	
					<form id="logout-form" method="POST" action="{{ route('logout') }}">
						@csrf															
					</form>												
				</ul>
			</li>
		@endif
	@else
		<li class="menu-item" ><a title="Register or Login" href="{{route('login')}}">Login</a></li>
		<li class="menu-item" ><a title="Register or Login" href="{{route('register')}}">Register</a></li>
	@endif
@endif

Now, go to the URL http://localhost:8000/. Click on the register link and create two users: one for admin and another for normal user.

First, create the admin user by entering the name, email, password, and confirm password. Then, click on Submit.

In the same way, create another user, which is a normal user, by entering the name, email, password, and confirm password. Then, click on Submit.

Now, we have created two users.

Go to the URL http://localhost/phpmyadmin, open the database, and browse the users table. You should see two users. Now, change the user type of the admin user to "ADM".

Let's create a middleware for admin:

Go to the command prompt and type the following command:

php artisan make:middleware AuthAdmin

Open the AuthAdmin middleware and add the following code:

'authadmin' => \App\Http\Middleware\AuthAdmin::class,

Now, go to the app/Providers/RouteServiceProvider.php file and add the following code:

public const HOME = '/';

Open the app/Http/Middleware/AuthAdmin.php file and add the following code:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

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

Let's create two Livewire components: one for the admin dashboard and another for the user dashboard.

Go to the command prompt and type the following command:

php artisan make:livewire Admin/AdminDashboardComponent
php artisan make:livewire User/UserDashboardComponent

Switch to the project and go to the app/Http/Livewire directory. Open the admin/AdminDashboardComponent.php and user/UserDashboardComponent.php class files and the layout.

class AdminDashboardComponent extends Component
{
    public function render()
    {            
        return view('livewire.admin.admin-dashboard-component')->layout('layouts.base');
    }
}

class UserDashboardComponent extends Component
{
    public function render()
    {            
        return view('livewire.user.user-dashboard-component')->layout('layouts.base');
    }
}

Now, go to the resources/views/livewire directory and open the admin/admin-dashboard-component.blade.php file. Add the following code:

<h1>Admin Dashboard</h1>

Open the user/user-dashboard-component.blade.php file and add the following code:

<h1>User Dashboard</h1>

Create a route for this component:

Open the web.php file and create a route for the admin. Create a route group for admin and also for the user.

//For Admin
Route::middleware(['auth:sanctum','verified','authadmin'])->group(function(){
    Route::get('/admin/dashboard',AdminDashboardComponent::class)->name('admin.dashboard');  
});

Now, everything is set. Let's check it.

Switch to the browser and click on login. Enter the user credentials, and you should see the user dashboard.

Now, let's access the admin dashboard. Add "admin" to the URL, and you should see the admin dashboard.

So, in this way, you can create admin and normal user authentication for the e-commerce project.