Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Facebook Login or Signup in laravel 8 9

How to Implement Facebook Login or Signup in laravel 8 / 9 ?

Aman Jain, March 19, 2022March 19, 2022

Facebook login or signup in laravel are demanding from start as it gives user to access the website in single click. Facebook is widely used social media platform therefore most of the users are on it and we can take leverage of it by providing the feature of login and signup through Facebook.

Facebook itself provides SDK and rest apis to implement facebook login and when it comes to laravel, laravel also provide a package named as socialite. Socialite package also provides to implement many other websites like Google, github, twitter etc. but in this article we will cover the facebook login or signup integration. here is the list socialite provides auth

  • facebook
  • twitter (OAuth 1.0)
  • twitter-oauth-2 (OAuth 2.0)
  • linkedin
  • google
  • github
  • gitlab
  • bitbucket

Socialite enhance the user experience through providing single click login and signup authentication and user can access the full features of application without any long steps of verification and signup.

Screenshot 2022 03 19 at 12.55.40 PM
Facebook Login

Let’s implement it with example

Step 1 : Install the package

I assume the you have already installed the laravel and basic connection of it like database connection and composer.

Now install the package using composer in laravel root directory, open the terminal in laravel root directory and run below command

composer require laravel/socialite

And then run composer update

composer update

Step 2 : Add Service provider and alias

Most of the packages comes with laravel package discovery enabled and automatic add service provider to packages built after laravel 5.5 so if your laravel version is greater then 5.5 then you can skip this step.

Search for providers key and Add service provider in config\app.php

'providers' => [
        // ...
        Laravel\Socialite\SocialiteServiceProvider::class,
    ]

Also find alias key and add as below

aliases' => [
        // ...
        'Socialite' => Laravel\Socialite\Facades\Socialite::class,
    ]

Step 3 : Add config in config/services.php

We need to define the credentials like client secret and client id in our services file so that we can configure the login setup.
Add facebook details as below in the array

<?php

return [

   

    'mailgun' => [
        'domain' => env('MAILGUN_DOMAIN'),
        'secret' => env('MAILGUN_SECRET'),
        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
    ],

     ......
    'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'redirect' => 'http://localhost/example-app/public/facebook/callback',
    ]

];

Here we used env function to get the client id and secret so also define it in .env

....
FACEBOOK_CLIENT_ID=1004393507165841
FACEBOOK_CLIENT_SECRET=328798728323b238239232

Step 4 : Create client ID and Client secret

This is most important part of this articles since we can’t use Facebook login without the client id and secret so we need to configure them on facebook developer account

First go to https://developers.facebook.com/apps

then you will see form like this

Facebook login setup
Facebook login setup

Create App

Now, click on Create App Button and select consumer as App Type

Screenshot 2022 03 17 at 7.36.17 AM
Facebook login app type

Add Basic Information

After selection of app type provide basic information and then create app

Screenshot 2022 03 17 at 7.36.43 AM
Facebook Login provide basic info

Add Facebook Login Product to App

After creating the app add Facebook Login product to app so we can get the details and setup guide

Screenshot 2022 03 17 at 7.37.07 AM
Facebook login product

Select platform www(web)

Select the platform you wanted to implement in your application, i have sleeted here WEB and skip all option after selecting.

Screenshot 2022 03 17 at 7.37.21 AM
Facebook Login select platform

Select Settings from side menu

Now from left hand side menu select settings

Screenshot 2022 03 17 at 7.40.12 AM
Facebook Login Client ID and Secret

Now put the details in .env

....
FACEBOOK_CLIENT_ID=1004393507165841
FACEBOOK_CLIENT_SECRET=328798728323b238239232

Step 4 : Create routes

Add appropriate routes to connect our URL to controller therefore open routes/web.php and add below routes

<?php
use Illuminate\Support\Facades\Route;
use \App\Http\Controllers\UserController;

Route::get('/auth/login',[UserController::class,"sociallogin"]);
Route::get('/auth/redirect',[UserController::class,"redirectToFacebook"]);
Route::get('/facebook/callback', [UserController::class,"handleCallback"]);

Here we created one route only that means you can create it anywhere but we are using it only our demo purpose.

Step 4 : Create Controller

Now, create the controller as we have mentioned in routes is PostController and also create three methods create, store and refreshCaptcha so create a file in app\Http\Controllers\PostController.php

<?php

namespace App\Http\Controllers;

class UserController extends Controller
{
    //show the logined user
    public function home(){
        return view("home");
    }
   // show login button view
    public function socialLogin(){
        return view("user.login");
    }
    
