Laravel Google OAuth authentication using Socialite Package

In this section, we are going to learn about Google OAuth authentication. We will use Laravel and the socialite package to do this. Social networks are spreading all over the world, and a large number of people are connected with them. Today, our website requires the implementation of social authentication because social networks such Twitter, Facebook, Github, Google, etc, are connected with many developers, many users, etc. In our application, we will see the process of sign in and sign up into a Google account. Using Laravel, we can very easily register our Google id and login into the Google account. The socialite package is provided by Laravel 5, which is used in social authentication. In order to sign in and sign out, the step by step is described as follows:

Step 1:

In this step, we are going to do Socialite package installation. This package is used to provide fb api, which will help us to connect with Google accounts. For this, we will use our command prompt and run the following command:

When the above package is successfully installed, we will use a file named config file and add aliases and providers into it. Now, we will use a file named config/app.php and then add aliase and service provider into it like this:

'providers' => [
	....
	Laravel\Socialite\SocialiteServiceProvider::class,
],
'aliases' => [
	....
	'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

Step 2:

In this step, we are going to Create Google App. For this, we require the id of the Google client and secret. Using these details, we can get the other user's information. We can use the following link to create the Google app account if we don't have:

https://console.cloud.google.com/projectselector2/apis/dashboard?supportedpurview=project

When we click on this link, we will get the following page:

Laravel Google OAuth authentication using Socialite Package

Now we will click on Credentials. After that, we will select the first option, OAuth. Then we will click on the button named Create new Client ID. After this, we will see the following page:

When we complete the process of creating an account, we are able to copy the id of the user and secret. Now we will use the config file and set the id of an app, secret, and call back url. For this, we will open a file named config/services.php, and then we will set id and secret like this:

config/services.php

return [
	....
	'google' => [
        'client_id' => 'app id',
        'client_secret' => 'add secret',
        'redirect' => 'http://learnl52.hd/auth/google/callback',
    ],
]

Step 3:

In this step, we are going to Create Google login. Now we have to add google_id by creating the migration in our user table. The code to create migration is described as follows:

Migration

Schema::table('users', function ($table) {
    $table->string('google_id');
});

When we successfully add the google_id column, we have to first login into Google by adding the new route. For this, we will use the routes.php file and add the following route code into it like this:

app/Http/routes.php

Route::get('google', function () {
    return view('googleAuth');
});
Route::get('auth/google', 'Auth\AuthController@redirectToGoogle');
Route::get('auth/google/callback', 'Auth\AuthController@handleGoogleCallback');

When we successfully add a route, we have to add the Google auth method. Using this method, we can handle the URL of Google callback, etc. We will use a file named AuthController.php and add the following code into it like this:

app/Http/Controllers/Auth/AuthController.php

namespace App\Http\Controllers\Auth;

use App\User;
use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ThrottlesLogins;
use Illuminate\Foundation\Auth\AuthenticatesAndRegistersUsers;
use Socialite;
use Auth;
use Exception;

class AuthController extends Controller
{

    use AuthenticatesAndRegistersUsers, ThrottlesLogins;

    protected $redirectTo = '/';

    public function __construct()
    {
        $this->middleware('guest', ['except' => 'logout']);
    }

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|confirmed|min:6',
        ]);
    }

    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => bcrypt($data['password']),
        ]);
    }

    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleGoogleCallback()
    {
        try {
            $user = Socialite::driver('google')->user();
            
            $userModel = new User;
            $createdUser = $userModel->addNew($user);
            Auth::loginUsingId($createdUser->id);
            return redirect()->route('home');
        } catch (Exception $e) {
            return redirect('auth/facebook');
        }
    }
}

After this, we have to add the blade view. For this, we will create a new file named googleAuth.blade.php and then add the following code into it like this:

resources/views/googleAuth.blade.php

@extends('layouts.app')
@section('content')
<style type="text/css">
.account-box
{
    border: 2px solid rgba(153, 153, 153, 0.75);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -o-border-radius: 2px;
    z-index: 3;
    font-size: 13px !important;
    font-family: "Helvetica Neue" ,Helvetica,Arial,sans-serif;
    background-color: #ffffff;
    padding: 20px;
}
.logo
{
    background-position: 0 -4px;
    margin: -5px 0 17px 80px;
    position: relative;
    text-align: center;
    width: 138px;
}
.forgotLnk
{
    margin-top: 10px;
    display: block;
}
.or-box
{
    position: relative;
    border-top: 1px solid #dfdfdf;
    padding-top: 20px;
    margin-top:20px;
}
</style>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="account-box">
                <div class="logo ">
                    <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" width="80px" alt=""/>
                </div>
                <form class="form-signin" action="#">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email" required autofocus />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Password" required />
                </div>
                <button class="btn btn-lg btn-block btn-primary" type="submit">
                    Sign in</button>
                </form>
                <a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>
                <div class="or-box">
                    <div class="row">
                        <div class="col-md-12 row-block">
                            <a href="{{ url('auth/google') }}" class="btn btn-lg btn-danger btn-block">
                                <strong>Login With Google</strong>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="or-box row-block">
                    <div class="row">
                        <div class="col-md-12 row-block">
                            <a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Now our above code is ready to run. When we open our URL, the following output will be generated: