Lara Dashboard Lara Dashboard
/
main (default) 0.x

Social Authentication

Complete guide to setting up social login with Google, GitHub, Facebook, Twitter/X, and LinkedIn in LaraDashboard.

Social Authentication

LaraDashboard supports social authentication using Laravel Socialite, allowing users to sign in or register using their social media accounts. This guide covers how to configure Google, GitHub, Facebook, Twitter/X, and LinkedIn authentication.

Overview

Social authentication provides:

  • Seamless Registration - Users can sign up with one click
  • Secure Login - No passwords to remember or manage
  • Account Linking - Link multiple social accounts to one user
  • Automatic Email Verification - Email is pre-verified from OAuth provider

Supported Providers

Provider Documentation Developer Console
Google Google Identity Docs Google Cloud Console
GitHub GitHub OAuth Docs GitHub Developer Settings
Facebook Facebook Login Docs Meta for Developers
Twitter/X Twitter OAuth 2.0 Docs Twitter Developer Portal
LinkedIn LinkedIn OAuth Docs LinkedIn Developer Portal

Quick Start

Step 1: Enable Social Login

  1. Navigate to Admin → Settings → Authentication tab
  2. Scroll to Social Authentication section
  3. Enable Social Login toggle

Step 2: Configure a Provider

  1. Enable the provider (e.g., Google)
  2. Enter Client ID and Client Secret
  3. Copy the Callback URL shown
  4. Add the callback URL to your OAuth app settings
  5. Save settings

Step 3: Test

  1. Log out of admin panel
  2. Visit the login page
  3. Social login buttons should appear
  4. Click to test the flow

Provider Setup Guides

Google

Create OAuth Credentials

  1. Go to Google Cloud Console
  2. Create a new project or select existing
  3. Click Create Credentials → OAuth client ID
  4. Select Web application
  5. Configure:
Field Value
Name LaraDashboard (or your app name)
Authorized JavaScript origins https://your-domain.com
Authorized redirect URIs https://your-domain.com/auth/google/callback
  1. Click Create
  2. Copy the Client ID and Client Secret

Configure OAuth Consent Screen

  1. Go to OAuth consent screen in Google Cloud Console
  2. Select External user type
  3. Fill in required fields:
    • App name
    • User support email
    • Developer contact email
  4. Add scopes: email, profile, openid
  5. Add test users (while in testing mode)
  6. Submit for verification when ready for production

LaraDashboard Configuration

Option A: Admin Settings

Client ID: 123456789-xxxxxxxxxx.apps.googleusercontent.com
Client Secret: GOCSPX-xxxxxxxxxxxxxxxx

Option B: Environment Variables

GOOGLE_CLIENT_ID=123456789-xxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxxxxxxxxxx

GitHub

Create OAuth App

  1. Go to GitHub Developer Settings
  2. Click OAuth Apps → New OAuth App
  3. Fill in the form:
Field Value
Application name LaraDashboard
Homepage URL https://your-domain.com
Authorization callback URL https://your-domain.com/auth/github/callback
  1. Click Register application
  2. Copy the Client ID
  3. Click Generate a new client secret
  4. Copy the Client Secret (shown only once!)

LaraDashboard Configuration

Option A: Admin Settings

Client ID: Iv1.xxxxxxxxxxxx
Client Secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Option B: Environment Variables

GITHUB_CLIENT_ID=Iv1.xxxxxxxxxxxx
GITHUB_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Facebook

Create Facebook App

  1. Go to Meta for Developers
  2. Click Create App
  3. Select Consumer or Business app type
  4. Enter app name and contact email
  5. Click Create App

Configure Facebook Login

  1. In your app dashboard, click Add Product
  2. Find Facebook Login and click Set Up
  3. Select Web
  4. Enter your site URL: https://your-domain.com
  5. Go to Facebook Login → Settings
  6. Add Valid OAuth Redirect URI: 
    https://your-domain.com/auth/facebook/callback
  7. Save changes

Get Credentials

  1. Go to Settings → Basic
  2. Copy App ID (this is your Client ID)
  3. Click Show next to App Secret
  4. Copy App Secret (this is your Client Secret)

LaraDashboard Configuration

Option A: Admin Settings

Client ID: 1234567890123456
Client Secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Option B: Environment Variables

