Authentication System Overview

Overview

UltraViolet Pro includes a comprehensive authentication system built on Laravel Breeze with Bootstrap styling and Laravel Socialite integration. This provides a complete, production-ready authentication solution with both traditional email/password login and social OAuth providers.

What's Included

🔐 Laravel Breeze Integration

• Email/Password Authentication - Traditional login and registration
• Password Reset - Secure password recovery system
• Email Verification - Optional email verification workflow
• Profile Management - User profile editing and password updates
• Session Management - Secure session handling with "Remember Me"

🌐 Laravel Socialite Integration

• Google OAuth - Sign in with Google accounts
• GitHub OAuth - Sign in with GitHub accounts
• Facebook OAuth - Sign in with Facebook accounts
• Twitter OAuth - Sign in with Twitter accounts
• LinkedIn OAuth - Sign in with LinkedIn accounts
• Discord OAuth - Sign in with Discord accounts

🎨 Three Beautiful Auth Templates

• Basic Layout - Clean, minimal design
• Square Layout - Card-based with artwork
• Wallpaper Layout - Full-screen background with overlay

📱 Responsive Design

• Mobile-first approach
• Touch-friendly interfaces
• Consistent across all devices

Quick Start

1. Install Dependencies

# Install Composer dependencies (includes Socialite)
composer install

# Install NPM dependencies
npm install

2. Set Up Environment

# Copy environment file
cp .env.example .env

# Generate application key
php artisan key:generate

# Run migrations (includes social auth fields)
php artisan migrate

3. Configure OAuth Providers

Add your OAuth app credentials to .env:

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

# GitHub OAuth
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GITHUB_REDIRECT_URI=http://localhost:8000/auth/github/callback

# Facebook OAuth
FACEBOOK_CLIENT_ID=your_facebook_client_id
FACEBOOK_CLIENT_SECRET=your_facebook_client_secret
FACEBOOK_REDIRECT_URI=http://localhost:8000/auth/facebook/callback

# Twitter OAuth
TWITTER_CLIENT_ID=your_twitter_client_id
TWITTER_CLIENT_SECRET=your_twitter_client_secret
TWITTER_REDIRECT_URI=http://localhost:8000/auth/twitter/callback

# LinkedIn OAuth
LINKEDIN_CLIENT_ID=your_linkedin_client_id
LINKEDIN_CLIENT_SECRET=your_linkedin_client_secret
LINKEDIN_REDIRECT_URI=http://localhost:8000/auth/linkedin/callback

# Discord OAuth
DISCORD_CLIENT_ID=your_discord_client_id
DISCORD_CLIENT_SECRET=your_discord_client_secret
DISCORD_REDIRECT_URI=http://localhost:8000/auth/discord/callback

4. Access Authentication Pages

• Login: /login
• Register: /register
• Password Reset: /forgot-password
• Profile: /profile (authenticated users only)

Authentication Templates

Basic Layout

URL: /login?ui=basic

Clean, minimal design perfect for simple applications:

@include('auth.partials.login-form')

Features:

• Centered card layout
• Social login buttons
• Email/password form
• Demo credentials display
• Password reset link

Square Layout

URL: /login?ui=square

Modern card-based design with artwork:

@include('auth.partials.login-form')

Features:

• Split-screen layout
• Left side: Form
• Right side: Artwork
• Professional appearance

Wallpaper Layout

URL: /login?ui=wallpaper

Full-screen background with overlay:

@include('auth.partials.login-form')

Features:

• Large background image
• Overlay form
• Immersive experience
• Perfect for marketing sites

Social Authentication

Supported Providers

How It Works

1. User clicks social login button
2. Redirected to OAuth provider
3. User authorizes application
4. Provider redirects back with code
5. Socialite exchanges code for user data
6. User is created/logged in automatically

Social Login Component

Use the included social login component:

<!-- All providers -->
<x-social-login-buttons />

<!-- Specific providers -->
<x-social-login-buttons :providers="['google', 'github']" />

<!-- Custom styling -->
<x-social-login-buttons 
    :providers="['google', 'github', 'facebook']" 
    class="custom-social-buttons" 
/>

User Model

The User model includes social authentication fields:

