Nowadays, it's common to provide login functionality using social media platforms like Google, Facebook, and Twitter, or developer platforms like GitHub. Normally all users are using Facebook, Gmail, etc. So if we provide a way to login to our system so they don't have to fill sign-up forms or they don't need to remember the password for your website and they can easily log in using platforms. It will be easier to access your service with social media login and will provide a better user experience.
In this tutorial, we will guide you to integrate Google login to your application step by step.
For Google login integration in Laravel, you need to go to Google Developer Console and set up google app. It will give you client id and secret and also need to setup an entry point and redirect for our application.
Setting up Google Account/App For Login with Google
Perform below steps to create google app and get credentials.
Step 1: Open Google Developer Console and login into your Google account.
Step 2: On home page, click on Create Project to create a new google app or project.
Step 3: It will show view like below image. Fill in all details and click on create button and it will create a new project.
Step 4: After that, you need to click on left-side menu credentials and appear below the screen. In this screen, you need to select OAuth client ID:
Step 5: After that, the below form will appear. Here From different Application type options select Web application. Once you have selected the Web application option, then one form will appear on web page. It will ask you for some details like name, authorized URLS, and Redirect URL set appropriate values and click on the save button
Step 6: The next screen will be the listing screen. The OAuth2 Client ID table will display the newly created Oauth Client ID. Now click on download button and it will download data into a JSON file.
That JSON file contains the necessary values for setting Laravel login with Google or Gmail. We will use that in further code.
For this example, we will use Laravel Socialite as a support library.
- Step 1: Install Laravel Application
- Step 2: Install Jetstream
- Step 3: Database Configuration
- Step 4: Setting Up Google Account in Our Application
- Step 5: Install Socialite
- Step 6: User Model Changes
- Step 7: Create Necessary Routes
- Step 8: Authentication Functionality
- Step 9: Create Views
- Step 10: Running Application
Create New Laravel Application
Let's start with creating a fresh Laravel application for this example. If you already have an existing application then you can skip this step. As you know you can create a new Laravel application with composer using one of the below commands. So open your terminal and enter the below command :
Here we are using "GoogleLogin" as the project name but you can rename it.
Install Jetstream
Laravel Jetstream provides the application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum , and optional team management features in short all authentication and authorization features are provided with Jetstream. However you can customize those components as per your requirements.
Please check to Create Laravel Application with Jetstream Authentication for complete step-by-step installation.
Let's install Jetstream using Composer. Enter below command to terminal or command prompt to install Jetstream :
It will download Laravel Jetstream to our newly created application.
Jetstream provides two front-end stacks. Which are Livewire and Inertia. In this example, we will use livewire as frontend. Below command will install Jetstream with Livewire.
After installation, we need to install node packages for liveware. Enter the below commands to install & compile npm packages :
It will take some time to download and install node modules. After that it will show Laravel mix build successfully.
Database Configuration
Now it's time to configure a database for our application. If you don't have a database then create new one. After that open your project in text editor and open .env file from root directory. If .env file is missing then copy .env.example and rename it.
After database configuration, migrate the database using below command :
It will create database tables from migration files.
Setting Up Google Account in Our Application
Now our initial application setup is completed. We need to setup Google's secret, client ID, and redirect the URL to our application. So once again open .env file and add below code at last.
Install Socialite
As we know we will use Laravel Socialite package to perform Google authentication. Open your terminal and enter the below command to download and install the Socialite package :
After that, configure this package in app.php file, so go to config directory and open app.php file. we need to add Socialite as provider and alias :
The Socialite package works as a service in our application so we need to configure it into our configuration file for services. For that, open App\Config\services.php file and make below changes
User Model & Migration Changes
Now, We will modify user database table for storing google_id. For that, we need to change into user migration and model. Let's create migration using below command :
It will create databas/migrations/********_add_google_id_column_to_user.php file. Let's modify it as per our requirements.
Open App\Models\User.php and add google_id column to fillable array for mass assignment.
Let's add Google column into users table by migrating database. Open terminal and enter below command :
Create Necessary Routes
Let's add a route for google login and redirect into our application. Open routes\web.php file and make below changes.
Here we added 2 routes in our application. The first one will redirect to Google login page and second one will handle Google login response. Please create those routes as per Google account like if you changed the URL path into your Google console id then it can show 404 Error. So please compare it with Google's Authorized JavaScript Origins and Authorized redirect URLs in google console.
Authentication Functionality
Let's create functionality that will handle operations as per our routing. It's a best practice to create controllers functionality-wise separately. In this application, we will create new controller called Google Controller to handle all Google authentication operations.
Switch back to terminal and enter below command to create Google Controller :
It will create GoogleController.php. Let's modify it as per our requirements.
Here we have created 2 methods that will handle operations as per routes. First method will redirect Google login page and in second method we will check login status. If user logged in then we will check user into our database and add if user is not found.
Create Views
We have used Jetstream authentication so auth views are already created. So we don't have to create new views. we can easily modify it as per our requirements. Open resources\views\auth\login.blade.php file and modify it :
Running Application
Now our application is compatible with Google login. For running application run local server using artisan. Open terminal and enter below command to run the Laravel application :
Open below URL into browser to see output: