Step 1: Install Laravel Project

To start, install a new Laravel project by running the following command in your terminal:

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

Step 2: Setup Database Credentials

Create a new database (e.g., custom_auth) and then configure the database connection in the .env file located in the root directory of your Laravel project.

Open .env and update the database credentials as follows:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=root
DB_PASSWORD=your_database_password

Once the database is configured, run the following command to migrate the default Laravel tables:

php artisan migrate

Step 3: Create Public Assets (CSS File)

Create a CSS file for styling authentication pages. Save the following CSS as public/assets/css/style.css:

/* Version  : CSS 3 */
/* Created by : Soeng Souy */

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    background-color: #f5f8fb;
}

.form-signin {
    width: 100%;
    max-width: 480px;
    margin: auto;
}

.p-5 {
    padding: 2rem !important;
}

/* Button Styles */
.btn-primary {
    color: #fff !important;
    background-color: #1BA262 !important;
    border-color: #1BA262 !important;
    padding: 1em;
}

.btn-primary:hover {
    background-color: #168652 !important;
}

/* Login Form */
.login-form {
    width: 100%;
    max-width: 480px;
    margin: auto;
}

input:focus {
    border: 1px solid #20C477 !important;
    outline-width: 0;
}

Step 4: Define Routes

Modify routes/web.php to include authentication routes:

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

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

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

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

Step 5: Create Register Controller

Create a new controller for handling user registration:

php artisan make:controller Auth/RegisterController

Then, update app/Http/Controllers/Auth/RegisterController.php with the following code:

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',
            'password_confirmation' => 'required',
        ]);

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

        return redirect('login');
    }
}

Step 6: Create Blade Templates

Layout File

Create a layouts folder inside resources/views and add a app.blade.php file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Signin Simple</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    @yield('content')
</body>
</html>

Register Page

Create an auth folder inside resources/views and add a register.blade.php file:

@extends('layouts.app')

@section('content')
<div class="login-form">
    <form method="POST" action="{{ route('register') }}">
        @csrf
        <div class="text-center mb-4">
            <h1 class="h3 mb-0">Please sign up</h1>
            <p>Fill out the form to get started.</p>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="name" placeholder="Name" value="{{ old('name') }}">
        </div>
        <div class="form-group">
            <input type="email" class="form-control" name="email" placeholder="Email" value="{{ old('email') }}">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="Password">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Signup</button>
        </div>
        <div class="text-center">
            <p>Have an account? <a href="{{ route('login') }}">Signin</a></p>
        </div>
    </form>
</div>
@endsection

You can now open your browser and navigate to the registration page to test user registration. This setup provides a clean and structured way to handle authentication in Laravel without using built-in authentication scaffolding.

Souy Soeng

Laravel 8 | Sign up form HTML CSS