Automatic Facebook Login With Laravel and Vue JsJul 16, 2017
Laravel 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
Now that our application is ready, lets install laravel socialite package and add its facade and provider class in
After registering add the following code to your
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
and then modify
web.php route file
welcome.blade.php to something like below by removing unnecessary codes.
And then lets modify
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
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
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.