How to Create Social Login with Twitter in Laravel 9 App

Laravel Twitter social login tutorial; this detailed guide helps you learn how to create OAuth login with Twitter in laravel application with the help of npm socialite package and Twitter authentication consumer API.

We want to give you an overview of this laravel twitter login example; first, we set up the laravel project using the composer package.

Next, we require to make the laravel and database connection, then move to install required dependencies, afterward create controller likewise the routes; lastly, we set up the login view and test login with Twitter functionalities.

Laravel 9 Twitter Social Login Integration Example

Step 1: Set Up Laravel Project
Step 2: Configure Database in Laravel
Step 3: Add Livewire Library
Step 4: Add Socialite Package
Step 5: Create Social Login Field in User Table
Step 6: Create Twitter App and Register Twitter Keys
Step 7: Create Controller
Step 8: Create Routes
Step 9: Add Login With Twitter Button in View
Step 10: Start Laravel Application

Set Up Laravel Project

Open terminal, execute the mentioned below command to create a new laravel project:

composer create-project laravel/laravel --prefer-dist laravel-demo-app

Configure Database in Laravel

Open and add database details in in .env file to configure the database in laravel app:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=

Add Livewire Library

In this step, you will add third-party packages Livewire and similarly Jetstream:

composer require laravel/jetstream

Next, add Jetstream library using the recommended command:

php artisan jetstream:install livewire

Next, execute set of commands to install NPM dependencies and run migration simultaneously:

npm install

npm run dev

php artisan migrate

Add Socialite Package

Type command to install socialite package in laravel:

composer require laravel/socialite

After installing the library, open config/app.php and register socialite classes as per given below example:

'providers' => [
    Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

Create Social Login Field in User Table

Use following command to create a new migration file, using this file we will define new table properties in existing user table.

php artisan make:migration add_social_login_field

Open and add the suggested code in database/migration/add_social_login_field.php file:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddSocialLoginField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('social_auth_id')->nullable();
            $table->string('social_auth_type')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('social_auth_id');
           $table->dropColumn('social_auth_type');
        });
    }
}

Also, include social login table fields in app/Models/User.php file:

<?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;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;

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

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

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

    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

Type command in terminal to evoke migration:

php artisan migrate

Create Twitter App and Register Twitter Keys

Twitter consumer keys are required to login with Twitter in laravel, so getting a secret consumer key is a straightforward process:

Create a new Twitter app in developers account.
Submit the API form.
From the API Keys tab get Twitter client id and secret key.

Open and add Twitter API keys and callback url in config/services.php file:

return [
    ...
    ...

    'twitter' => [
        'client_id' => 'twitter_consumer_id',
        'client_secret' => 'twitter_consumer_key',
        'redirect' => 'http://127.0.0.1:8000/callback/twitter',
    ],
]

Create Controller

In this step, you have to create a controller with the help of php artisan command:

php artisan make:controller TwitterLoginController

Open and update given below code in app/Http/Controllers/TwitterLoginController.php file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Auth;
use Exception;
use Socialite;
use App\Models\User;


class TwitterLoginController extends Controller
{
    public function login()
    {
        return Socialite::driver('twitter')->redirect();
    }
       
    public function callbackTwitter()
    {
        try {
     
            $user = Socialite::driver('twitter')->user();
      
            $twitterUser = User::where('social_auth_id', $user->id)->first();
      
            if($twitterUser){
      
                Auth::login($twitterUser);
     
                return redirect('/dashboard');
      
            }else{
                $user = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_auth_id'=> $user->id,
                    'social_auth_type'=> 'twitter',
                    'password' => encrypt('user12345')
                ]);
     
                Auth::login($user);
      
                return redirect('/dashboard');
            }
     
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

Create Routes

Create the routes using controller, include the following code in routes/web.php file:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TwitterLoginController;

 
Route::get('twitter-login', [TwitterLoginController::class, 'login']);
Route::get('callback/twitter', [TwitterLoginController::class, 'callbackTwitter']);

Add Login With Twitter Button in View

Open the views/auth/login.blade.php file, create a button with inline styling, pass the route name in the view file:

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        @if (session('status'))
        <div class="mb-4 font-medium text-sm text-green-600">
            {{ session('status') }}
        </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <div>
                <x-jet-label value="{{ __('Email') }}" />
                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required
                    autofocus />
            </div>

            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required
                    autocomplete="current-password" />
            </div>

            <div class="block mt-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>

            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
                @endif

                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
            </div>


            {{-- Laravel Twitter Login Button --}}
            <div class="flex items-center justify-end mt-4">
                <a class="btn" href="{{ url('twitter-login') }}"
                    style="background: #069DE5; padding: 14px; text-align: center; display: block; border-radius:5px; color: #ffffff; width: 100%;">
                    Login with Twitter
                </a>
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

Start Laravel Application

Finally, test the app so execute command to run the laravel app:

php artisan serve

Here is the url on which your app runs:

http://127.0.0.1:8000/login

Laravel Twitter social login tutorial