FACEBOOK_CLIENT_ID=1234567890123456
FACEBOOK_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Note: Facebook requires app review for public access. During development, add test users in Roles → Test Users.

Twitter/X

Create Twitter App

  1. Go to Twitter Developer Portal
  2. Sign up for a developer account if needed
  3. Create a new Project and App
  4. In your app settings, click Set up under User authentication settings
  5. Configure:
Field Value
App permissions Read (minimum)
Type of App Web App
Callback URI https://your-domain.com/auth/twitter/callback
Website URL https://your-domain.com
  1. Save changes

Get Credentials

  1. Go to Keys and tokens tab
  2. Under OAuth 2.0 Client ID and Client Secret:
    • Copy Client ID
    • Generate and copy Client Secret

LaraDashboard Configuration

Option A: Admin Settings

Client ID: xxxxxxxxxxxxxxxxxxxxxxxx
Client Secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Option B: Environment Variables

TWITTER_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxx
TWITTER_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Note: Twitter requires a developer account with at least Basic access level.

LinkedIn

Create LinkedIn App

  1. Go to LinkedIn Developer Portal
  2. Click Create app
  3. Fill in the form:
Field Value
App name LaraDashboard
LinkedIn Page Select or create a company page
App logo Upload your logo
  1. Click Create app

Configure OAuth Settings

  1. Go to Auth tab
  2. Under OAuth 2.0 settings, add Authorized redirect URL: 
    https://your-domain.com/auth/linkedin/callback
  3. Click Update

Request Products

  1. Go to Products tab
  2. Request access to Sign In with LinkedIn using OpenID Connect
  3. Wait for approval (usually instant for Sign In)

Get Credentials

  1. Go to Auth tab
  2. Copy Client ID
  3. Click eye icon to reveal Client Secret
  4. Copy Client Secret

LaraDashboard Configuration

Option A: Admin Settings

Client ID: xxxxxxxxxxxx
Client Secret: xxxxxxxxxxxxxxxx

Option B: Environment Variables

LINKEDIN_CLIENT_ID=xxxxxxxxxxxx
LINKEDIN_CLIENT_SECRET=xxxxxxxxxxxxxxxx

Callback URLs Reference

Add these callback URLs to your OAuth app configurations:

Provider Callback URL
Google https://your-domain.com/auth/google/callback
GitHub https://your-domain.com/auth/github/callback
Facebook https://your-domain.com/auth/facebook/callback
Twitter/X https://your-domain.com/auth/twitter/callback
LinkedIn https://your-domain.com/auth/linkedin/callback

Important: Replace your-domain.com with your actual domain. Use http://localhost:8000 for local development.

Configuration Methods

Method 1: Admin Settings (Recommended)

Configure credentials through the admin panel:

  1. Go to Settings → Authentication
  2. Enable Social Login
  3. Enable individual providers
  4. Enter credentials
  5. Save

Advantages:

  • No code deployment needed
  • Easy to update
  • Encrypted storage in database

Method 2: Environment Variables

Add credentials to your .env file:

# Google
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

# GitHub
GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret

# Facebook
FACEBOOK_CLIENT_ID=your-client-id
FACEBOOK_CLIENT_SECRET=your-client-secret

# Twitter/X
TWITTER_CLIENT_ID=your-client-id
TWITTER_CLIENT_SECRET=your-client-secret

# LinkedIn
LINKEDIN_CLIENT_ID=your-client-id
LINKEDIN_CLIENT_SECRET=your-client-secret

Advantages:

  • Version controlled (without actual values)
  • Easy deployment configuration
  • Works without database

Priority Order

Settings are loaded in this order (first found wins):

  1. Admin Settings (database)
  2. Environment Variables (.env)

How It Works

User Flow

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   Login Page    │────▶│  OAuth Provider  │────▶│   LaraDashboard │
│                 │     │  (Google, etc.)  │     │                 │
│ [Continue with  │     │                  │     │  User logged in │
│    Google]      │     │  [Authorize]     │     │  or registered  │
└─────────────────┘     └──────────────────┘     └─────────────────┘

Account Behavior

Scenario Behavior
New user, new email Creates new account, auto-verifies email
Existing user, same email Links social account to existing user
Returning social user Logs in directly

Data Stored

For each social account:

  • Provider name (google, github, etc.)
  • Provider user ID
  • Email from provider
  • Avatar URL
  • Access/refresh tokens (encrypted)

