Login with Google, Twitter or others in Laravel

Photo by Brett Jordan on Unsplash

Hi, in this post I want to share about Socialite. What is socialite? Socialite is a package that provides an expressive, fluent interface to OAuth authentication with Facebook, Twitter, Google, LinkedIn, GitHub, GitLab and Bitbucket. It handles almost all of the boilerplate social authentication code you are dreading writing. Simply, you can make a something like “Login with Google, Twitter, Facebook etc.” feature in your Laravel app.

Sign in Medium.com

Get Client Id and Client Secret
In this, I will use google if you want use facebook or something else you can find out the way by yourself or if you already have one for your project you can skip this section. Go to console google and get google client id and client secret for your project.

Open Google Cloud Platform

Create new project

Create your project

Select your project

OAuth consent screen

FIll up app information

Scope

You can define your own scope, But I will skip this one and I will skip to add test users too.

Test user

Summary

Create credential

Create OAuth client Id

In this, we will use web application for Application type.

Create OAuth client id (2)

You can name the client whatever you want and add redirect URI to http://127.0.0.1:8000/auth/google/callback or if you use a specific domain you can use your own domain such as https://domain-name/auth/google/callback .

Save your client id and client secret

Create Project
First let’s create a new project, you can use your existing project too. Then set up some configuration in .env file and add some modification before runningphp artisan migrate .

Add your client id and client secret from google and twitter into our .env file. For example :

GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxx
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxx

Then go to users table migration and add some column into the table.

Then run php artisan migrate . After everything is done, we will start to use socialite package.

Socialite
Install socialite package into our project, run this following command on your terminal :

composer require laravel/socialite

Then add socialite into providers and aliases in config/app.php , it will be something like this.

// Add to providers
Laravel\Socialite\SocialiteServiceProvider::class,
// Add to aliases
'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Open config/services.php and add following code in the array return :

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('APP_URL').'/auth/google/callback'
],

Create the auth controller with php artisan make:controller AuthController command, then write some function to handle the authentication.

Add route for Auth redirect and callback in web.php .

// Auth Routes
Route::get('/auth/{driver}', [AuthController::class, 'authRedirect'])->name('auth.redirect');
Route::get('/auth/{driver}/callback', [AuthController::class, 'authRedirect'])->name('auth.callback');

Create your login page and landing page after login. For example :

<?php
use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
    return view('welcome');
});
Route::get('/home', function(){
   return 'Hello'.auth()->user()->name;
})->name('home')->middleware('auth');
Route::get('/login', function(){
    return view('login');
})->name('login');
// Auth Route
Route::get('/auth/{driver}', [AuthController::class, 'authRedirect'])->name('auth.redirect');
Route::get('/auth/{driver}/callback', [AuthController::class, 'authCallback'])->name('auth.callback');

Add your redirect url into <button> / <a> or anything else.

<a href="{{ route('auth.redirect', 'google') }}" class="btn btn-outline-secondary">Login with Google</a>

Then it’s already finished, you can try out to click the login button and it will redirect you to google login oauth url, but if you get error Error 400: redirect_uri_mismatchlike this.

OAuth error

You need to check your redirect url in your console google, if it is correct then try to check in the .env file.

change APP_URL value with http://127.0.0.1:8000 or your domain name http://domain-name/ don’t forget to run php artisan config:cache. Now your OAuth feature is done.

Login with google

Thanks for read my post, share with others if you find this post useful. Please feel free to leave a comment if you have any question or want to discuss. See ya