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
- 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.
- Once a fresh app is created, you will be asked to Select a Product. Select Facebook Login, click on Set Up button.
- 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:
http://localhost:8000/auth/google/callbackas 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.
- 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.
.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
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.
Here’s our application’s login screen:
Sign in with your Facebook credentials:
After successful login, the user will be redirected to our application:
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.