{"id":13215,"date":"2020-05-09T11:51:06","date_gmt":"2020-05-09T11:51:06","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=13215"},"modified":"2021-11-08T10:13:32","modified_gmt":"2021-11-08T10:13:32","slug":"how-to-add-sign-in-with-google-feature-in-laravel","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-add-sign-in-with-google-feature-in-laravel\/","title":{"rendered":"How to Add Sign-in with Google feature in Laravel."},"content":{"rendered":"\n

In this tutorial, we\u2019re going learn how to add authentication via Google to a Laravel app. In Short, How to add Sign-in with Google<\/strong> feature in our Laravel Project. For that, we use Laravel Socialite Package which is officially provided by Laravel (you can check Documentation here<\/a>.) <\/p>\n\n\n\n

Socialite supports Facebook, Twitter, LinkedIn, Google, GitHub and Bitbucket.<\/p>\n\n\n\n

Note :-<\/strong> For using Socialite Package, you must have Laravel 5.4 or an Upper version of Laravel in your project. (Recommended 5.5 and above.)<\/strong><\/p>\n\n\n\n

I’m using Laravel 5.8 (version) in my project. So Follow the below Steps to add Sign-in with Google<\/strong> Functionality in your existing Laravel Project.<\/p>\n\n\n\n

Step 1 :-<\/span> <\/strong> Install Socialite using composer by below Command.<\/p>\n\n\n\n

composer require laravel\/socialite<\/strong><\/p>\n\n\n\n

Step 2 :-<\/span><\/strong> Go to config\/services.php<\/strong> and add a new Package as below.<\/p>\n\n\n\n

‘google’ => [
‘client_id’ => ‘GOOGLE_CLIENT_ID’,
‘client_secret’ => ‘GOOGLE_CLIENT_SECRET’,
‘redirect’ => ‘http:\/\/your-callback-url’,
],<\/strong><\/p>\n\n\n\n

We\u2019ll obtain client_id<\/strong>, client_secret<\/strong> and redirect URL<\/strong> in next Step.<\/p>\n\n\n\n

Since we added a new package, make sure to add to the service providers<\/strong> array in config\/app.php<\/strong> (In providers<\/strong> array)<\/p>\n\n\n\n

‘providers’ => [
\/\/ Other service providers\u2026 <\/strong>
Laravel\\Socialite\\SocialiteServiceProvider::class,
],<\/strong><\/p>\n\n\n\n

Add an alias<\/strong> in config\/app.php<\/strong>, so it is easier to reference later.<\/p>\n\n\n\n

‘Socialite’ => Laravel\\Socialite\\Facades\\Socialite::class,<\/strong><\/p>\n\n\n\n

Step 3 :-<\/span><\/strong> Now, Create your app on Google.<\/p>\n\n\n\n

( i ) Create a Project<\/strong> :- <\/span>Go to https:\/\/console.developers.google.com\/projectcreate<\/a> and create a new project as shown below.

\"\"<\/p>\n\n\n\n

( ii )<\/strong> Create credentials<\/strong> :-<\/span> After creating a new project, create credentials.<\/p>\n\n\n\n

First, click on Create credentials<\/strong> and then select OAuth client ID<\/strong>. See the below image.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After that, Select Web application<\/strong> and fill Name<\/span><\/strong>, your_web_URL<\/span><\/strong> and redirect_URL<\/span><\/strong> and then click on create. See the below image for help.<\/p>\n\n\n\n

Redirect URL is like your_web_URL\/login\/google\/callback<\/strong><\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After Clicking on create a Popup Appears with Your_Client_ID<\/strong><\/span> and Your_Client_Secret<\/strong><\/span>. See the Below Image.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

just copy <\/strong>and paste <\/strong>it in the config\/services.php<\/strong> as mentioned in Step 2<\/strong>. See the below image.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4 :-<\/span><\/strong> Handle the route. Go to routes\/web.php<\/span><\/strong>. See the below code.<\/p>\n\n\n\n

Route::get(‘login\/google’, ‘Auth\\LoginController@redirectToProvider’);
Route::get(‘login\/google\/callback’, ‘Auth\\LoginController@handleProviderCallback’);<\/strong><\/p>\n\n\n\n

Step 5 :-<\/span><\/strong> Now go to loginController and paste the below code.<\/p>\n\n\n\n

use Socialite;<\/strong>

public function redirectToProvider()
{
return Socialite::driver(‘google’)->stateless()->redirect();
}<\/strong>

public function handleProviderCallback()
{
$user = Socialite::driver(‘google’)->user();
\/\/ $user->token; (return as your need)<\/span>
}<\/strong><\/p>\n\n\n\n

Step 6 :-<\/span><\/strong> Now, we make Sign-in with Google<\/strong> button. Just copy and paste the below code in your login page.<\/p>\n\n\n\n