In this tutorial you will learn about the Laravel 8 Socialite OAuth Login with Twitter Example and its application with practical example.
In this Laravel 8 Socialite OAuth Login with Twitter Example tutorial I’ll show you how to integrate socialite Twitter social login in laravel application. In this tutorial you will learn to integrate Twitter login in laravel. In this article we will integrate login with Twitter in laravel 8 application. This tutorial is step by step guide for you on how to integrate Twitter social login in laravel 8 using socialite package.
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 OAuth Login with Twitter Example
In this step by step tutorial I will demonstrate you with example how to integrate Twitter login with your laravel application. Please follow the instruction given below:
- Step 1: Install Laravel Fresh App
- Step 2: Setup Database
- Step 3: Download Socialite Package
- Step 4:Create Twitter App
- Step 5: Add Code In Model and Migration
- Step 6: Add Routes for Twitter App
- Step 7: Create Controller & Methods
- Step 8: Install Laravel Livewire and Jetstream Packages
- Step 9: Update Login View
- Step 10: Run Development Server
Step 1: Install Laravel Fresh App
First of all we need to create a fresh laravel project, download and install Laravel using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Setup Database
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=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
Step 3: Download Socialite Package
In this step we will Install Socialite Package via Composer using following command:
|
1 |
composer require laravel/socialite |
After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.
config/app.php
|
1 2 3 4 5 6 7 8 9 |
'providers' => [ // Other service providers… Laravel\Socialite\SocialiteServiceProvider::class, ], 'aliases' => [ // Other aliases… 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], |
In this step we will create Twitter App for Twitter social login. Use the link provided to create twitter app.
|
1 |
https://apps.twitter.com/ |
After successfully create an app in twitter and get credentials from twitter dashboard, Set client id and client secret config/service.php file :
config/service.php
|
1 2 3 4 5 |
'twitter' => [ 'client_id' => 'your client id', 'client_secret' => 'your client secret', 'redirect' => 'http://localhost:8000/callback/twitter', ], |
Step 5: Add Code In Model and Migration
Now, in this step we will create model and migration file. Please run the following command:
|
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', ]; } |
Next step, Go to app/database/create_users_table.php and put the below code here :
|
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 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('email')->unique()->nullable(); $table->string('provider'); $table->string('provider_id'); $table->timestamp('email_verified_at')->nullable(); $table->string('password')->nullable(); $table->rememberToken()->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('users'); } } |
Step 6: Add Routes for Twitter App
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\TwitterController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- */ Route::get('auth/twitter', [TwitterController::class, 'loginwithTwitter']); Route::get('auth/callback/twitter', [TwitterController::class, 'cbTwitter']); |
Step 7: Create Controller
Now, lets create a controller named TwitterSocialController using command given below –
|
1 |
php artisan make:controller <strong>TwitterSocialController</strong> |
Now, go to app/http/controllers directory and open TwitterSocialController.php file. And put the following code in TwitterSocialController.php 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Auth; use Exception; use Socialite; use App\Models\User; class TwitterController extends Controller { public function loginwithTwitter() { return Socialite::driver('twitter')->redirect(); } public function cbTwitter() { try { $user = Socialite::driver('twitter')->user(); $userWhere = User::where('twitter_id', $user->id)->first(); if($userWhere){ Auth::login($userWhere); return redirect('/home'); }else{ $gitUser = User::create([ 'name' => $user->name, 'email' => $user->email, 'twitter_id'=> $user->id, 'oauth_type'=> 'twitter', 'password' => encrypt('admin595959') ]); Auth::login($gitUser); return redirect('/home'); } } catch (Exception $e) { dd($e->getMessage()); } } } |
Step 8: Install Laravel Livewire and Jetstream Packages
Now, you need to run the following command to install livewire and jetstream package:
|
1 |
composer require laravel/jetstream |
Next, install Jetstream with Livewire:
|
1 |
php artisan jetstream:install livewire |
Now, you need to install and build your NPM dependencies and migrate your database:
|
1 2 3 |
npm install npm run dev |
Now, run the migration to create database table using following artisan command:
|
1 |
php artisan migrate |
Step 9: Update Login View
Now, go to views/auth/ directory and open login.blade.php file, and update the following code into it:
|
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> |
Step 10: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 2 3 4 5 |
http://localhost:8000/login Or direct hit in your browser http://localhost/bloh/public/login |
