Laravel Authentication Without Starter Kit (Custom HTML & CSS)

Avinash Chaurasiya Sep 25, 2025 129

Authentication,custom Authentication,authentication In Laravel

Laravel Authentication Without Starter Kit (Custom HTML & CSS)

Laravel Authentication

In many cases, developers don’t want to use Laravel’s starter kits (like Breeze or Jetstream) because they add extra dependencies. Instead, you can build a simple authentication system manually using only HTML and CSS. In this blog, we will implement custom login and registration step by step in Laravel.

1. Install Laravel Project

composer create-project laravel/laravel custom-auth
cd custom-auth

2. Configure Database

Edit the .env file and update your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=custom_auth
DB_USERNAME=root
DB_PASSWORD=

3. Run Migrations

By default, Laravel has a users table migration. Run it:

php artisan migrate

4. Create Authentication Controller

Generate a controller for handling authentication logic:

php artisan make:controller AuthController

Now open app/Http/Controllers/AuthController.php and add:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;

class AuthController extends Controller
{
    public function showRegister()
    {
        return view('auth.register');
    }

    public function register(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:6|confirmed'
        ]);

        User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        return redirect()->route('login')->with('success', 'Registration successful!');
    }

    public function showLogin()
    {
        return view('auth.login');
    }

    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            return redirect()->route('dashboard');
        }

        return back()->withErrors(['email' => 'Invalid credentials']);
    }

    public function logout()
    {
        Auth::logout();
        return redirect()->route('login');
    }
}

5. Create Routes

Open routes/web.php:

use App\Http\Controllers\AuthController;

Route::get('/register', [AuthController::class, 'showRegister'])->name('register');
Route::post('/register', [AuthController::class, 'register']);

Route::get('/login', [AuthController::class, 'showLogin'])->name('login');
Route::post('/login', [AuthController::class, 'login']);

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

Route::post('/logout', [AuthController::class, 'logout'])->name('logout');

6. Create Views with HTML & CSS

Register Page (`resources/views/auth/register.blade.php`)

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
    <style>
        body { font-family: Arial; background: #f4f4f4; }
        .form-box { width: 400px; margin: 50px auto; background: #fff; padding: 20px; border-radius: 8px; }
        input { width: 100%; padding: 10px; margin: 8px 0; }
        button { background: #007BFF; color: #fff; border: none; padding: 10px; width: 100%; cursor: pointer; }
    </style>
</head>
<body>
    <div class="form-box">
        <h2>Register</h2>
        <form method="POST" action="{{ route('register') }}">
            @csrf
            <input type="text" name="name" placeholder="Full Name" required>
            <input type="email" name="email" placeholder="Email" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="password" name="password_confirmation" placeholder="Confirm Password" required>
            <button type="submit">Register</button>
        </form>
        <p>Already have an account? <a href="{{ route('login') }}">Login</a></p>
    </div>
</body>
</html>

Login Page (`resources/views/auth/login.blade.php`)

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <style>
        body { font-family: Arial; background: #f4f4f4; }
        .form-box { width: 400px; margin: 50px auto; background: #fff; padding: 20px; border-radius: 8px; }
        input { width: 100%; padding: 10px; margin: 8px 0; }
        button { background: #28a745; color: #fff; border: none; padding: 10px; width: 100%; cursor: pointer; }
    </style>
</head>
<body>
    <div class="form-box">
        <h2>Login</h2>
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <input type="email" name="email" placeholder="Email" required>
            <input type="password" name="password" placeholder="Password" required>
            <button type="submit">Login</button>
        </form>
        <p>Don’t have an account? <a href="{{ route('register') }}">Register</a></p>
    </div>
</body>
</html>

7. Dashboard Page

Create resources/views/dashboard.blade.php:

<h1>Welcome, {{ auth()->user()->name }}</h1>
<form method="POST" action="{{ route('logout') }}">
    @csrf
    <button type="submit">Logout</button>
</form>

Conclusion

That’s it 🎉 You have successfully created a custom authentication system in Laravel using only HTML & CSS without any starter kit. This method gives you full control over the UI and business logic of your authentication system.

Back to Blogs

Laravel Authentication Without Starter Kit (Custom HTML & CSS)