Google SignUp in with Laravel


Today I came up with an interesting article. You want to get the way to do this? OK..First I will tell you about today's tutorial. This is a SIGN UP process using Gmail accounts. Most people say we have to host our web application in a host, to do this.. In Laravel, it's not needed guys! I tried this in my local machine.. Let's start!!!

Here we mainly use Laravel Socialite package.

Step 1 - Create new laravel project

composer create-project laravel/laravel GoogleLogin

Step 2 - Migrate database

Open the project folder and edit database configuration files.

.env file

config/database.php file


Before database migration, do this change to avoid migration errors... In your project folder, open Http/Providers/AppServiceProvider.php file and replace its code with this.

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Schema::defaultStringLength(191);
}

/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
}

Open the database folder and go into migrations folder. Then open users migration file in your text editor. Edit the file like this.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}

Now open a cmd and type this command to migrate database. 

php artisan migrate

You will have the database tables now..


Now go to phpmyadmin and do some change. We have to add a default value for password field. Because it is not taken from the Google sign up. So give any password hash of a string you use as a testing password. Then the given value will be stored as the password for all users. Later you can create a way to change this password after logged in.
Example : 
For 111111 => Hash $2y$10$3GhzenR01ROU/5xeSppb8O570wo9.X0kvgglujG1f0rvyHmi7xzgO


Step 3 - Create the Laravel in-built Login System 

We have to create a login system to log in users. Laravel provides an easy way to do this! Open cmd and type this.

php artisan make:auth

Now we have the login system. This command will auto generate the routes, views, controllers automatically that is needed for login and registration.
Go and see the routes/web.php file..

Step 4 - Create a view for default main view

We need a main view to be displayed when we run the project. Let's create it!
resources/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
}
</style>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div class="jumbotron">
<h3 class="text-center">Google Sign in with Laravel</h3><br>
<a href="/login" style="margin: auto; display: block; font-size: 20px;" class="btn btn-link">Click here to Login</a>
</div>
</div>
<div class="col-lg-3"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

This is the output : 

Step 5 - Include Laravel Socialite package into our project

We need the help of this package to create a Social login. So, open a cmd and type this command to include it.

composer require laravel/socialite

Important - Here I use Laravel 5.6.. If you are going to use version 5.3 or  below, you have to do another steps.. Visit the below link for it.
https://github.com/laravel/socialite/tree/2.0

Step 6 - Create a Google Console project

This is the most important part of the article. We have to use Google API to connect Google login with our project. So, we need to create a new project in Google Developer Console. Sign into a gmail account and type https://console.developers.google.com in your web browser.
I have created a short video to demonstrate the way to do it. Watch this video now..