Laravel 5.8 Facebook Login with Socialite

In this tutorial you will learn about the Laravel 5.8 Facebook Login with Socialite and its application with practical example.

Laravel 5.8 Facebook Login with Socialite

As we all know that users are not much interested in filling up long registration form to register with any application. Allowing users to login with their social media accounts is quick and powerful way to get registered/verified users for your laravel application. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application. In this step by step tutorial, you will learn to integrate Facebook login with your laravel application.

Install Laravel 5.8

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

Set Default String Length

Locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

and inside the boot method set a default string length as given below –

So this is how “app/Providers/AppServiceProvider” file looks like –

Install Socialite Package via Composer

After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.

Recommended:-  How to Fix "Port 4200 is already in use" error

config/app.php

Crate Facebook Login App

Go to Facebook’s developers site https://developers.facebook.com/ and log in with your Facebook account. There in Facebook developers Dashboard you have option to Create App. Lets create a Facebook Login App simply providing App Name and Contact Email.

laravel-5-8-facebook-login

Set Redirect URL

After creating the facebook app, go to setting->advanced and set redirect url like below –

laravel-5-8-socialite-facebook-login-set-redirect-url-1

Then, go to Facebook Login -> Settings and scroll down to “Valid OAuth Redirect URL” and set your callback URL like below –

laravel-5-8-socialite-facebook-login-set-redirect-url-2

Get Facebook App Id and Secret Key

laravel-facebook-login-set-redirect-url-3

After creating app, go to Settings -> Basic and get your newly created App ID and App Secret.

Configure Laravel Socialite

Open your application .env files and set FB_CLIENT_ID, FB_CLIENT_SECRET and FB_CALLBACK_URL like below –

.env

Here, Your App Secret becomes client_secret, and App ID becomes your client_id. Now, open config/service.php file and set client id and client secret with call back url like below –

config/service.php

Migrations and User Model

After installing laravel, you will see the some migration files created inside database/migrations directory for creating default create users table and password reset table. Open app/database/create_users_table.php migration file and add provider and provider_id columns to user table and also set the email and password field to nullable like below –

app/database/xxxx_xx_xx_xxxxxx_create_users_table.php

After you added columns provider and provider_id to user table set the email and password field to nullable, run the migration using following command.

Recommended:-  Laravel 5.8 Dropzone Multiple Image Uploading

After this, go to app/User.php and add provider and provider_id to fillable attribute in the User Model.

Authentication Scaffolding

Laravel comes with in-built basic authentication system, use the below command to generate default authentication scaffolding –

This command will generate required Controller files, views and add routes in our web.php routes file that are required for basic authentication system.

Now, open app/routes/web.php file and add following two routes for redirecting the user to the OAuth provider and to handle the callback from provider.

app/routes/web.php

Create Authentication Controllers

Next, we have to create a controller to handle facebook login. Create a controller named SocialController using command given below –

When controller is created successfully go to app/controllers/SocialController.php and put the below code.

app/controllers/SocialController.php

In this controller, we have following two methods –

Recommended:-  Laravel 5.8 New Email Verification

redirect() :- to redirect the user to Facebook

callback() :- to handle callback from Facebook

No, open resources/views/auth/login.blade.php file and add the following code below the closing tag for <div class=”form-group”>. This will append a facebook login button just below the default login form.

resources/views/auth/login.blade.php

Restart Development Server

Restart the development server using following artisan command –

Now, visit the following URL in browser to see the output –

http://localhost:8000/

Output:-

laravel-5-8-socialite-facebook-loginTest Laravel 5.8 Facebook Login

Now, visit the login page to test the facebook login –

http://localhost:8000/login

laravel-5-8-socialite-facebook-login-page

When you click “Facebook” button, you will be redirected/requested to login with facebook. After you successfully login you will be registered and logged in to your application and you will be redirected to user dashboard.

In this tutorial we have learn about the Laravel 5.8 Facebook Login with Socialite and its application with practical example. I hope you will like this tutorial.