Login with Facebook in Laravel 8 with Socialite and Jetstream

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

In this Login with Facebook in Laravel 8 with Socialite and Jetstream tutorial I’ll show you how to integrate facebook login in laravel 8 using Socialite and Jetstream package. Integrating Facebook login in Laravel 8 using Socialite and Jetstream package is much easier. 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.

Login with Facebook in Laravel 8 with Socialite and Jetstream

In this step by step tutorial, you will learn to integrate Facebook login in your laravel 8 application using Socialite and Jetstream. Please follow the steps give below:

Step 1 : Install Laravel 8

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

Step 2 : Database Configuration

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.

.env

Step 3 : Install Jetstream

In this step we will Install Laravel Jetstream Package via Composer using following command:

Now, you have to install livewire with jetstream. Use the following command to install livewire with jetstream in laravel application:

Install necessary NPM dependency:

Start node development server:

Now, in this step we will create model and migration file. Please run the following command:

Step 4 : Install Socialite

In this step we will Install Socialite Package via Composer using following command:

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

config/app.php

Step 5: Create Facebook App

Step 1:-

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.

Step 2:-

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

Step 3:-

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

Step 4:-

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

Now, go to config directory and open service.php file and add the client id, secret and callback url:

Step 6: Add Database Column

database/migrations/2020_09_18_052105_add_facebook_id_column_in_users_table.php

Now, you need to update User model as following:

app/Models/User.php

Step 7: Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Step 8: Create Controller

Now, lets create a controller named FacebookController using command given below –

Now, go to app/http/controllers/ directory and open FacebookController.php. Then put the following code into your FacebookController.php file

app/Http/Controllers/FacebookController.php

Step 9: Update Blade File

Now, we will add facebook login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:

resources/views/auth/login.blade.php

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

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

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