How to implement Twitter login in Laravel

Hi guys,

Nowadays, users have less timespan on the website. In that case, we want to register a user on your platform. You should simplify the process of registration and login for your application. Laravel provides a socialite package to reduce the process, i.e., In minimum steps, they connect the user to your application. In this article, we implement Twitter login in laravel.

Step-by-step guide on How to implement Twitter login in laravel:

1. Install package

Install the Socialite package on the laravel application. Run the following command.

composer require laravel/socialite

You need to add the below line of code inside the config/app.php file.

$providers= [
	
	......
	Laravel\Socialite\SocialiteServiceProvider::class,
	......
]; 

$alias = [

	......
	'Socialite' => Laravel\Socialite\Facades\Socialite::class,
	......
]

2. Configure credentials

On the Twitter platform, you need to apply for access and fill out the form. Click Here

You must create a project for getting the API Key and API Secret Key. Afterward, you create an App for auth login. See the below Screenshots:-

Click Here To Check

You can add credentials to the env file and add the environment variable on config/services.php against the Twitter variable.

TWITTER_API_KEY=89fETSF1XXXXXXXXXXXX
TWITTER_API_SECRET=j494USdWXD1gtwZvKmcxfXXXXXXXXXXXXXXXXX
TWITTER_CALLBACK_URL=http://127.0.0.1:8000/auth/twitter

You can add the below code in the services.php file.

'twitter'=>[
    'client_id' => env('TWITTER_API_KEY'),
    'client_secret' => env('TWITTER_API_SECRET'),
    'redirect'=> env('TWITTER_CALLBACK_URL')
]

3. create a column in the user table

Make a migration file that will create a column for the users’ table. Run migration command in your application.

<?php

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

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

        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropColumns('provider');
	Schema::dropColumns('provider_id');
    }
}

Run the php artisan migrate command. Add fields to fillable property on the User.php file.

protected $fillable = [
    'name',
    'email',
    'password',
    'provider',
    'provider_id'
];

4. Create a Controller for social login

Make a controller for social login. In your terminal, run:

php artisan make:controller SocialController

We are adding two methods: redirectToTwitter(), which redirects the user to Twitter to authorize the site, and handleTwitterCallback(), which handles the user’s credentials when called back from Twitter. We load the social driver’s social login. Here, I am loading a Twitter driver.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;
use Inertia\Inertia;
use Illuminate\Support\Facades\Route;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;

class SocialController extends Controller
{
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    public function handleCallback($provider)
    {
        try {

           // Get the user's information from social media
            $socialmediaInfo = Socialite::driver($provider)->user();

           // Find in Database
            $finduser = User::where('provider_id', $user->id)->first();

            if($finduser){
                Auth::login($finduser);
                return redirect('/');
            }else{
                $checkUser = User::where('email', $user->email)->first();
                if($checkUser) {
		    $checkUser->provider = $provider;
                    $checkUser->provider_id = $socialmediaInfo->id;
                    $checkUser->save();
                    Auth::login($checkUser);
                } else {
                    $newUser = User::create([
                        'name' => $user->name,
                        'email' => $user->email,
			'provider'=> $provider,
                        'provider_id'=> $socialmediaInfo->id,
                        'password' => Hash::make('123456dummy')
                    ]);
                    Auth::login($newUser);
                }
                return redirect('/');
            }
        } catch (Exception $e) {
            return Inertia::render('Auth/Login', [
                'canResetPassword' => Route::has('password.request'),
                'status' => 'Something Went wrong!! Try later',
            ]);
        }
    }
}

5. Define the route

You need to define a route for social login in the route/web.php file.

Route::get('auth/{provider}', [SocialController::class, 'redirectToProvider']);
Route::get('auth/{provider}/callback', [SocialController::class, 'handleCallback']);

6. Updating the login view

Open resources/views/auth/login.blade.php. Add the below code and change the button style according to your application UI.

<div class="form-group">
	<div class="col-md-8 col-md-offset-4">
		<a href="{{url('/auth/twitter')}}" class="btn btn-secondary">Login with Twitter</a>
	</div>
</div>

Finally Done ✔️

Now we have successfully integrated Twitter login into your application. We can check our social login. Socialite supports authentication via Facebook, Twitter, LinkedIn, Google, GitHub, GitLab, and Bitbucket. Go to the application login page and click on the login with Twitter button. It redirected the user to the GitHub authorization page. The user authorizes the application, and it will redirect to the dashboard page. If you have any questions, please leave a comment and I will respond as soon as possible.

Thank you for reading this article. Please share this article with your friend circle. That’s it for the day. Stay Connected!
Cheers