In this tutorial you will learn about the Laravel 8 Socialite OAuth Login with Twitter Example Tutorial and its application with practical example.
In this Laravel 8 Socialite OAuth Login with Twitter Example Tutorial I’ll show you how to create OAuth Twitter login in laravel 8 using socialite. In this tutorial you will learn to integrate twitter login with socialite in laravel. In this article we will create login with twitter using socialite in laravel 8 application. In this example I will also guide you through the process to integrate login with twitter using socialite in laravel.
Laravel Socialite Login with Twitter
As we all know that users are not much interested in filling up long registration form to register with any application. Allowing users to login with their social media accounts is quick and powerful way to get registered/verified users for your laravel application. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.
Laravel 8 Socialite OAuth Login with Twitter Example Tutorial
In this step by step tutorial I will demonstrate you how to integrate twitter login with socialite in laravel application. Please follow the instruction given below:
- Step 1: Install Laravel App
- Step 2: Make Database Connection
- Step 3: Install Laravel Livewire and Jetstream Packages
- Step 4: Setting Up Socialite Library
- Step 5: Update Social ID in Database
- Step 6: Add Twitter Client ID and Secret
- Step 7: Build Controller
- Step 8: Add Routes
- Step 9: Update Login View
- Step 10: Run Development Server
Install Laravel App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project laravel/laravel --prefer-dist laravel-twitter-login-example |
Make Database Connection
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db_name DB_USERNAME=root DB_PASSWORD= |
Install Laravel Livewire and Jetstream Packages
In this step, install jetstream laravel auth scaffolding package with livewire. Please follow the instruction.
|
1 |
composer require laravel/jetstream |
composer require laravel/jetstream
|
1 |
php artisan jetstream:install livewire |
After adding Jetstream, you need to install and build your NPM dependencies and migrate your database:
|
1 2 3 4 5 |
npm install npm run dev php artisan migrate |
Setting Up Socialite Library
In this step we will Install Socialite Package via Composer using following command:
|
1 |
composer require laravel/socialite |
Open config/app.php file, plus add the following services in providers and aliases arrays:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.... .... 'providers' => [ .... .... Laravel\Socialite\SocialiteServiceProvider::class, ], 'aliases' => [ .... .... 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], .... .... |
Update Social ID in Database
In this step we will create a migration file. Please run the following command:
|
1 |
php artisan make:migration add_twitter_social_field |
Get inside the database/migration/add_twitter_social_field.php file, add the given below properties migration file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class AddTwitterSocialField extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function ($table) { $table->string('twitter_id')->nullable(); $table->string('oauth_type')->nullable(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function ($table) { $table->dropColumn('twitter_id'); $table->dropColumn('oauth_type'); }); } } |
Additionally, open app/Models/User.php file and register the social login properties in here as well.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?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', 'twitter_id', 'oauth_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', ]; } |
Now, run following command to migrate database schema.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<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 Login with Twitter Demo--}} <div class="flex items-center justify-end mt-4"> <a class="btn" href="{{ url('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> |
