Launching Drycomponents - Get Free HTML/React Components built using TailwindCSS

Automatic Facebook Login With Laravel and Vue Js

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 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!

Would like to hear more from me?

Consider Signing up. No spam ever.

Name

Email

Topic