0

I am using Laravel Socialite for Google and Facebook auth. However, instead of simple buttons, like this:

<a href="{{ route('auth.facebook')}}" class="btn btn-primary">Login with Facebook</a>

I want to use Facebook's and Google's custom buttons like in the picture:

enter image description here

How can I do it? Thanks in advance!

P.s:

I added this code

<div class="fb-login-button" data-size="large" data-button-type="login_with" data-auto-logout-link="false" data-use-continue-as="true"></div>

however I want it to go to {{ route('auth.facebook')}}

Sunil kumawat
  • 804
  • 8
  • 14
Javid Abbasov
  • 214
  • 1
  • 4
  • 16
  • You can't mess with those buttons at all; they're fixed. – ceejayoz Jan 27 '20 at 15:27
  • 1
    This is for Login with Facebook ([docs](https://developers.facebook.com/docs/facebook-login/web)). This uses Facebook’s JavaScript SDK, so you wouldn’t be able to use this style of button to trigger a Socialite authentication flow. – Martin Bean Jan 27 '20 at 15:34

1 Answers1

0

After banging my head for hours I found the work around. In the FAQs Facebook Docs says that:

https://developers.facebook.com/docs/facebook-login/web/login-button/ You can, however you will still need to use the JavaScript SDK partially. Once the login process started by clicking on the button is done, the SDK will have access to an authResponse object using FB.getLoginStatus(). You can use this function to pass the response object to your server-side code to complete any registration that exists there.

So you need to add this script to redirect you after get successful login from facebook:

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId   : 'YOUR_APP_ID',
            session : SESSION_JSON, //optional
            status  : true,
            cookie  : true,
            xfbml   : true,
            version : 'v9.0',
        });

        // whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.facebook', function() {
            window.location.reload();
        });


        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                window.location = "{{ YOUR_SOCIALITE_FACEBOOK_LOGIN_LINK }}";
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });

    };

</script>