User Authentication

Overview

The authentication system provides secure user login and registration functionality for the MACUIN automotive parts platform. It includes dedicated views for user login and new account creation.

Authentication routes are accessible at /login for existing users and /registro for new customer registration.

Key Features

User Login

Secure login for existing customers using email and password

User Registration

New customer registration with complete profile information

Password Recovery

Password reset functionality for account recovery

Laravel Auth

Built on Laravel’s robust authentication foundation

Route Configuration

The login page is defined in routes/web.php:17-19:

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

Registration Route

The registration page is defined in routes/web.php:13-15:

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

User Model

The application uses Laravel’s built-in User model located at app/Models/User.php:10-48:

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var list<string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var list<string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
}

The User model extends Illuminate\Foundation\Auth\User (Authenticatable) and includes the HasFactory and Notifiable traits for factory support and notifications.

User Attributes

The User model defines the following key attributes:

Mass Assignable Fields

name - User’s full name
email - User’s email address (used for login)
password - User’s hashed password

Hidden Fields

These fields are excluded from JSON serialization for security:

password - Never exposed in API responses
remember_token - Used internally for “remember me” functionality

Attribute Casting

email_verified_at - Cast to datetime for email verification timestamps
password - Automatically hashed using Laravel’s password hashing

The login view is located at resources/views/auth/login.blade.php:1-50:

@extends('layouts.app')

@section('content')
<div class="auth-page">
    <!-- Back Link -->
    <a href="{{ route('catalogo') }}" class="back-link">
        <i class="fas fa-arrow-left"></i> Volver
    </a>

    <!-- Auth Container -->
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1 class="auth-logo">MACUIN</h1>
                <h2 class="auth-title">Iniciar Sesión</h2>
                <p class="auth-subtitle">Portal de Clientes</p>
            </div>
        </div>
    </div>
</div>
@endsection

The login form includes two primary input fields (resources/views/auth/login.blade.php:20-41):

<form class="auth-form">
    <div class="form-group">
        <label class="form-label">Correo Electrónico</label>
        <div class="input-wrapper">
            <i class="fas fa-envelope input-icon"></i>
            <input type="email" class="form-input" placeholder="[email protected]">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Contraseña</label>
        <div class="input-wrapper">
            <i class="fas fa-lock input-icon"></i>
            <input type="password" class="form-input" placeholder="********">
        </div>
    </div>

    <div class="form-options">
        <a href="#" class="forgot-password">¿Olvidaste tu contraseña?</a>
    </div>

    <button type="submit" class="btn-auth">Iniciar Sesión</button>
</form>

Email Input

Email address field for user identification

Password Input

Secure password input with masked characters

Forgot Password

Link to password recovery functionality

Submit Button

Button to submit login credentials

The login page includes a link to registration (resources/views/auth/login.blade.php:44-46):

<div class="auth-footer">
    <p>¿No tienes cuenta? <a href="{{ route('registro') }}" class="auth-link">Regístrate</a></p>
</div>

New users can easily navigate to the registration page via the “Regístrate” link at the bottom of the login form.

Registration Page

The registration view is located at resources/views/auth/registro.blade.php:1-70:

@extends('layouts.app')

@section('content')
<div class="auth-page">
   <!-- Back Link -->
    <a href="{{ route('catalogo') }}" class="back-link">
        <i class="fas fa-arrow-left"></i> Volver
    </a>

    <!-- Auth Container -->
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1 class="auth-logo">MACUIN</h1>
                <h2 class="auth-title">Crear Cuenta</h2>
                <p class="auth-subtitle">Registro de nuevo cliente</p>
            </div>
        </div>
    </div>
</div>
@endsection

Registration Form Fields

The registration form collects comprehensive user information (resources/views/auth/registro.blade.php:20-61):

<form class="auth-form">
    <div class="form-group">
        <label class="form-label">Nombre Completo</label>
        <div class="input-wrapper">
            <i class="fas fa-user input-icon"></i>
            <input type="text" class="form-input" placeholder="Juan Pérez">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Correo Electrónico</label>
        <div class="input-wrapper">
            <i class="fas fa-envelope input-icon"></i>
            <input type="email" class="form-input" placeholder="[email protected]">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Teléfono</label>
        <div class="input-wrapper">
            <i class="fas fa-phone input-icon"></i>
            <input type="tel" class="form-input" placeholder="(555) 123-4567">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Contraseña</label>
        <div class="input-wrapper">
            <i class="fas fa-lock input-icon"></i>
            <input type="password" class="form-input" placeholder="********">
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Confirmar Contraseña</label>
        <div class="input-wrapper">
            <i class="fas fa-lock input-icon"></i>
            <input type="password" class="form-input" placeholder="********">
        </div>
    </div>

    <button type="submit" class="btn-auth">Registrarse</button>
