Laravel 8 | forgot password using CSS HTML

Laravel provides a built-in authentication system, but sometimes you need more control and flexibility. In this tutorial, we'll go through how to create a custom authentication system in Laravel, including registration, login, forgot password, and reset password functionalities.

Step 1: Create the Register Controller

To start, we need to create the controller for the registration functionality. Run the following command in the terminal:

php artisan make:controller Auth/RegisterController

Now, navigate to app/Http/Controllers/Auth/RegisterController.php and add the following code:

<?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 showRegistrationForm()
    {
        return view('auth.register');
    }

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

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

        return redirect()->route('login')->with('message', 'Registration successful. Please log in.');
    }
}

Step 2: Create the Register Blade View

Next, create the register.blade.php view inside resources/views/auth/ with the following content:

@extends('layouts.app')

<div class="register-form">
    <form method="POST" action="{{ route('register') }}">
        @csrf
        <div class="text-center mb-4">
            <h1 class="h3 mb-0">Register</h1>
            <p>Create your account.</p>
        </div>

        <div class="form-group">
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Full Name" autofocus>
            @error('name')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group">
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="Email Address">
            @error('email')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group">
            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Password">
            @error('password')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group">
            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password">
        </div>

        <div class="form-group mb-3">
            <button type="submit" class="btn btn-primary btn-block">Register</button>
        </div>
    </form>
</div>

Step 3: Create the Login Controller

Next, let's create the login functionality. Run the following command:

php artisan make:controller Auth/LoginController

Now, navigate to app/Http/Controllers/Auth/LoginController.php and add the following code:

<?php

namespace App\Http\Controllers\Auth;

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

class LoginController extends Controller
{
    public function showLoginForm()
    {
        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()->route('login')->with('error', 'Invalid credentials');
    }

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

Step 4: Create the Login Blade View

Create the login.blade.php view inside resources/views/auth/:

@extends('layouts.app')

<div class="login-form">
    <form method="POST" action="{{ route('login') }}">
        @csrf
        <div class="text-center mb-4">
            <h1 class="h3 mb-0">Please Sign In</h1>
            <p>Signin to manage your account.</p>
        </div>

        @if(session()->has('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="form-group">
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="Email Address">
            @error('email')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group">
            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Password">
            @error('password')
                <span class="invalid-feedback" role="alert">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group mb-3">
            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
        </div>
    </form>
</div>

Step 5: Create the Forgot Password Controller

Create a controller for the "forgot password" feature:

php artisan make:controller Auth/ForgotPasswordController

Now, in app/Http/Controllers/Auth/ForgotPasswordController.php:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;
use Carbon\Carbon;
use Mail;
use Str;

class ForgotPasswordController extends Controller
{
    public function showLinkRequestForm()
    {
        return view('auth.password.email');
    }

    public function sendResetLinkEmail(Request $request)
    {
        $request->validate(['email' => 'required|email|exists:users']);

        $token = Str::random(60);

        DB::table('password_resets')->insert([
            'email' => $request->email,
            'token' => $token,
            'created_at' => Carbon::now(),
        ]);

        Mail::send('auth.password.reset-email', ['token' => $token], function ($message) use ($request) {
            $message->from('noreply@yourapp.com');
            $message->to($request->email);
            $message->subject('Reset Password Notification');
        });

        return back()->with('message', 'We have sent you a password reset link!');
    }
}

Step 6: Setup Routes for Forgot Password

In your routes/web.php file, add the following routes for password reset:

Route::get('forgot-password', 'App\Http\Controllers\Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');
Route::post('forgot-password', 'App\Http\Controllers\Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');

Step 7: Create Reset Password Routes and Controller

For resetting the password after the user clicks the link in their email, create the routes in routes/web.php:

Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@showResetForm')->name('password.reset');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@reset')->name('password.update');

Then create the ResetPasswordController using:

php artisan make:controller Auth/ResetPasswordController

And in the controller, you will handle the password reset logic.

Conclusion

Now you have a custom authentication system in Laravel, including user registration, login, forgot password, and reset password functionalities. These are essential for any application that needs a secure and flexible authentication mechanism. You can further improve and customize this system according to your needs!

---

You can paste this into a blog post or website directly, and it will provide a clear guide for building custom authentication in Laravel. Let me know if you'd like help with any specific section or further enhancements!