In this tutorial you will learn about the Laravel 9 Socialite Login with Linkedin Example and its application with practical example.
In this Laravel 9 Login with Linkedin Example Tutorial I’ll show you how to integrate socialite LinkedIn social login in laravel 9 application. In this tutorial you will learn to integrate LinkedIn login in laravel. In this article we will integrate login with LinkedIn in laravel 9 application.
Laravel 9 Login with Linkedin
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. In this step by step tutorial, you will learn to integrate linkedin login with your laravel 9 application.
Laravel 9 Socialite Login with Linkedin Example
This tutorial is step by step guide for you on how to integrate linkedin social login in laravel 9 using socialite package.
Step 1:- create linkedin app by click the following url :- https://www.linkedin.com/developers/apps/new . And create linkedin app.
Step 2:- After successfully create the app set the redirect URL for example :
Step 3:- Finally, you redirect to dashboard by linkedin.com. So you can copy client id and secret from linkedin app dashboard.
- Install Laravel 9
- Connecting App to Database
- Configure the Linkedin App
- Install Socialite & Configure
- Add Field In Table Using Migration
- Install Jetstream Auth
- Make Routes
- Create Linkedin Login Controller By Command
- Integrate Linkedin Login Button In Login Page
- Start Development Server
Install Laravel 9
First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel Laravel9Linkedin |
Connecting App to 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 |
Configure Linkedin App
In this step, we will create linkedin app for client and secret key, go to following link
|
1 |
https://www.linkedin.com/developers/apps/new |
Now create linkedin app filling the details and create your linkedin app. After creating the app set the redirect URL. Now, copy the client id and secret from linkedin app dashboard.Now, configure Linkedin app with this laravel app. So, open your laravel Linkedin social login project in any text editor. Then navigate the config directory and open service.php file and add the client id, secret and callback url:
|
1 2 3 4 5 |
'linkedin' => [ 'client_id' => 'xxxx', 'client_secret' => 'xxx', 'redirect' => 'http://127.0.0.1:8000/callback/linkedin', ], |
Install Socialite & Configure
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 |
'providers' => [ /* * Package Service Providers... */ Laravel\Socialite\SocialiteServiceProvider::class, ] |
Then add the Facade in config/app.php:
|
1 2 3 4 |
'aliases' => [ ... 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ] |
Add Field In Table Using Migration
Now, we will create a migration file to add social login fields using following command:
|
1 |
php artisan make:migration add_social_login_field |
Now, open the add_social_login_field.php file, which is found inside database/migration directory and add 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 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class AddSoicalLoginField extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function ($table) { $table->string('social_id')->nullable(); $table->string('social_type')->nullable(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function ($table) { $table->dropColumn('social_id'); $table->dropColumn('social_type'); }); } } |
After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:
|
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', 'social_id', 'social_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, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan migrate |
Install Jetstream Auth
In this step, install jetstream laravel auth scaffolding package with livewire. We have provided a complete guide in this Laravel 9 Auth Scaffolding using Jetstream Tutorial.
Make Routes
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 |
use Illuminate\Support\Facades\Route; use App\Http\Controllers\Auth\LinkedinSocialiteController; Route::get('auth/linkedin', [LinkedinSocialiteController::class, 'redirectToLinkedin']); Route::get('callback/linkedin', [LinkedinSocialiteController::class, 'handleCallback']); |
Create Linkedin Login Controller By Command
In this step, run the following command to create LinkedinSocialiteController.php file:
|
1 |
php artisan make:controller LinkedinSocialiteController |
Now, go to app/http/controllers directory and open LinkedinSocialiteController.php file in any text editor. Then add the following code into LinkedinSocialiteController.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 53 54 55 56 57 58 59 60 |
<?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Socialite; use Auth; use Exception; use App\Models\User; class LinkedinSocialiteController extends Controller { /** * Create a new controller instance. * * @return void */ public function redirectToLinkedin() { return Socialite::driver('linkedin')->redirect(); } /** * Create a new controller instance. * * @return void */ public function handleCallback() { try { $user = Socialite::driver('linkedin')->user(); $finduser = User::where('social_id', $user->id)->first(); if($finduser){ Auth::login($finduser); return redirect('/home'); }else{ $newUser = User::create([ 'name' => $user->name, 'email' => $user->email, 'social_id'=> $user->id, 'social_type'=> 'linkedin', 'password' => encrypt('my-linkedin') ]); Auth::login($newUser); return redirect('/home'); } } catch (Exception $e) { dd($e->getMessage()); } } } |
Integrate Linkedin Login Button In Login Page
In this step, integrate linkedin login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:
|
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 |
<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> <a href="{{ url('auth/linkedin') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2"> <strong>Linkedin Login</strong> </a> </div> </form> </x-jet-authentication-card> </x-guest-layout> |
Start 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 |
http://127.0.0.1:8000 |