</form>

Registration Fields

Field	Type	Purpose
Nombre Completo	text	Customer’s full name
Correo Electrónico	email	Email for login and communications
Teléfono	tel	Contact phone number
Contraseña	password	Account password
Confirmar Contraseña	password	Password confirmation

The registration form includes phone number collection, though this field is not currently in the User model’s fillable attributes and would require a database migration to store.

Existing users can navigate to login (resources/views/auth/registro.blade.php:64-66):

<div class="auth-footer">
    <p>¿Ya tienes cuenta? <a href="{{ route('login') }}" class="auth-link">Inicia sesión</a></p>
</div>

Form Design Pattern

Both authentication forms use a consistent design pattern with icon-enhanced inputs:

<div class="form-group">
    <label class="form-label">Field Label</label>
    <div class="input-wrapper">
        <i class="fas fa-[icon] input-icon"></i>
        <input type="[type]" class="form-input" placeholder="placeholder text">
    </div>
</div>

This pattern provides:

Visual icons for better UX
Consistent spacing and styling
Clear labels and placeholders
Accessible form structure

Password Security

The User model automatically handles password hashing (app/Models/User.php:42-46):

protected function casts(): array
{
    return [
        'email_verified_at' => 'datetime',
        'password' => 'hashed',
    ];
}

Passwords are automatically hashed using Laravel’s secure bcrypt hashing algorithm before being stored in the database.

Authentication Flow

User navigates to /login
Enter email address and password
Click “Iniciar Sesión” to submit credentials
System validates credentials against database
On success, user is authenticated and redirected
On failure, error message is displayed

Registration Flow

User navigates to /registro
Fill in all required fields:
- Full name
- Email address
- Phone number
- Password (entered twice for confirmation)
Click “Registrarse” to submit registration
System validates input and creates new user account
Password is automatically hashed before storage
User is logged in and redirected to the application

Both auth pages include convenient navigation:

Back to Catalog - Both pages have a “Volver” link to return to /catalogo
Login ↔ Registration - Footer links allow easy switching between login and registration
Header Integration - User icon in main header links to /login

The authentication pages maintain the MACUIN branding with the logo prominently displayed in the auth card header.

Integration Points

Authentication integrates with other platform features:

User Icon - Header navigation includes user icon linking to login
Protected Routes - Order history and cart may require authentication
User Sessions - Logged-in users can access personalized features
Remember Token - Supports “remember me” functionality for persistent sessions

Security Features

Password Hashing

Automatic bcrypt hashing for all passwords

Hidden Attributes

Sensitive data excluded from JSON serialization

Remember Token

Secure token-based session persistence

Email Verification

Support for email verification timestamps

Get Started

Docker Setup

Features

Components

Overview

Key Features

User Login

User Registration

Password Recovery

Laravel Auth

Route Configuration

Registration Route

User Model

User Attributes

Mass Assignable Fields

Hidden Fields

Attribute Casting

Email Input

Password Input

Forgot Password

Submit Button

Registration Page

Registration Form Fields

Registration Fields

Registration Footer

Form Design Pattern

Password Security

Authentication Flow

Registration Flow

Navigation Between Auth Pages

Integration Points

Security Features

Password Hashing

Hidden Attributes

Remember Token

Email Verification

Build docs developers (and LLMs) love

Get Started

Docker Setup

Features

Components

​Overview

​Key Features

User Login

User Registration

Password Recovery

Laravel Auth

​Route Configuration

​Login Route

​Registration Route

​User Model

​User Attributes

​Mass Assignable Fields

​Hidden Fields

​Attribute Casting

​Login Page

​Login Form Fields

​Login Form Components

Email Input

Password Input

Forgot Password

Submit Button

​Login Footer

​Registration Page

​Registration Form Fields

​Registration Fields

​Registration Footer

​Form Design Pattern

​Password Security

​Authentication Flow

​Login Flow

​Registration Flow

​Navigation Between Auth Pages

​Integration Points

​Security Features

Password Hashing

Hidden Attributes

Remember Token

Email Verification

Build docs developers (and LLMs) love

Overview

Key Features

Route Configuration

Login Route

Registration Route

User Model

User Attributes

Mass Assignable Fields

Hidden Fields

Attribute Casting

Login Page

Login Form Fields

Login Form Components

Login Footer

Registration Page

Registration Form Fields

Registration Fields

Registration Footer

Form Design Pattern

Password Security

Authentication Flow

Login Flow

Registration Flow

Navigation Between Auth Pages

Integration Points

Security Features