Google authentication with Laravel

Google authentication with Laravel

• First create a Laravel project

        composer create-project --prefer-dist laravel/laravel googleLogin

• Now we have to install Jetstream

        composer require laravel/jetstream

• Now we have to create the authentication. For this you can create basic login, registration and email verification

        php artisan jetstream:install livewire

• Now install the node.js package

        npm install

• Then run

        npm run dev

• Create a database and migrate the tables

        php artisan migrate

• Now, we will install Socialite Package that provide api to connect with google account

        composer require laravel/socialite

• Now you have to create Google App in Google Developer Console
• First create an app in OAuth Consent Screen
• Then go to Credentials and click create credentials and select OAuth client ID

• Choose web application and set the URI as http://localhost:8000. And set the redirecting URI also. This should be same as the redirect value in services.php file. If your site is hosted set the hosted URI
• Save and it will generate the client id and client secret. Set those in the config/services.php

        'google' => [

        'client_id' => 'app id',

        'client_secret' => 'add secret',

        'redirect' => 'http://localhost:8000/auth/google/callback',

        ],

• Add google_id for the user table

        php artisan make:migration add_google_id_column

• Update the newly created migration file

        

• Change the User.php model

<?php

  

namespace App\Models;

  

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Fortify\TwoFactorAuthenticatable;

use Laravel\Jetstream\HasProfilePhoto;

use Laravel\Sanctum\HasApiTokens;

  

class User extends Authenticatable

{

    use HasApiTokens;

    use HasFactory;

    use HasProfilePhoto;

    use Notifiable;

    use TwoFactorAuthenticatable;

  

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    protected $fillable = [

        'name',

        'email',

        'password',

        'google_id'

    ];

  

    /**

     * The attributes that should be hidden for arrays.

     *

     * @var array

     */

    protected $hidden = [

        'password',

        'remember_token',

        'two_factor_recovery_codes',

        'two_factor_secret',

    ];

  

    /**

     * The attributes that should be cast to native types.

     *

     * @var array

     */

    protected $casts = [

        'email_verified_at' => 'datetime',

    ];

  

    /** 

     * The accessors to append to the model's array form.

     *

     * @var array

     */

    protected $appends = [

        'profile_photo_url',

    ];

}

• Create the routes

Route::get('auth/google', [GoogleController::class, 'redirectToGoogle']);

Route::get('auth/google/callback', [GoogleController::class, 'handleGoogleCallback']);

• Create the controller

        php artisan make:controller GoogleController

• Update the controller

<?php

  

namespace App\Http\Controllers;

  

use Illuminate\Http\Request;

use Laravel\Socialite\Facades\Socialite;

use Exception;

use App\Models\User;

use Illuminate\Support\Facades\Auth;

  

class GoogleController extends Controller

{

    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function redirectToGoogle()

    {

        return Socialite::driver('google')->redirect();

    }

        

    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function handleGoogleCallback()

    {

        try {

      

            $user = Socialite::driver('google')->user();

       

            $finduser = User::where('google_id', $user->id)->first();

       

            if($finduser){

       

                Auth::login($finduser);

      

                return redirect()->intended('dashboard');

       

            }else{

                $newUser = User::create([

                    'name' => $user->name,

                    'email' => $user->email,

                    'google_id'=> $user->id,

                    'password' => encrypt('123456dummy')

                ]);

      

                Auth::login($newUser);

      

                return redirect()->intended('dashboard');

            }

      

        } catch (Exception $e) {

            dd($e->getMessage());

        }

    }

}

• Update the welcome.blade file

<x-guest-layout>

    <x-jet-authentication-card>

        <x-slot name="logo">

            <x-jet-authentication-card-logo />

        </x-slot>

 

        <x-jet-validation-errors class="mb-4" />

  

        @if (session('status'))

            <div class="mb-4 font-medium text-sm text-green-600">

                {{ session('status') }}

            </div>

        @endif

  

        <form method="POST" action="{{ route('login') }}">

            @csrf

 

            <div>

                <x-jet-label value="Email" />

                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />

            </div>

  

            <div class="mt-4">

                <x-jet-label value="Password" />

                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />

            </div>

  

            <div class="block mt-4">

                <label class="flex items-center">

                    <input type="checkbox" class="form-checkbox" name="remember">

                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>

                </label>

            </div>

  

            <div class="flex items-center justify-end mt-4">

                @if (Route::has('password.request'))

                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">

                        {{ __('Forgot your password?') }}

                    </a>

                @endif

  

                <x-jet-button class="ml-4">

                    {{ __('Login') }}

                </x-jet-button>

            </div>

            <div class="flex items-center justify-end mt-4">

                <a href="{{ url('auth/google') }}">

                    <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" style="margin-left: 3em;">

                </a>

            </div>

        </form>

    </x-jet-authentication-card>

</x-guest-layout>

• Run php artisan serve
• Well done!!!