Laravel 5.6 Socialite Facebook Login Tutorial

In one of the previous posts, we worked with project setup in Laravel. For social logins, we also installed a socialite package and configured it to fit our application requirements. We integrated database, endpoints, and controllers too. Though in this post, we will work with the Facebook setup with Laravel, I’ll highly recommend you to see that post first if you haven’t already done that.

# Facebook Login in Laravel

We will first access Facebook Console to fetch Facebook API key and API secret. And later map them with our Laravel application.

# Facebook API

1. Login with your Facebook credentials on developers.facebook.com/apps and create a new app (project). Add a name that you want to display for users.
   
2. Once a fresh app is created, you will be asked to Select a Product. Select Facebook Login, click on Set Up button.
   
3. You will be prompted to select the platform for your app.

You can set the configs from here or directly set the required rules from the Settings tab on the left sidebar under Facebook Login

This is what you’ll see:

4. Add http://localhost:8000/auth/google/callback as Valid OAuth redirect URIs and Save Changes.
   

Make Sure that Client OAuth Login, Web OAuth Login and Use Strict Mode for Redirect URIs are enabled.

5. You can now browse to Dashboard tab (from left sidebar) to get App ID and App Secret. Click on Show button and copy the App secret in a safe place. We will need that in a moment.
   

Hence, we completed the whole flow and got our required parameters. Let us now use them.

# Facebook API Registration for Socialite

We just got the required App ID and App Secret, let us integrate it into our application.

In .env file of the application add:

FACEBOOK_CLIENT_ID=YOUR-FACEBOOK-CLIENT-ID
FACEBOOK_CLIENT_SECRET=YOUR-FACEBOOK-CLIENT-SECRET
FACEBOOK_REDIRECT=http://localhost:8000/auth/facebook/callback

Note that FACEBOOK_REDIRECT key critical. Make sure to add correct URI which must match with one we added in Facebook Developers Console and endpoint in route file, i.e., web.php

Also, map these keys in services config file:

# config/services.php
<?php

return [
    ...
    'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT'),  
    ],
];

And here we complete Facebook integration.

# Test Facebook Login

We can now test the application.

localhost:8000/login

Here’s our application’s login screen:

Sign in with your Facebook credentials:

After successful login, the user will be redirected to our application:

P.S This will work perfectly if you test the facebook auth using the credentials you used to fetch App ID, for others, an error may pop-up during login. All you need is go to App Review tab in the Facebook developer console and enable button for the Make socialite public? (You must also set Privacy Policy URL to do that, but since we are testing for a local app, we will not indulge in it. For web apps in production, you must follow those steps)

Conclusion:

We successfully integrated Facebook login system in Laravel application in this post. We started with Facebook console setup, fetched required keys and incorporated it into the app. We also tested the web application.

It was a short and sweet post with only Facebook integration related stuff in Laravel. We were able to keep this separate because we worked the earlier post to set the stage with a strong base. I believe this is how most of the coding should be. Code smartly and separate the modules as much as possible to keep the logic clear, clean and readable. It also improves the development process in the long run, just like it did for us in this example.

Questions & Comments:

Thanks for reading. Drop your suggestions and questions in the comment section below.