   //redirect to facebook login page
    public function redirectToFacebook(){
        return \Socialite::driver('facebook')->redirect();
    }
    // handle the response from facebook login
    public function handleCallback(){
        $user = \Socialite::driver('facebook')->user();
        dd($user);
    }
    
}

Here we created three methods home, socialLogin, redirectToFacebook and handleCallback. home is to show the logined user socialLogin method is to show the login button view, redirectToFacebook method on click of button we can redirect it to facebook login authentcation and last handleCallback to handle the repsonse from facebook.

Step 5 : Create view

We have create the controller and now we will create the view to show the button for sharing on social media

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Readerstacks Implement Facebook Login or Signup in laravel 8 / 9 </title>

  <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.1/css/all.min.css" integrity="sha512-9my9Mb2+0YO+I4PUCSwUYO7sEK21Y0STBAiFEYoWtd2VzLEZZ4QARDrZ30hdM1GlioHJ8o8cWQiy8IAb1hy/Hg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body class="antialiased">
  <div class="container">
    <!-- main app container -->
    <div class="readersack">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <h3>  Implement Facebook Login or Signup in laravel 8 / 9 - Readerstacks</h3>

             <a class="btn btn-success" href="{{url('/auth/redirect')}}">Login With Facebook</a>
             
          </div>
        </div>
      </div>
    </div>
    <!-- credits -->
    <div class="text-center">
      <p>
        <a href="#" target="_top"> Implement Facebook Login or Signup in laravel 8 / 9 - Readerstacks</a>
      </p>
      <p>
        <a href="https://readerstacks.com" target="_top">readerstacks.com</a>
      </p>
    </div>
  </div>
</body>
</html>

and home

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Readerstacks Implement Facebook Login or Signup in laravel 8 / 9 </title>

  <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.1/css/all.min.css" integrity="sha512-9my9Mb2+0YO+I4PUCSwUYO7sEK21Y0STBAiFEYoWtd2VzLEZZ4QARDrZ30hdM1GlioHJ8o8cWQiy8IAb1hy/Hg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body class="antialiased">
  <div class="container">
    <!-- main app container -->
    <div class="readersack">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <h3>  Implement Facebook Login or Signup in laravel 8 / 9 - Readerstacks</h3>

            @if(\Auth::check())
              <div class='dash'>You are logged in as  : {{\Auth::user()->email}} ,  <a href="{{url('logout')}}"> Logout</a></div> 
            @else
            <div class='dash '>
              <div class='error'> You are not logged in  </div>
              <div>  <a href="{{url('login')}}">Login</a> | <a href="{{url('register')}}">Register</a> </div>
            </div>
             
            @endif
             
          </div>
        </div>
      </div>
    </div>
    <!-- credits -->
    <div class="text-center">
      <p>
        <a href="#" target="_top"> Implement Facebook Login or Signup in laravel 8 / 9 - Readerstacks</a>
      </p>
      <p>
        <a href="https://readerstacks.com" target="_top">readerstacks.com</a>
      </p>
    </div>
  </div>
</body>



</html>

Here we used Auth to check the login status and show details.

Screenshot 2022 03 19 at 1.19.34 PM
Screenshot 2022 03 19 at 11.51.13 AM
Screenshot 2022 03 19 at 12.55.40 PM 2

Related

Php Laravel Laravel 9 facebooklaravelloginsignup

Post navigation

Previous post
Next post

Related Posts

Php How to run specific seeder class in laravel

How to run specific seeder class in laravel 9 ?

February 19, 2022February 22, 2022

In our last article we learnt about how to create seeder in laravel but sometimes we only need to run a specific seeders rather then running all so in this article we will cover to run a specific seeder. We will use a simple example of article class and will…

Read More
Php How to Set and Get Cookies in Laravel

How to Set and Get Cookies in Laravel ?

July 25, 2022July 25, 2022

In this article we will learn to set and get cookies in laravel. Cookies are used to store the data in client computer, Cookie can hold tiny information in computer and can retrieve when required for same website. In laravel we can store and fetch cookies using laravel inbuilt methods…

Read More
Php laravel multiple where condition in eloquent

How to use laravel multiple where condition with example ?

March 5, 2022November 8, 2023

In this article i will show you to use laravel multiple where condition in eloquent. In laravel we can create multiple where condition in several ways like using the array of array, associative column and value and using multiple where clause. Sometimes we wanted to use multiple and condition or…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • August 2025
  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • The Transformative Power of Education in the Digital Age
  • Understanding High Vulnerabilities: A Closer Look at the Week of July 14, 2025
  • Exploring Fresh Resources for Web Designers and Developers
  • The Intersection of Security and Technology: Understanding Vulnerabilities
  • Mapping Together: The Vibrant Spirit of OpenStreetMap Japan
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version