Story

Laravel Login with Twitter Tutorial

Comment (0)

Admin

Hello Dev !,

This article will provide an example of laravel login with twitter. I’m going to show you about laravel login with twitter account. This article will give you a simple example of laravel jetstream login with twitter. In this article, we will implement a login with twitter in laravel. So, let us see in detail an example.

As we know social media becomes more and more popular in the world. Everyone has social accounts like Gmail, Facebook, Twitter, etc. I think also most of them have a Twitter account. So if your application has a login with social then it becomes awesome. you got more people to connect with your website because most of the people do not want to fill out the signup or sign-in form. If there log in with social then it becomes awesome.

So if you want to also implement login with a Twitter account then I will help you with step-by-step instructions. let's follow the tutorial and implement it.

Step 1: Install Socialite

In first step we will install Socialite Package that provide api to connect with twitter account. So, first open your terminal and run bellow command:

composer require laravel/socialite

Step 2: Create Twitter App

First we need to create Twitter App and get ID and Secret.l:

Go to Twitter Developer App to click here: https://developer.twitter.com/en/portal/projects-and-apps

config/services.php

return [
....
'twitter' => [
'client_id' => env('TWITTER_CLIENT_ID'),
'client_secret' => env('TWITTER_CLIENT_SECRET'),
'redirect' => env('TWITTER_CLIENT_REDIRECT'),
],
]

Then you need to add twitter client id and client secret in .env file:

.env

TWITTER_CLIENT_ID=xyz
TWITTER_CLIENT_SECRET=123
TWITTER_CLIENT_REDIRECT=http://localhost:8000/auth/twitter/callback

Step 3: Add Database Column

In this step first we have to create migration for add twitter_id in your user table. So let's run bellow command:

php artisan make:migration add_twitter_id_column

Migration

<?php

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

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

/**
* Reverse the migrations.
*
* @return void
*/
public function down(): void
{

}
};

Update mode like this way:

app/Models/User.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 string[]
*/
protected $fillable = [
'name',
'email',
'password',
'twitter_id'
];

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

/**
* The attributes that should be cast.
*
* @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',
];
}

Step 4: Create Routes

After adding twitter_id column first we have to add new route for twitter login. so let's add bellow route in routes.php file.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\TwitterController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');

Route::controller(TwitterController::class)->group(function(){
Route::get('auth/twitter', 'redirectToTwitter')->name('auth.twitter');
Route::get('auth/twitter/callback', 'handleTwitterCallback');
});

Step 5: Create Controller

After add route, we need to add method of twitter auth that method will handle twitter callback url and etc, first put bellow code on your TwitterController.php file.

app/Http/Controllers/TwitterController.php

<?php

namespace App\Http\Controllers;

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

class TwitterController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function redirectToTwitter()
{
return Socialite::driver('twitter')->redirect();
}

/**
* Create a new controller instance.
*
* @return void
*/
public function handleTwitterCallback()
{
try {

$user = Socialite::driver('twitter')->user();

$finduser = User::where('twitter_id', $user->id)->first();

if($finduser){

Auth::login($finduser);

return redirect()->intended('dashboard');

}else{
$newUser = User::updateOrCreate(['email' => $user->email],[
'name' => $user->name,
'twitter_id'=> $user->id,
'password' => encrypt('123456dummy')
]);

Auth::login($newUser);

return redirect()->intended('dashboard');
}

} catch (Exception $e) {
dd($e->getMessage());
}
}
}

Step 6: Update Blade File

Ok, now at last we need to add blade view so first create new file login.blade.php file and put bellow code:

resources/views/auth/login.blade.php

<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 for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>

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

<div class="block mt-4">
<label for="remember_me" class="flex items-center">
<x-jet-checkbox id="remember_me" 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">
{{ __('Log in') }}
</x-jet-button>
</div>
{{-- Laravel Login with Twitter Demo--}}
<div class="flex items-center justify-end mt-4">
<a class="btn" href="{{ route('auth.twitter') }}"
style="background: #1E9DEA; padding: 10px; width: 100%; text-align: center; display: block; border-radius:4px; color: #ffffff;">
Login with Twitter
</a>
</div>
</form>
</x-jet-authentication-card>
</x-guest-layout>