Automatic Facebook Login With Laravel and Vue Js
Jul 16, 2017Laravel socialite provides a nice wrapper for implementing Facebook social login in laravel framework. However, wouldn’t it be cool to perform automatic Facebook login to our user if he has already logged in once previously? Recently, while working on one of my project, I stumbled upon this scenario and I achieved this easily using Vue. So, here I’m going to walk you through step by step procedure to achieve the same.
Crafting new Laravel Application
First, lets create a new laravel application. I’m using Laravel 5.4.
laravel new autologin
Once your installation is complete, we will add facebook_id
column to user migration file. Also do not forget to set password field as nullable (since we’ll not get password
from facebook) and without setting it to nullable will result in exception while creating Facebook user.
Once that is done, migrate the table and add facebook_id
to fillable array in User
model.
Laravel Socialite
Now that our application is ready, lets install laravel socialite package and add its facade and provider class in config/app.php
After registering add the following code to your services.php
file
and then
to your .env
file
Configuring Social Login
For our application we are going to use laravel’s inbuilt authentication system just to save us some time.
php artisan make:auth
Above command will give us the boiler plate. First, we need our user to register with our application via facebook. For that we need to modify our login.blade.php
little bit. Add the following html code at the close of div panel-body
tag
We will create a separate controller called FacebookController.php
to manage facebook login functionality
php artisan make:controller FacebookController.php
After creating the controller, add the following methods to FacebookController.php
and then modify web.php
route file
Modify the welcome.blade.php
to something like below by removing unnecessary codes.
And then lets modify app.blade.php
inside layouts
folder. First, we have to remove laravel’s app.js
file since we do not need that. For this article purpose I’m going to use cdn version of vue js and axios instead of using any package bundler like webpack. After removing app.js, modify login, register list item in app.blade.php
like the below
Add necessary scripts to footer section
Thats all you require to achieve automatic facebook login. But now, lets break the code and review it one by one for better understanding.
Above code will hit facebook server and return user’s data if user have already logged into our application via facebook previously and currently he is logged into facebook on one of his browser tabs. If user is indeed signed in, then it will execute the statusChangeCallback
function
app.statusChangeCallback
is Vue method and has facebook response as parameter
Here, we are checking if response status is connected, which means, he is authenticated user and he is currently logged in to the facebook. If our condition is true, we are going to authenticate our user by sending request to authenticate
route using axios. Authenticate route will in turn call FacebookController@authenticateUser
method.
Here, we will get the user’s facebook id and perform a database check. If we have a user then we are going to log him in and return the user details as json
response. If there is no user, then we will send status as false.
If our response status from authenticate is true we will update our Vue variables. Since Vue performs 2 way binding, it automatically updates the elements as soon as there is a change.
Preventing Automatic login after logout
Now, if user chooses to logout of our application we should not login him/her again with Facebook. So in order to prevent that, we need to add user_logged_out
session by overriding laravel’s default logout method in LoginController.php
. Add the following code to your LoginController file.
Here, we are maintaining user_logged_out
session to check whether if user has logged out of our system. Then on our app.blade.php we will check if user has indeed logout of our application after logging in. If yes, then we are going to prevent facebook call by simple if condition.
Thats it! Thats all you need to do automatic facebook login with Laravel and Vue js.
Happy Coding!