How to add OAuth login to a Statamic website

• Understanding OAuth in Statamic
• Step 1: Install Laravel Socialite
• Step 2: Configure OAuth Providers
• Step 3: Update .env and Config Files
• Step 4: Extend Statamic User Authentication
• Step 5: Handling the User Data
• Step 6: Frontend Integration
• Step 7: Test Your OAuth Flow

In the digital world, convenience is king. One area where this rings particularly true is in user authentication. OAuth logins, which allow users to sign in using their existing social media accounts, offer a streamlined, secure alternative to traditional email and password logins. If you're using Statamic for your website, integrating OAuth logins can significantly improve your users' experience. Let's dive into how to implement this feature.

¶Understanding OAuth in Statamic

Statamic, built on top of Laravel, leverages Laravel Socialite for OAuth authentication. This enables your Statamic site to authenticate users through various OAuth providers like Google, Facebook, Twitter, and more.

In Statamic, by default, users are stored in markdown, and not a database. You will likely have a better experience if you move to storing your users in the database. Check out Statamic's guide on setting up users in a database for this.

¶Step 1: Install Laravel Socialite

First, you need to install Socialite in your Statamic project. Run the following Composer command:

composer require laravel/socialite

¶Step 2: Configure OAuth Providers

After installing Socialite, you'll need to set up your desired OAuth providers. For each provider (like Google or Facebook), you need to:

1. Create an application in the provider's developer console.
2. Get the client ID and client secret.
3. Configure callback URLs properly pointing to your Statamic site.

¶Step 3: Update .env and Config Files

Add the client ID and secret for each provider to your .env file:

GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GOOGLE_REDIRECT="https://your-callback-url"

Then, configure the providers in the config/services.php file:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT'),
],

¶Step 4: Extend Statamic User Authentication

You'll need to extend Statamic's user authentication mechanism to handle OAuth logins. This typically involves creating a route and controller for handling the OAuth redirection and callback.

Define routes in routes/web.php:

Route::get('login/{provider}', [OAuthLoginController::class, 'redirectToProvider']);
Route::get('login/{provider}/callback', [OAuthLoginController::class, 'handleProviderCallback']);

Create a controller OAuthLoginController with methods redirectToProvider and handleProviderCallback. These methods will handle the redirection to the OAuth provider and the callback, respectively.

¶Step 5: Handling the User Data

In the callback method, use Socialite to retrieve the user's information from the provider. Then, either find the existing user in your database or create a new one. Here's a basic implementation:

public function handleProviderCallback($provider) {
    $socialUser = Socialite::driver($provider)->user();

    // Find or create a user in your user storage
    $user = User::where('email', $socialUser->email)->firstOrNew([
        // Set attributes like name, email, etc.
    ]);

    // Log the user in
    Auth::login($user);

    return redirect('/'); // Redirect to the intended page
}

¶Step 6: Frontend Integration

On your login page, add buttons or links for each OAuth provider, which redirect to the routes you defined.

<a href="/login/google">Login with Google</a>

¶Step 7: Test Your OAuth Flow

Test the login process thoroughly with each provider to ensure that the user experience is smooth and that all edge cases are handled.

Implementing OAuth logins in Statamic not only adds a layer of security but also significantly enhances user experience by simplifying the login process. With the help of Laravel Socialite and a bit of custom coding, your Statamic site can provide a seamless login experience with users' favorite platforms.