Creating a Registration Page in Laravel 12: Complete Guide with Form Submission

Author

Kritim Yantra

Apr 08, 2025

Creating a Registration Page in Laravel 12: Complete Guide with Form Submission

User registration is a fundamental feature for most web applications. Laravel 12 provides an excellent authentication scaffolding system that we'll customize to create a secure, feature-rich registration page.

In this comprehensive guide, we'll cover:

  1. Setting up authentication scaffolding
  2. Customizing the registration form
  3. Validating user input
  4. Processing form submission
  5. Adding extra fields (name, phone, etc.)
  6. Email verification
  7. Best practices for security

1. Setting Up Authentication Scaffolding

1.1 Install Laravel Breeze (Recommended)

composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate

This generates:

  • Registration views (resources/views/auth/register.blade.php)
  • Authentication controllers (app/Http/Controllers/Auth)
  • Routes (routes/auth.php)

1.2 Verify Routes

Check routes/web.php now includes:

Auth::routes();

2. Customizing the Registration Form

2.1 Modify the Registration Blade View

Edit resources/views/auth/register.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <!-- Name Field -->
                        <div class="row mb-3">
                            <label for="name" class="col-md-4 col-form-label text-md-end">
                                {{ __('Full Name') }}
                            </label>
                            <div class="col-md-6">
                                <input id="name" type="text" 
                                    class="form-control @error('name') is-invalid @enderror" 
                                    name="name" value="{{ old('name') }}" 
                                    required autocomplete="name" autofocus>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Email Field -->
                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">
                                {{ __('Email Address') }}
                            </label>
                            <div class="col-md-6">
                                <input id="email" type="email" 
                                    class="form-control @error('email') is-invalid @enderror" 
                                    name="email" value="{{ old('email') }}" 
                                    required autocomplete="email">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Password Field -->
                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">
                                {{ __('Password') }}
                            </label>
                            <div class="col-md-6">
                                <input id="password" type="password" 
                                    class="form-control @error('password') is-invalid @enderror" 
                                    name="password" required autocomplete="new-password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Confirm Password -->
                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">
                                {{ __('Confirm Password') }}
                            </label>
                            <div class="col-md-6">
                                <input id="password-confirm" type="password" 
                                    class="form-control" 
                                    name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

3. Adding Extra Fields to Registration

3.1 Add Phone Number Field

First, create a migration:

php artisan make:migration add_phone_to_users_table
public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('phone')->after('email')->nullable();
    });
}

Run migration: php artisan migrate

3.2 Update Registration Form

Add to register.blade.php:

<!-- Phone Field -->
<div class="row mb-3">
    <label for="phone" class="col-md-4 col-form-label text-md-end">
        {{ __('Phone Number') }}
    </label>
    <div class="col-md-6">
        <input id="phone" type="tel" 
            class="form-control @error('phone') is-invalid @enderror" 
            name="phone" value="{{ old('phone') }}"
            autocomplete="tel">
        @error('phone')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

3.3 Modify Registration Controller

Edit app/Http/Controllers/Auth/RegisterController.php:

protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'phone' => ['nullable', 'string', 'max:20'],
        'password' => ['required', 'string', 'min:8', 'confirmed'],
    ]);
}

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'phone' => $data['phone'],
        'password' => Hash::make($data['password']),
    ]);
}

4. Form Validation & Submission

4.1 Custom Validation Rules

Add to RegisterController.php:

use Illuminate\Validation\Rules\Password;

protected function validator(array $data)
{
    return Validator::make($data, [
        // ... other rules
        'password' => [
            'required',
            'confirmed',
            Password::min(8)
                ->mixedCase()
                ->numbers()
                ->symbols()
                ->uncompromised(),
        ],
        'phone' => ['nullable', 'regex:/^([0-9\s\-\+\(\)]*)$/', 'min:10'],
    ]);
}

4.2 Handling Form Submission

Laravel's built-in RegisterController handles:

  1. Validation
  2. User creation
  3. Automatic login
  4. Redirection (configure in protected $redirectTo = '/dashboard';)

5. Email Verification

5.1 Enable Verification

  1. Update User model:
use Illuminate\Contracts\Auth\MustVerifyEmail;

class User extends Authenticatable implements MustVerifyEmail
  1. Add to routes/web.php:
Auth::routes(['verify' => true]);

5.2 Protect Verified-Only Routes

Route::middleware(['auth', 'verified'])->group(function () {
    // Protected routes here
});

5.3 Customize Verification Email

php artisan vendor:publish --tag=laravel-mail

Edit resources/views/vendor/mail/html/verify-email.blade.php


6. Security Best Practices

  1. Rate Limiting: Prevent brute force attacks
// In RegisterController
protected function throttleKey(Request $request)
{
    return Str::lower($request->input('email')).'|'.$request->ip();
}
  1. Honeypot Field: Add to form to catch bots
<input type="text" name="honeypot" style="display:none">

Then validate:

$validator->addRules(['honeypot' => 'max:0']);
  1. Password Hashing: Automatic with Laravel's Hash facade

  2. HTTPS: Ensure your form submits over HTTPS


7. Testing Registration Flow

7.1 Browser Test

// tests/Feature/RegistrationTest.php
public function test_registration_screen_can_be_rendered()
{
    $response = $this->get('/register');
    $response->assertStatus(200);
}

public function test_new_users_can_register()
{
    $response = $this->post('/register', [
        'name' => 'Test User',
        'email' => 'test@example.com',
        'password' => 'Password123!',
        'password_confirmation' => 'Password123!',
    ]);

    $this->assertAuthenticated();
    $response->assertRedirect('/home');
}

Run tests: php artisan test


Conclusion

You've now built a secure, feature-complete registration system in Laravel 12 with:
✅ Customizable registration form
✅ Additional fields (phone number)
✅ Strong password validation
✅ Email verification
✅ Security protections
✅ Automated testing

Next Steps:

  1. Add socialite login (Google, Facebook)
  2. Implement CAPTCHA verification
  3. Create admin approval system for new users

🚀 Your application now has professional-grade user registration!

📌 Need help with specific customizations? Ask in the comments!

Tags

Comments

No comments yet. Be the first to comment!

Please log in to post a comment:

Sign in with Google

Related Posts

Laravel 12 Roles and Permissions Setup: Complete Guide
Kritim Yantra Kritim Yantra
Feb 28, 2025
Laravel 12 & AdminLTE Integration: Setup Your Stunning Admin Dashboard
Kritim Yantra Kritim Yantra
Feb 28, 2025
Laravel 12 Blade Directives: From Beginner to Advanced
Kritim Yantra Kritim Yantra
Mar 11, 2025