Laravel Social Login using Socialite

Hello everyone, welcome back ! Here am going to tell how to implement social logins in your laravel applications using Socialite package. I will cover most popular social sites like Facebook, Google +, Twitter and Github. Lets get started.

First you need to register at those social networks, get some keys like client_id, client_secret.which are used to connect your laravel app with those networks.

  • Facebook Login
  • Google + Login
  • Twitter Login
  • Github Login

Installing Socialite :

Socialite is a laravel package where authentication with different social network providers is a breeze.

Install it using composer by running the following line in root of you project,

composer require laravel/socialite

composer require laravel/socialite

After installing Socialite package, you need to register its service provider. In configurations file config/app.php add the following lines,

‘providers’ => [ // Other service providers… LaravelSocialiteSocialiteServiceProvider::class, ],

    // Other service providers…     LaravelSocialiteSocialiteServiceProvider::class,

You also need to add its facade in aliases array,

‘Socialite’ => LaravelSocialiteFacadesSocialite::class,

‘Socialite’ => LaravelSocialiteFacadesSocialite::class,

Now Socialite is all set up and you are ready to implement social login in your laravel apps. I will go through each of them mentioned above.

Facebook Login using Socialite :

Register yourself at developers.facebook.com.

In the top right corner, if you never developed a facebook app before click ‘Create App’ button or else in select ‘Create App’ option in the drop down below your previously created apps.

Fill your app details like app name, contact email and category,

After creating a sample app, In you setting section, you need to fill details like ‘App Domain/s’ and ‘Website URL’ where you app is used. I just set them to local host for now.

Now we use those ‘App Id’ and ‘App Secret’ as CLIENT_ID and CLIENT_SECRET in you app configuration file. We store those details in .env file and reference them in config/services.php

in you .env file,

FB_CLIENT_ID = Your FB App Id FB_CLIENT_SECRET = Your FB App Secret FB_REDIRECT = ‘http://localhost:8000/callback/facebook’

FB_CLIENT_ID = Your FB App Id FB_CLIENT_SECRET = Your FB App Secret FB_REDIRECT = ‘http://localhost:8000/callback/facebook’

and in your config/services.php file

‘facebook’ => [ ‘client_id’ => env ( ‘FB_CLIENT_ID’ ), ‘client_secret’ => env ( ‘FB_CLIENT_SECRET’ ), ‘redirect’ => env ( ‘FB_REDIRECT’ ) ],

                ‘client_id’ => env ( ‘FB_CLIENT_ID’ ),                 ‘client_secret’ => env ( ‘FB_CLIENT_SECRET’ ),                 ‘redirect’ => env ( ‘FB_REDIRECT’ )

Now i will just add simple link which calls facebook login page,

Login in with Facebook

Login in with Facebook

Note : The following routes and controller functions are similar for all the calls, we only set the client_id and client_secret in .env and config/services.php. For remaining services google +, twitter, github the routes and function are same.

Now it will call the route,

Route::get ( ‘/redirect/{service}’, ‘SocialAuthController@redirect’ );

Route::get ( ‘/redirect/{service}’, ‘SocialAuthController@redirect’ );

the redirect function,

public function redirect($service) { return Socialite::driver ( $service )->redirect (); }

public function redirect($service) {         return Socialite::driver ( $service )->redirect ();

 

After successful login, it will redirect to the url we have set as callback url, I have set it as http://localhost:8000/callback/facebook

the route,

Route::get ( ‘/callback/{service}’, ‘SocialAuthController@callback’ );

Route::get ( ‘/callback/{service}’, ‘SocialAuthController@callback’ );

callback function,

public function callback($service) { $user = Socialite::with ( $service )->user (); return view ( ‘home’ )->withDetails ( $user )->withService ( $service ); }

public function callback($service) {         $user = Socialite::with ( $service )->user ();         return view ( ‘home’ )->withDetails ( $user )->withService ( $service );

Here we get some details like username, email and gender and display them.

@if($service == ‘facebook’) Welcome {{ $details->user[‘name’]}} !
Your email is : {{ $details->user[’email’] }}
You are {{ $details->user[‘gender’] }}. @endif

@if($service == ‘facebook’)     Welcome {{ $details->user[‘name’]}} !
Your email is : {{     $details->user[’email’] }}
You are {{ $details->user[‘gender’] }}.

 

That’s it, folks. We have successfully logged into facebook using Socialite.

Google + Login using Socialite :

First, you need to create a new project at console.developers.google.com

 

After creating your app successfully, Click credentials in left side navigation and select ‘OAuth Consent Screen’ , fill out the details there.

 

Now you need create credentials for your app. Click credentials in left side navigation and select ‘Credentials’. In the dropdown select ‘OAuth client ID’

 

In the OAuth client ID screen, select the type of application, give origin and callback URLs,

 

You also need to enable Google + Api too. Yo will see a ‘ENABLE API’ button, click it.

 

Select Google + in Social API’s.

 

Now you will get the Client ID and Client secret in the credentials page.

 

Now add these credentials in your app’s .env and configservices.php

.env file,

G+_CLIENT_ID = Your G+ Client ID G+_CLIENT_SECRET = Your G+ Client secret G+_REDIRECT = ‘http://localhost:8000/callback/google’

G+_CLIENT_ID = Your G+ Client ID G+_CLIENT_SECRET = Your G+ Client secret G+_REDIRECT = ‘http://localhost:8000/callback/google’

configservices.php

‘google’ => [ ‘client_id’ => env ( ‘G+_CLIENT_ID’ ), ‘client_secret’ => env ( ‘G+_CLIENT_SECRET’ ), ‘redirect’ => env ( ‘G+_REDIRECT’ ) ],

                ‘client_id’ => env ( ‘G+_CLIENT_ID’ ),                 ‘client_secret’ => env ( ‘G+_CLIENT_SECRET’ ),                 ‘redirect’ => env ( ‘G+_REDIRECT’ )

Now I will just add simple link which calls google login page,

Login in with Google

Login in with Google

The routes and controller functions are already covered here.

 

Here we get some details like username, email and gender and display them.

@if($service == ‘google’) Welcome {{ $details->name}} !
Your email is : {{ $details->email }}
Your are {{ $details->user[‘gender’] }}. @endif

@if($service == ‘google’)     Welcome {{ $details->name}} !
Your email is : {{ $details->email }}
Your are {{ $details->user[‘gender’] }}.

 

Kudos ! Successfully implemented Google + login  in your laravel app.

Twitter Login using Socialite :

Register a new app at apps.twitter.com

 

After creating your app, click ‘Keys and Access Tokens’ tab at the top to get Client ID(App ID)  and Client Secret(App Secret).

Laravel Social Login – justlaravel.com

Now I will just add simple link which calls twitter login page,

Login in with Twitter

Login in with Twitter

The routes and controller functions are already covered here.

 

Here we will get some details like username, your tweets, your followers count and count of people whom you follow.

@if($service == ‘twitter’) Welcome {{ $details->name}} !
Your username is : {{ $details->nickname }}
Total Tweets : {{ $details->user[‘statuses_count’]}}
Followers : {{ $details->user[‘followers_count’]}}
Following : {{ $details->user[‘friends_count’]}} @endif

@if($service == ‘twitter’)     Welcome {{ $details->name}} !
Your username is : {{ $details->nickname }}
Total Tweets : {{ $details->user[‘statuses_count’]}}
Followers : {{ $details->user[‘followers_count’]}}
Following : {{ $details->user[‘friends_count’]}}

 

Github Login using Socialite :

Login to you github account and go to settings.

 

Click ‘OAuth applications’ in ‘Developer Settings’ menu at left side.

 

Register a new application.

 

You will get your Client ID and Client secret, place them in your apps’s .env and reference them config/services.php.

.env

GITHUB_CLIENT_ID = Your Github Client ID GITHUB_CLIENT_SECRET = Your Github Client secret GITHUB_REDIRECT = ‘http://localhost:8000/callback/github’

GITHUB_CLIENT_ID = Your Github Client ID GITHUB_CLIENT_SECRET = Your Github Client secret GITHUB_REDIRECT = ‘http://localhost:8000/callback/github’

configservices.php

‘github’ => [ ‘client_id’ => env ( ‘GITHUB_CLIENT_ID’ ), ‘client_secret’ => env ( ‘GITHUB_CLIENT_SECRET’ ), ‘redirect’ => env ( ‘GITHUB_REDIRECT’ ) ]

                ‘client_id’ => env ( ‘GITHUB_CLIENT_ID’ ),                 ‘client_secret’ => env ( ‘GITHUB_CLIENT_SECRET’ ),                 ‘redirect’ => env ( ‘GITHUB_REDIRECT’ )

Now I will just add simple link which calls github login page,

Login in with Github

Login in with Github

The routes and controller functions are already covered here.
We get some details like name, email, total repositories and followers count.

 

Stay tuned for more awesome posts or check some of the previous posts.

You might also like

More Similar Posts