Customization

Adding Social Buttons Elsewhere

Use the Blade component anywhere:

<x-auth.social-login-buttons />

{{-- With custom divider text --}}
<x-auth.social-login-buttons divider-text="Or sign up with" />

Extending with Hooks

Add custom logic using hooks:

use App\Enums\Hooks\AuthFilterHook;
use App\Support\Facades\Hook;

// Modify available providers
Hook::addFilter(AuthFilterHook::AUTH_SOCIAL_LOGIN_PROVIDERS, function ($providers) {
    // Remove Facebook
    unset($providers['facebook']);
    return $providers;
});

Custom Redirect After Login

use App\Enums\Hooks\AuthFilterHook;
use App\Support\Facades\Hook;

Hook::addFilter(AuthFilterHook::LOGIN_REDIRECT_PATH, function ($path) {
    // Custom redirect for social logins
    if (session('social_login')) {
        return '/welcome';
    }
    return $path;
});

Security Considerations

Best Practices

  1. Use HTTPS - OAuth requires secure connections in production
  2. Verify Domains - Only add your actual domains to OAuth apps
  3. Rotate Secrets - Periodically regenerate client secrets
  4. Review Permissions - Request only necessary OAuth scopes
  5. Monitor Access - Review connected apps in provider dashboards

Token Storage

  • Access tokens are encrypted at rest
  • Tokens are refreshed automatically when possible
  • Expired tokens are updated on next login

Rate Limiting

Social login routes are rate-limited to prevent abuse:

  • Max 20 attempts per minute per IP

Troubleshooting

Common Issues

"redirect_uri_mismatch" Error

Cause: Callback URL doesn't match OAuth app configuration

Solution:

  1. Copy the exact callback URL from LaraDashboard settings
  2. Add it to your OAuth app's authorized redirect URIs
  3. Ensure protocol matches (http vs https)
  4. Check for trailing slashes

"invalid_client" Error

Cause: Wrong Client ID or Client Secret

Solution:

  1. Regenerate credentials in provider console
  2. Update in LaraDashboard settings
  3. Clear config cache: php artisan config:clear

Social Buttons Not Showing

Cause: Social login not enabled or no providers configured

Solution:

  1. Enable Social Login toggle in settings
  2. Enable at least one provider
  3. Enter valid credentials
  4. Clear view cache: php artisan view:clear

"User cancelled" or "Access denied"

Cause: User declined OAuth permissions

Solution: This is expected behavior. User chose not to authorize.

Facebook: "App Not Setup"

Cause: Facebook app in development mode

Solution:

  1. Add test users in Facebook app settings
  2. Or submit app for review for public access

Twitter: "Something went wrong"

Cause: Incorrect OAuth version or permissions

Solution:

  1. Ensure OAuth 2.0 is enabled
  2. Verify User Authentication Settings are configured
  3. Check API access level (Basic or higher)

Debug Mode

Enable debug mode temporarily to see detailed errors:

APP_DEBUG=true

Check Laravel logs at storage/logs/laravel.log for detailed error messages.

Database Schema

Social accounts are stored in the social_accounts table:

Column Type Description
id bigint Primary key
user_id bigint Foreign key to users
provider string Provider name (google, github, etc.)
provider_user_id string User ID from provider
provider_email string Email from provider
provider_avatar string Avatar URL from provider
access_token text Encrypted access token
refresh_token text Encrypted refresh token
token_expires_at timestamp Token expiry time
created_at timestamp Creation timestamp
updated_at timestamp Last update timestamp

Related Documentation

Quick Reference

Developer Console Links

Provider Console URL
Google console.cloud.google.com/apis/credentials
GitHub github.com/settings/developers
Facebook developers.facebook.com/apps
Twitter/X developer.twitter.com/en/portal/dashboard
LinkedIn linkedin.com/developers/apps

Environment Variables

# Enable all providers via .env
GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=xxx
GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx
FACEBOOK_CLIENT_ID=xxx
FACEBOOK_CLIENT_SECRET=xxx
TWITTER_CLIENT_ID=xxx
TWITTER_CLIENT_SECRET=xxx
LINKEDIN_CLIENT_ID=xxx
LINKEDIN_CLIENT_SECRET=xxx
Edit this page on GitHub
/