Laravel 8 | Sign in form HTML CSS

Step 1: Install Laravel UI

Run the following commands in your terminal to install Laravel UI, which will help you create the basic scaffolding for authentication:

composer require laravel/ui
php artisan ui vue --auth

Step 2: Install Laravel Project

Install a new Laravel project by running the following command:

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

Step 3: Setup Database Credentials

Create a new database custom_auth in your MySQL. Then, open your .env file and add the following database credentials:

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

Run the migration command to generate tables in the database:

php artisan migrate

Step 4: Add Custom CSS (Optional)

Create a custom CSS file at public/assets/css/style.css for styling your login and registration pages. Here's a basic example of the CSS:

/* Custom styling for login and registration */
body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    background-color: #f5f8fb;
}
.form-signin {
    width: 100%;
    max-width: 480px;
    margin: auto;
}
input:focus {
    box-shadow: none !important;
    border: 1px solid #20C477 !important;
}
.btn-primary {
    background-color: #1BA262 !important;
    padding: 1em;
}

Step 5: Create Routes for Registration and Login

In the routes/web.php, create routes for registration and login:

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

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

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

Route::get('/login', [LoginController::class, 'login'])->name('login');
Route::post('/login', [LoginController::class, 'authenticate']);
Route::get('/logout', [LoginController::class, 'logout'])->name('logout');

Step 6: Create RegisterController

Generate the RegisterController to handle the registration process:

php artisan make:controller Auth/RegisterController

Then, add the following code to RegisterController.php:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Hash;

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

    public function storeUser(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:8|confirmed',
        ]);

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

        return redirect('login');
    }
}

Step 7: Create LoginController

Generate the LoginController to handle the login process:

php artisan make:controller Auth/LoginController

Then, add the following code to LoginController.php:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Auth;

class LoginController extends Controller
{
    public function login()
    {
        return view('auth.login');
    }

    public function authenticate(Request $request)
    {
        $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
        ]);

        $credentials = $request->only('email', 'password');

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

        return redirect('login')->with('error', 'Invalid credentials');
    }

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

Step 8: Create Views for Registration and Login

Create the login and registration views in the resources/views/auth/ directory.

Register View (register.blade.php):

@extends('layouts.app')

<div class="login-form">
    <form method="POST" action="{{ route('register') }}">
        @csrf
        <h2>Register</h2>
        <input type="text" name="name" placeholder="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>
</div>

Login View (login.blade.php):

@extends('layouts.app')

<div class="login-form">
    <form method="POST" action="{{ route('login') }}">
        @csrf
        <h2>Login</h2>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>
</div>

Step 9: Create HomeController

Generate a HomeController to show the home page after a successful login:

php artisan make:controller HomeController

Add the following code to HomeController.php:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

Step 10: Create Home Page View

Create a home.blade.php file to display after successful login:

@extends('layouts.app')

<div class="container">
    <h1>Welcome to the Home Page</h1>
    <p>Welcome, {{ Auth::user()->name }}!</p>
    <a href="{{ route('logout') }}">Logout</a>
</div>

Step 11: Add Auth Middleware

To restrict access to the home page only for authenticated users, use the auth middleware in your routes:

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

Step 12: Final Steps

Run php artisan serve to start your Laravel server.
You can access the registration and login pages by navigating to http://127.0.0.1:8000/register and http://127.0.0.1:8000/login.

Souy Soeng