In the quest to get this website up and running, one of the biggest and most important features was interviews. We use Laravel Socialite and Livewire to create a seamless frontend and backend authentication system. Basically if you have ever wanted one of those "Log In With Google" or "Log In With Github" style components, you want Socialite.

Honestly, getting this up and running on my app was WAY easier than I had anticipated. Back in the day, getting OAuth working was a PITA. Even when you had a package that was current, it was still just a headache, at least that is how I remember it. Instead Socialite provides just about the easiest time setting up social media logins is going to be.

Backend First

Anytime we want to conduct an interview, we first come up with a list of questions, and a title.

We set who can fill out the interview, either anyone with the link, or anyone with the link and an active social media account. This allows us to do "anonymous" surveys that attempt to limit people submitting more times than they are supposed to.

Once you have created an interview then it populates the table. There a number of actions available as well.

All in all. the experience crafting the backend UI in Livewire was fun. Crafting the Frontend UI was a bit more of a challenge. And it the reason for this article. Using Laravel Socialite to capture a user's account details.

Here is what I am talking about

Social Login Page (resources/views/auth/social-login.blade.php):

@if(empty($configuredProviders))
    <div class="alert alert-warning text-center">
        <strong>No OAuth providers configured</strong>
    </div>
@else
    <div class="d-grid gap-3">
        @if(in_array('google', $configuredProviders))
        <a href="{{ route('social.redirect', 'google') }}" class="btn btn-outline-danger btn-lg">
            Continue with Google
        </a>
        @endif
    @if(in_array('facebook', $configuredProviders))
    &lt;a href=&quot;{{ route('social.redirect', 'facebook') }}&quot; class=&quot;btn btn-outline-primary btn-lg&quot;&gt;
        Continue with Facebook
    &lt;/a&gt;
    @endif

    @if(in_array('github', $configuredProviders))
    &lt;a href=&quot;{{ route('social.redirect', 'github') }}&quot; class=&quot;btn btn-outline-dark btn-lg&quot;&gt;
        Continue with GitHub
    &lt;/a&gt;
    @endif
&lt;/div&gt;

@endif

Making the Frontend Work

So you can see that we need to set up our $configuredProviders and that involves A LOT of mucking around on each providers website...

Services Configuration (config/services.php)

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT_URI', 'https://yourdomain.com/social/callback/google'),
],
'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT_URI', 'https://yourdomain.com/social/callback/facebook'),
],
'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => env('GITHUB_REDIRECT_URI', 'https://yourdomain.com/social/callback/github'),
],

OAuth Provider Setup

If you're following along at home, here is some information for getting those values for each of the service providers.

Google OAuth

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI: https://yourdomain.com/social/callback/google

Facebook OAuth

1. Go to Facebook Developers
2. Create a new app
3. Add Facebook Login product
4. Configure OAuth settings
5. Add redirect URI: https://yourdomain.com/social/callback/facebook

GitHub OAuth

1. Go to GitHub Settings > Developer settings > OAuth Apps
2. Create new OAuth App
3. Set Authorization callback URL: https://yourdomain.com/social/callback/github

🔄 OAuth Flow

I had AI put together this cool diagram to kinda explain the flow of everything. I really relied heavily on using Cursor.ai to craft most of this. It was one of the first times I really just let AI take the wheel. It was incredibly addicting...

┌─────────────┐    ┌──────────────┐    ┌─────────────┐    ┌─────────────┐
│   User      │    │   Laravel    │    │   OAuth     │    │   Laravel   │
│   clicks    │───▶│   redirects  │───▶│   Provider  │───▶│   callback  │
│   OAuth     │    │   to OAuth   │    │   auth      │    │   processes │
└─────────────┘    └──────────────┘    └─────────────┘    └─────────────┘
                                                                    │
┌─────────────┐    ┌──────────────┐    ┌─────────────┐            │
│   User      │    │   Session    │    │   Database  │            │
│   sees      │◀───│   created    │◀───│   updated   │◀───────────┘
│   verified  │    │   verified   │    │   with OAuth│
│   status    │    │   status     │    │   data      │
└─────────────┘    └──────────────┘    └─────────────┘

🎯 Smart Interview Integration

Here is a little snippet for getting things tied together in your Livewire component.

// Livewire component automatically checks OAuth requirement
public function mount($linkKey)
{
    if ($this->interview && $this->interview->requiresPublicUserDetails()) {
        if (!session('social_verified')) {
            session(['intended_interview_url' => request()->url()]);
            return redirect()->route('social.login');
        }
    }
}

🔐 Social Authentication System Documentation

  _____                     _    _                         _
 / ____|                   | |  | |                       | |
| (___   ___  ___ _   _ ___| |__| |_ _ __ ___   __ _ _ __ | |_
 \___ \ / _ \/ __| | | / __|  __  | | '_ ` _ \ / _` | '_ \| __|
 ____) |  __/ (__| |_| \__ \ |  | | | | | | | | | (_| | | | | 
|_____/ \___|\___|\__,_|___/_|  |_|_|_| |_| |_|\__,_|_| |_|\__|

/ _ | | | |/ _ | | | |/ _ | | | |/ _ | | | |/ _ | | | |
| | | | || | | | | || | | | | || | | | | || | | | | || |
| || |  _  | || |  _  | || |  _  | || |  _  | || |  _  |
_/|| ||_/|| ||_/|| ||_/|| ||___/|| ||

editors note: I have no idea what this ascii art is supposed to be. Claude thought it looked nice when it created this file originally so I left it in.

📝 Notes

X.com (Twitter) Exclusion

X.com OAuth was excluded due to:

• Limited API documentation
• Non-standard OAuth flow
• Complex authentication requirements
• Poor Socialite support

Future Enhancements

• Add more OAuth providers (LinkedIn, Discord, etc.)
• Implement OAuth token refresh
• Add OAuth account linking
• Create OAuth admin panel
• Add OAuth analytics

🤝 Support

For issues or questions about this implementation:

1. Check the troubleshooting section above
2. Review Laravel Socialite documentation
3. Verify OAuth provider settings
4. Check Laravel logs for detailed error messages