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

Working Demo      Project on Github

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

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...

    Laravel\Socialite\SocialiteServiceProvider::class,
],

You also need to add its facade in aliases array,

'Socialite' => Laravel\Socialite\Facades\Socialite::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.

Working Demo      Project on Github

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'

and in your config/services.php file

'facebook' => [ 
                '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,

<a href="redirect/facebook">Login in with Facebook</a>

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' );

the redirect function,

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' );

callback function,

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')
<div class="title m-b-md">
    Welcome {{ $details->user['name']}} ! <br> Your email is : {{
    $details->user['email'] }} <br> You are {{ $details->user['gender'] }}.
</div>
@endif

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

Working Demo      Project on Github

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 config\services.php

.env file,

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

config\services.php

'google' => [ 
                '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,

<a href="redirect/google">Login in with Google</a>

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')
<div class="title m-b-md">
    Welcome {{ $details->name}} ! <br>
        Your email is : {{ $details->email }} <br>
        Your are {{ $details->user['gender'] }}.
</div>
@endif

 

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

Working Demo      Project on Github

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).

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

<a href="redirect/twitter">Login in with Twitter</a>

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')
<div class="title m-b-md">
    Welcome {{ $details->name}} ! <br> 
    Your username is : {{ $details->nickname }}<br>
    Total Tweets : {{ $details->user['statuses_count']}}<br>
    Followers : {{ $details->user['followers_count']}}<br>
    Following : {{ $details->user['friends_count']}}
</div>
@endif

Working Demo      Project on Github

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'

config\services.php

'github' => [ 
                '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,

<a href="redirect/github">Login in with Github</a>

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

Working Demo      Project on Github

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