protected $fillable = [
    'name',
    'email',
    'password',
    'provider',      // OAuth provider (google, github, etc.)
    'provider_id',   // OAuth provider user ID
    'avatar',        // OAuth provider avatar URL
];

Social User Creation

When a user signs in with a social provider:

1. Check if user exists by email
2. If exists: Update social provider info
3. If not exists: Create new user with social data
4. Log user in automatically

Security Features

🔒 Built-in Security

• CSRF protection on all forms
• Password hashing with bcrypt
• Secure session management
• Rate limiting on auth routes
• Email verification (optional)

🛡️ Social Auth Security

• OAuth state parameter validation
• Provider-specific error handling
• Secure token exchange
• User data validation

🔐 Password Security

• Minimum password requirements
• Password confirmation on registration
• Secure password reset tokens
• "Remember Me" functionality

Customization

Custom Auth Views

Override Breeze views by publishing them:

php artisan vendor:publish --tag=laravel-breeze-views

Custom Social Providers

Add new OAuth providers:

1. Add to config/services.php:

'custom_provider' => [
    'client_id' => env('CUSTOM_CLIENT_ID'),
    'client_secret' => env('CUSTOM_CLIENT_SECRET'),
    'redirect' => env('CUSTOM_REDIRECT_URI'),
],

2. Update SocialiteController:

private function validateProvider($provider)
{
    $allowedProviders = ['google', 'github', 'custom_provider'];
    // ...
}

3. Add to social login component:

@elseif($provider === 'custom_provider')
    <svg><!-- Custom icon --></svg>
    <span>Custom Provider</span>
@endif

Custom Redirects

After successful authentication:

// In SocialiteController
return redirect()->intended(route('admin.dashboard'));

// Custom redirect based on user role
if ($user->isAdmin()) {
    return redirect()->route('admin.dashboard');
} else {
    return redirect()->route('user.dashboard');
}

Testing

Test Authentication

use Tests\TestCase;
use App\Models\User;

class AuthenticationTest extends TestCase
{
    public function test_user_can_login()
    {
        $user = User::factory()->create();

        $response = $this->post('/login', [
            'email' => $user->email,
            'password' => 'password',
        ]);

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

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

        $this->assertDatabaseHas('users', [
            'email' => 'test@example.com',
        ]);
    }
}

Test Social Authentication

use Laravel\Socialite\Facades\Socialite;

public function test_google_redirect()
{
    $response = $this->get('/auth/google');
    $response->assertRedirect();
}

public function test_github_callback()
{
    $mockUser = Mockery::mock('Laravel\Socialite\Two\User');
    $mockUser->shouldReceive('getId')->andReturn('123');
    $mockUser->shouldReceive('getName')->andReturn('Test User');
    $mockUser->shouldReceive('getEmail')->andReturn('test@example.com');
    $mockUser->shouldReceive('getAvatar')->andReturn('https://example.com/avatar.jpg');

    Socialite::shouldReceive('driver->user')->andReturn($mockUser);

    $response = $this->get('/auth/github/callback');
    $response->assertRedirect('/admin');
}

Troubleshooting

Common Issues

1. Social Login Not Working

• Check OAuth app configuration
• Verify redirect URIs match exactly
• Ensure environment variables are set
• Check Laravel logs for errors

2. User Not Created

• Check database connection
• Verify User model fillable fields
• Check for validation errors
• Review SocialiteController logic

3. Redirect Issues

• Check route definitions
• Verify middleware configuration
• Ensure redirect URLs are correct
• Check for infinite redirect loops

Debug Mode

Enable debug mode for detailed error messages:

APP_DEBUG=true
LOG_LEVEL=debug

Logs

Check Laravel logs for authentication issues:

tail -f storage/logs/laravel.log

Next Steps

• [OAuth Setup Guide]({{ route('docs.show', 'authentication/oauth-setup') }}) - Detailed OAuth provider setup
• [Customization Guide]({{ route('docs.show', 'authentication/customization') }}) - Advanced customization options
• [Security Best Practices]({{ route('docs.show', 'authentication/security') }}) - Security recommendations
• [Testing Guide]({{ route('docs.show', 'authentication/testing') }}) - Comprehensive testing strategies

Ready to authenticate? Check out the [OAuth Setup Guide]({{ route('docs.show', 'authentication/oauth-setup') }}) to configure your social providers! 🔐