Laravel Google Login Socialite Tutorial With Example

Learn on Laravel Google Login Socialite Tutorial With Example today.

We will use socialite package to integrate google plus or gmail login in laravel project.

It provides faster way to user for authentication than that of the traditional email registration process.

First of all, see the below output video.

Move 1. Preparing new project And Socialite

Now run the below command in your terminal.

This command make a fresh new project in your machine. Name of the project will be “laragoogle”

By default, laravel project do not include socialite package.

We need to do it manually. So open your terminal again and write down the following command

Above command will download all the files of socialite package in our laravel project. After this, we are able to use this package in our laravel app.

Move 2. Regarding providers and aliases

Now we need to add one code line for both provides and aliases.

Writing Providers

After importing socialite package, open up your config->app.php file.

In this file, you should find one array called “provides => []”.

In this array, you need to add below line

After adding the line, final source code for provides => []” looks like the below

Writing Aliases

In the same config->app.php file, there is another array ‘aliases’ => []

In this array, add the following source line,

So the final code block for ‘aliases’ => [] is like the following

I have inserted line at the bottom part.

Move 3. Google Console Tasks

We need to create an app in google developer and use their credentials in our project.

So open this URL first : https://console.developers.google.com

Login to your google account if not already. after login, you will see below screen.

laravel google login
Look at the upper left menu bar. I have an app named “MyFirstGCM“. Click on it. If you have not any app, then you might see an option like “create new app“. Click on it.

You will see the following image.

Click on “NEW PROJECT”. Below screen will be opened.

Enter Project name and click on “CREATE” button. Now our app is created successfully. Let us make credentials for this app.

You will see below screen after clicking on CREATE button.

laravel google login

Click on “CREATE Credentials” button. See below image.

Now click on “OAuth client ID” option. Below will be visuals.


Now click on “Configure consent screen”. 

Now one form will be opened like below

 

laravel google login
Enter Application name, Application Home page link, Application privacy policy link etc. and click on SAVE. (Do not click on “Submit for verification” Button)

After this, click on “Credential” from left side panel. Repeat from 4th image. When you reach at 6th image, select “Web Application” option. You will find below image.


Add URLs like http://localhost:8000 and http://localhost:8000/auth/callback/google 

Now click on “Create” Button. You will see below screen


Now we have got our “Client ID” and “Client secret”. Copy both of it. We will use them later.

Now click on Dashboard to go to below screen

Now click on “ENABLE APIS AND SERVICES” 

laravel google login

You will find a lot of apis. So scroll down and find Social apis as per the above image. Click on Google+ API.

laravel google login
Click on “ENABLE” button and we are finally done at google developer console.

Move 4. Using Google Credentials

Now it is time to use the credentials in our laravel project.

Go back to your laravel project and open your .env file.

Write down the below source lines in .env file.

You need to write your Google Client Id and secret in first two lines.

Now open config->services.php file. Add the following code in this file.

So final code for services.php file is as the below

Move 5. Welcome Blade file

Open your resources->views->welcome.blade.php file.

In this file, there are some links like Docs, Laracasts, News, Blogs etc.

We need to add below line near these links.

So final source snippet for welcome.blade.php file is as the below

Look at the bottom lines in above code. I have added our line inside a div with content and title m-b-md class.

When the user clicks on this link, system will start the process of google login. If user is already logged in with browser then it will simply fetch user information, otherwise a window will be opened where user can enter google id and password.

Move 6. Writing Authentication and Routes

Now our task is to enable authentication for our project.

Trigger the below command in the terminal.

Above command will create some file automatically that will integrate primary authentication feature in our laravel project.

  • Now open routes->web.php file to write some routes file.
  • In this file, add the following lines.

First route is pointing to the redirect() method in SocialAuthController file.

Second is giving reference to the callback() method in SocialAuthController file.

So final code block for routes->web.php file is as the following

Move 7. Writing Controller File

Fire up the below command in your terminal.

After this command, you can find a controller file named “SocialAuthController” inside app->Http->Controllers directory.

In this file, you should write down the below source code

Above controller file includes two functions. One is redirect() and another is callback().

redirect() will tell compiler to initiate the google login process.

When user have entered correct email and password, compiler will call callback() function.

It will store the user information like email, name, gender etc. inside the variable $user.

Then it will simply return the view file home.blade.php 

Compiler will pass details using $user and $service.

Move 8. Final Words

Now we have successfully login with google. It is time to display google information.

  • Navigate to the resources->views->home.blade.php file.

In this file, add the following coding lines

This file is the front end file which will be loaded after google login.

Consider the following snippet

One if condition will check the value of $service. If it is google then it will go inside the if condition.

Here, it will print the message using $details variable. We are fetching name and email using this variable.

Download Code For Laravel Google Login Socialite

Click to get full source code

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *