Login and Register Admin Dashboard Laravel 8

Click to Download Admin Template

Login and Register Admin Dashboard in Laravel 8

Introduction

Laravel 8 provides a powerful authentication system out of the box, allowing developers to build secure login and registration functionality easily. In this guide, we will create an Admin Dashboard with Login and Register functionality using Laravel 8. This will also include social login integration with Google and GitHub for user authentication.

Step 1: Install Laravel 8

Start by installing a fresh Laravel 8 application using Composer:

composer create-project --prefer-dist laravel/laravel laravel_dashboard2021

Once installed, navigate to the project directory:

cd laravel_dashboard2021

Step 2: Install Laravel UI Package

Laravel UI provides authentication scaffolding for traditional web applications. Install it using:

composer require laravel/ui

Generate authentication scaffolding with Vue.js support:

php artisan ui vue --auth

Run the following command to install the required JavaScript dependencies:

npm install && npm run dev

Step 3: Configure Database

Update your .env file with database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_custom_auth
DB_USERNAME=root
DB_PASSWORD=your_password

Run the migration command to create the users table:

php artisan migrate

Step 4: Setup Authentication Routes

Modify routes/web.php to include authentication and admin dashboard routes:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\LoginController;
use App\Http\Controllers\HomeController;

Route::get('/', function () {
    return view('auth.login');
});

Auth::routes();

Route::get('/home', [HomeController::class, 'index'])->name('home');

// Social Login
Route::get('login/google', [LoginController::class, 'redirectToGoogle'])->name('login.google');
Route::get('login/google/callback', [LoginController::class, 'handleGoogleCallback']);

Step 5: Create LoginController for Social Authentication

Run the following command to generate the authentication controller:

php artisan make:controller Auth/LoginController

Modify app/Http/Controllers/Auth/LoginController.php:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
    use AuthenticatesUsers;

    protected $redirectTo = '/home';

    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    // Google Login
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleGoogleCallback()
    {
        $googleUser = Socialite::driver('google')->user();
        $this->_registerOrLoginUser($googleUser);

        return redirect()->route('home');
    }

    protected function _registerOrLoginUser($data)
    {
        $user = User::where('email', $data->email)->first();

        if (!$user) {
            $user = new User();
            $user->name = $data->name;
            $user->email = $data->email;
            $user->provider_id = $data->id;
            $user->avatar = $data->avatar;
            $user->save();
        }

        Auth::login($user);
    }
}

Step 6: Modify Login Page for Social Login

Edit resources/views/auth/login.blade.php and add Google login buttons:

<div class="btn-wrapper text-center">
    <a href="{{ route('login.google') }}" class="btn btn-neutral btn-icon">
        <span class="btn-inner--icon">
            <img src="../assets/img/icons/common/google.svg">
        </span>
        <span class="btn-inner--text">Google</span>
    </a>
</div>

Step 7: Create Admin Dashboard

Create a new controller for the Admin Dashboard:

php artisan make:controller AdminController

Modify app/Http/Controllers/AdminController.php:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AdminController extends Controller
{
    public function index()
    {
        return view('admin.dashboard');
    }
}

Create a route in routes/web.php:

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

Step 8: Protect Routes with Middleware

Run the following command to create middleware:

php artisan make:middleware AdminMiddleware

Modify app/Http/Middleware/AdminMiddleware.php:

namespace App\Http\Middleware;

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

class AdminMiddleware
{
    public function handle(Request $request, Closure $next)
    {
        if (Auth::user() && Auth::user()->role == 'admin') {
            return $next($request);
        }
        return redirect('/home');
    }
}

Register the middleware in app/Http/Kernel.php:

protected $routeMiddleware = [
    'admin' => \App\Http\Middleware\AdminMiddleware::class,
];

Modify database/migrations/xxxx_xx_xx_xxxxxx_create_users_table.php to add an admin role:

$table->string('role')->default('user');

Rerun the migration:

php artisan migrate:fresh

Step 9: Customize Dashboard UI

Create a new Blade file:

resources/views/admin/dashboard.blade.php

Add the following content:

@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Welcome, Admin</h2>
</div>
@endsection

Conclusion

This tutorial covered setting up Laravel 8 authentication, including Login, Register, and Social Login with Google, and creating a simple Admin Dashboard with role-based access control.

🔹 Features Covered
✅ User Authentication (Login & Register)
✅ Social Login (Google)
✅ Middleware for Admin Access
✅ Custom Admin Dashboard