Laravel 10 Login with Twitter OAuth Tutorial

Steps on Laravel 10 Login with Twitter OAuth Tutorial

Step 1: Installing Laravel 10
Step 2: Install Socialite
Step 3: Create Twitter App
Step 4: Configure .env File
Step 5: Create Routes
Step 6: Create Controller Methods
Step 7: Create User Model
Step 8: Test Login
Step 9: Test Login
Conclusion

Step 1: Installing Laravel 10

Before we begin, make sure you have the latest version of Laravel 10 installed on your system. You can install it by running the following command in your terminal:

composer create-project laravel/laravel my-project

Once you have Laravel 10 installed, we can move on to installing Socialite.

Step 2: Install Socialite

To install Socialite, run the following command in your terminal:

composer require laravel/socialite

This will install the latest version of Socialite in your Laravel application.

Step 3: Create Twitter App

Next, we need to create a Twitter app to get the API keys and secrets required for authentication. Follow the steps below to create a Twitter app:

Go to the Twitter Developer Platform and sign in with your Twitter account.
Click on the ‘Create an App’ button and fill in the required information.
Once your app is created, go to the ‘Keys and Tokens’ tab to get your API keys and secrets.

Make sure to keep these API keys and secrets secure, as they will be used to authenticate your application.

Step 4: Configure .env File

In your Laravel application, create a .env file if it doesn’t exist already. Add the following lines to the file:

TWITTER_CLIENT_ID=your-client-id
TWITTER_CLIENT_SECRET=your-client-secret
TWITTER_REDIRECT_URI=http://localhost:8000/login/twitter/callback

Replace your-client-id and your-client-secret with the API keys and secrets you obtained from Twitter. Also, replace http://localhost:8000/login/twitter/callback with the callback URL of your application.

Step 5: Create Routes

In your routes/web.php file, add the following routes:

Route::get('/login/twitter', [App\Http\Controllers\Auth\LoginController::class, 'redirectToTwitter'])->name('login.twitter');
Route::get('/login/twitter/callback', [App\Http\Controllers\Auth\LoginController::class, 'handleTwitterCallback']);

These routes will handle the authentication flow with Twitter.

Step 6: Create Controller Methods

Next, we need to create the controller methods that will handle the authentication flow. In your LoginController.php file, add the following methods:

use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

public function redirectToTwitter()
{
    return Socialite::driver('twitter')->redirect();
}

public function handleTwitterCallback()
{
    $user = Socialite::driver('twitter')->user();
    $authUser = $this->findOrCreateUser($user);
    Auth::login($authUser, true);
    return redirect()->intended('/dashboard');
}

private function findOrCreateUser($twitterUser)
{
    // Find or create user logic here
}

The redirectToTwitter() method will redirect the user to Twitter for authentication. The handleTwitterCallback() method will be called when the user is redirected back to your application from Twitter.

The findOrCreateUser() method is used to find or create a user in your application based on the Twitter user data.

Step 7: Create User Model

Next, we need to create a User model to store the user data in our application. In your app/Models/User.php file, add the following code:

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'twitter_id',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    /**
     * Find or create user based on Twitter data.
     *
     * @param  object  $twitterUser
     * @return User
     */
    public static function findOrCreateByTwitter($twitterUser)
    {
        $user = User::where('twitter_id', $twitterUser->id)->first();

        if ($user) {
            return $user;
        }

        return User::create([
            'name' => $twitterUser->name,
            'email' => $twitterUser->email ?? '',
            'password' => '',
            'twitter_id' => $twitterUser->id,
        ]);
    }
}

This model defines the attributes that can be mass assigned, the attributes that should be hidden for arrays, and the attributes that should be cast to native types. It also defines a findOrCreateByTwitter() method that will be used to find or create a user based on the Twitter user data.

Step 8: Test Login

That’s it! You can now test the Twitter OAuth login functionality in your Laravel application. Visit the /login/twitter route to start the authentication flow with Twitter. Once you authorize your app, you should be redirected to the /dashboard route.

If you encounter any errors, make sure to check your API keys and secrets, and ensure that the callback URL in your Twitter app matches the callback URL in your .env file.

Conclusion

In this tutorial, we learned how to implement Twitter OAuth login in Laravel using Socialite. We created a Twitter app, configured our .env file, defined routes, and created controller methods and a user model to handle the authentication flow. With this functionality in place, your users can now log in to your Laravel application using their Twitter accounts.