Add Social Login in Laravel With Socialite
In this post we will give you information about Add Social Login in Laravel With Socialite. Hear we will give you detail about Add Social Login in Laravel With Socialite And how to use it also give you demo for it if it is necessary.
Social login is now an essential part of any site which performs user authentication. It saves the users a lot of time, as they won’t need to fill the whole form. They just sign up with their social account and next time they can log into the website with a single click.
Using social media accounts to sign up for websites is common nowadays and preferred by users because they don’t have to remember a password every time they log in to a website. Even though social signup is easy, you can also inadvertently end up with a bunch of very confused users in an app.
Login with social accounts is a straightforward process and simultaneously enhances the user experience; nowadays, everybody knows a better user experience is the key to any digital product’s success.
What is Laravel Socialite?
Laravel Socialite is a package developed to abstract away any social authentication complexities and boilerplate code into a fluent and expressive interface.
Socialite only supports Google, Facebook, Twitter, Linked In, Github, and Bitbucket as OAuth providers. They won’t be adding any others to the list, however, there’s a community-driven collection called Socialite Providers , which contains plenty of unofficial providers for Socialite.
In this tutorial, we are going to add Social Authentication to a Laravel app through Socialite , an official Laravel package that makes adding social authentication to a Laravel app.
If you want to manage your VPS / VM Server without touching command line go and Checkout this link . ServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in .
Server Requirements
- PHP 7.4
- MySQL
1. Install Laravel Project
First, open Terminal and run the following command to create a fresh laravel project:
composer create-project --prefer-dist laravel/laravel lara-socialite
or, if you have installed the Laravel Installer as a global composer dependency:
laravel new lara-socialite
2. Configure Database Details:
After, Installation Go to the project root directory, open .env file, and set database detail as follow:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
3: Create Auth using scaffold
Now, in this step, we will create auth scaffold command to create a login, register, and dashboard. so run the following commands:
composer require laravel/ui
For Generate Login, Register and Dashboard run the following command:
php artisan ui bootstrap --auth
Here some changes in our default users migration file. We need to set default nullable to our password column because in social account login or register we don’t need password so here we need to set default nullable
to password field.
database / migrations / xxxxxx_create_users_table.php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password')->nullable();
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Run this following command to install node dependency and compile css and js files:
npm install && npm run dev
Social Account Configuration
1. Creating A Facebook App
Open this link and follow the below step to create a Facebook app for client id and secret.
As you can see below the image fill all required fields in this form and click on create app button.
2. Select Platform
Next, let’s add Facebook Login capabilities to our app. Click the plus sign next to Products in the side nav.
choose web as your platform.
3. Set your site URL into your Facebook app
NOTE: You won’t be able to use Facebook Login if your site isn’t HTTPS , or you will run into errors when trying to authenticate users.
For each of the remaining steps, just click on “next” until you get to the last step.
4. Set Redirect URL
As of my requirement we set redirect url like https://localhost:8000/social-login/facebook/callback
. you can set redirect url as of your requirement.
5. Copy Client ID & Secret
Now update our config/services.php
and .env
file.
.env
FACEBOOK_CLIENT_ID='YOUR FACEBOOK CLIENT ID'
FACEBOOK_CLIENT_SECRET='YOUR FACEBOOK CLIENT SECRET'
FACEBOOK_CALLBACK_URL="${APP_URL}/social-auth/facebook/callback"
config / services.php
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('FACEBOOK_CALLBACK_URL'),
]
1. Creating A Github App
Follow this guide to Create a Github App
Go to the GitHub website click on your profile and last click on Settings. After this, you can see this page as shown below image.
After going to this page click on the Developer setting.
In the Developer settings page in the sidebar click on OAuth Apps and Click on Register a new application.
2. Register a new OAuth Application
Fill all the required field to create OAuth Application.
In last step, you can see your Client ID. You can see your Client Secret after click on Generate a new client secret button.
Then update our config/services.php
and the .env
file with your GitHub credentials.
.env
GITHUB_CLIENT_ID='YOUR GITHUB CLIENT ID'
GITHUB_CLIENT_SECRET='YOUR GITHUB CLIENT SECRET'
GITHUB_CALLBACK_URL="${APP_URL}/social-auth/github/callback"
config / services.php
'github' => [
'client_id' => env('GITHUB_CLIENT_ID'),
'client_secret' => env('GITHUB_CLIENT_SECRET'),
'redirect' => env('GITHUB_CALLBACK_URL'),
]
4. Create Social Login Controller, Model and Migration
php artisan make:controller Auth/SocialLoginController
php artisan make:model SocialAccount -m
-m
this option will create migration file.
database / migrations / xxxxxx_create_social_accounts_table.php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
class CreateSocialAccountsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('social_accounts', function (Blueprint $table) {
$table->id();
$table->bigInteger('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
$table->string('provider_name')->nullable();
$table->string('provider_id')->unique()->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('social_accounts');
}
}
Now run this migration command to create tables in database
php artisan migrate
app / Models / SocialAccount.php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class SocialAccount extends Model
{
use HasFactory;
protected $fillable = [
'user_id', 'provider_name', 'provider_id'
];
// User
public function user(){
return $this->belongsTo(User::class);
}
}
app / Models / User.php
Each user can have many linked social accounts, which implies a one-to-many relationship between User
and SocialAccounts
. To define this relationship, we add the following method to the User
model:
namespace AppModels;
use IlluminateContractsAuthMustVerifyEmail;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateFoundationAuthUser as Authenticatable;
use IlluminateNotificationsNotifiable;
class User extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
public function socialAccounts(){
return $this->hasMany(socialAccount::class);
}
}
app / Http / Controllers / Auth / SocialLoginController.php
In Controller We add two function redirectToProvider
and providerCallback
. In redirectToProvider
function we get $provider
as argument in $provider
variable we get facebook, twitter or github then we pass this variable to our socialite drive then we redirect to their sites for authentication. As well as in providerCallback
function we find social user then find that user in our database if we get that account then find that user and login either we create account and user both then login that’s it.
namespace AppHttpControllersAuth;
use AppHttpControllersController;
use IlluminateHttpRequest;
use AppModelsUser;
use AppModelsSocialAccount;
class SocialLoginController extends Controller
{
public function redirectToProvider(String $provider){
return Socialite::driver($provider)->redirect();
}
public function providerCallback(String $provider){
try{
$social_user = Socialite::driver($provider)->user();
// First Find Social Account
$account = SocialAccount::where([
'provider_name'=>$provider,
'provider_id'=>$social_user->getId()
])->first();
// If Social Account Exist then Find User and Login
if($account){
auth()->login($account->user);
return redirect()->route('home');
}
// Find User
$user = User::where([
'email'=>$social_user->getEmail()
])->first();
// If User not get then create new user
if(!$user){
$user = User::create([
'email'=>$social_user->getEmail(),
'name'=>$social_user->getName()
]);
}
// Create Social Accounts
$user->socialAccounts()->create([
'provider_id'=>$social_user->getId(),
'provider_name'=>$provider
]);
// Login
auth()->login($user);
return redirect()->route('home');
}catch(Exception $e){
return redirect()->route('login');
}
}
}
routes / web.php
Add two routes in our routes / web.php. One route for redirect to social site for authentication and other one for get detail about authenticated user.
use AppHttpControllersAuthSocialLoginController;
Route::get('social-auth/{provider}/callback',[SocialLoginController::class,'providerCallback']);
Route::get('social-auth/{provider}',[SocialLoginController::class,'redirectToProvider'])->name('social.redirect');
5. Changes in Logn and Register Blade File
We need to add social account link in our login and register blade file.
resources / view / auth / login.blade.php
@extends('layouts.app')
@section('content')
<div >
<div >
<div >
<div >
<div >{{ __('Login') }}</div>
<div >
<form method="POST" action="{{ route('login') }}">
@csrf
<div >
<label for="email" >{{ __('E-Mail Address') }}</label>
<div >
<input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div >
<label for="password" >{{ __('Password') }}</label>
<div >
<input id="password" type="password" name="password" required autocomplete="current-password">
@error('password')
<span role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div >
<div >
<div >
<input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div >
<div >
<button type="submit" >
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
<h5 >Or</h5>
<div >
<div >
<a href="{{ route('social.redirect','facebook') }}" >Login with Facebook</a>
<a href="{{ route('social.redirect','github') }}" >Login with Github</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
resources / view / auth / register.blade.php
@extends('layouts.app')
@section('content')
<div >
<div >
<div >
<div >
<div >{{ __('Register') }}</div>
<div >
<form method="POST" action="{{ route('register') }}">
@csrf
<div >
<label for="name" >{{ __('Name') }}</label>
<div >
<input id="name" type="text" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<span role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div >
<label for="email" >{{ __('E-Mail Address') }}</label>
<div >
<input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div >
<label for="password" >{{ __('Password') }}</label>
<div >
<input id="password" type="password" name="password" required autocomplete="new-password">
@error('password')
<span role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div >
<label for="password-confirm" >{{ __('Confirm Password') }}</label>
<div >
<input id="password-confirm" type="password" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div >
<div >
<button type="submit" >
{{ __('Register') }}
</button>
</div>
</div>
<h5 >Or</h5>
<div >
<div >
<a href="{{ route('social.redirect','facebook') }}" >Login with Facebook</a>
<a href="{{ route('social.redirect','github') }}" >Login with Github</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Now run the project
php artisan serve
Thank you for reading this blog.
If you want to manage your VPS / VM Server without touching command line go and Checkout this link . ServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in .
Also see: Conditional Classes Blade Directives in Laravel
If you have any queries or doubts about this topic please feel free to contact us . We will try to reach you.
Hope this code and post will helped you for implement Add Social Login in Laravel With Socialite. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs