At first glance, the source code is based on keppelen/react-facebook-login. And there is a big unsolved issue on Mobile, especially newer iOS safari.

The more interesting is that you remove the isMobile and disableMobileRedirect in this package.

That comes the question, how did you slove It?

I think this is the most interesting thing that encourage others to use this package, and you might want to add in Readme 😄

By the way, I didn't use official version, because the bad typescript support, I need to use the fork version to get render. Hope this package could replace successfully 👍

When on development it is authenticating well but on production it returned status of cancelled I do not know what may be the issue. May you please help

Is this package a drop-in replacement for react-facebook-login? Can I use it without having to make any changes to my code?

By the way, the documentation page appears blank for me...

Thanks!

if I close login window by pressing on 'x' button, nothing returns. And there's no other way to cancel login process, at first click(before you enter your password).
For example if I set a loading modal, on click on 'x' button and try to cancel the login process, pop-up window is closed, but I don't receive any callback about login closed, e.g "Login canceled" or something like this.

@greatSumini I ran the following:

$ yarn add @greatsumini/[email protected]
$ ls node_modules/@greatsumini/react-facebook-login 
CHANGELOG.md  dist  LICENSE  package.json  README.md  renovate.json

And then updated to the latest v2.1.4

$ yarn add @greatsumini/[email protected]
$ ls node_modules/@greatsumini/react-facebook-login
LICENSE  package.json  README.md  renovate.json

And no dist is included.

When importing the component like

import FacebookLogin from '@greatsumini/react-facebook-login';

There is an error

./src/login.js
Cannot find module: '@greatsumini/react-facebook-login'. Make sure this package is installed.

You can install this package by running: yarn add @greatsumini/react-facebook-login.

Hello! First of all, thanks for maintaining a library that does this work of handling login for us. Facebook docs on this are really a hassle, especially with newer technologies such as React, integration is not as seamless.

Now for my question, I was wondering if there is a way inside this library to make get requests to the Graph API. Or should I go straight to the Facebook docs looking for a method that does this?

Sorry if this looks kind of a dumb question. Thanks in advance! :)

related: keppelen/react-facebook-login#328

After a user logged in facebook using this library, later if I want to logout, then how can I logout?

페이스북 로그인에 대해서는 설명이 되어 있는데 로그아웃 할 때는 어떻게 구현해야 로그아웃을 처리할 수 있는지요?

I'm still facing this issue "While resolving: [email protected] Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project" I tried all the solutions mentioned in the "keppelen/react-facebook-login#320", including installing your lib, github does not build without errors, local project is working fine, any help is much appreciated.

add detail usages for each props

• use storybook

• related with keppelen/react-facebook-login#331

add useCustomerChat prop (it append 'xfbml.customerchat' to sdk url)

--- original content ---

I am using this package to enable Facebook login. And using GTM to load Facebook Customer Chat Plugin on my website. However, adding the plugin makes the auth fail with FB.login called before FB.init error - assuming it's because loading the SDK again is override the previous load?

What's the correct way to handle this?

Could I create a PR to modify the base url here to be configurable from the props to be the extended url sdk/xfbml.customerchat.js instead, similar to locale?

Hello Sumin. Nice work on rewriting codebase to typescript. How does one get only authorization code with profile info

https://stackoverflow.com/questions/72854720/react-facebook-login-not-working-on-production

It would be nice if you update the for the api version option for initparams

Hi there, thanks for making this library!

I have decided to implement the sign in flow for my application using the redirect method - I'm wondering what the preferred way of setting and verifying CSRF state in this case is, and how it can be done with this library. What I want to do is have it first redirect to a server side URL that I control (where I can set a CSRF state cookie), and then redirect to the Facebook login flow. It looks like if I do this, then I might not be able to use this library - is there some way that support could be added for this kind of "pre-redirect"?

If you're receptive to the idea, I could suggest something and submit a PR.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/cache action to v4
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @testing-library/react to v15
• chore(deps): update dependency @types/testing-library__jest-dom to v6
• chore(deps): update dependency eslint to v9
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I just saw that you are improving the original react-facebook-login by keppelen. However, do you know how to implement logout in this case? I do not found any solution on it

• playwright

Current I got this issue, after login, then reload the page, and next logout. I got below error. If not reload, it works fine. How can I fix it?

The documentation used to be in the README but it looks like it was replaced by the storybook which is not working at the moment.

Hi,

it looks like your documentation is outdated. I follow your example for client and without setting correct version in init method i end up with FB error "init is not called with valid version."
When i use valid version and click on login i end up in error facebook page "Sorry, something went wrong." but i cant identify what is the problem.

I am getting the error facebookNotLoaded. Do I need to load some sdk for this to work?

this is what I have:

import React from "react";
import FacebookLogin from "@greatsumini/react-facebook-login";

const responseFacebook = (response) => {
  console.log(response);
};

export default function FacebookLoginComp({ data, title }) {
  return (
    <FacebookLogin
      appId="{APP_ID}"
      initParams={{
        version: "v14.0",
        xfbml: true,
      }}
      scope="public_profile,instagram_basic,instagram_manage_insights,pages_read_engagement,pages_show_list"
      onFail={(e) => console.log("error", e)}
      onSuccess={responseFacebook}
      onProfileSuccess={responseFacebook}
    />
  );
}

from keppelen/react-facebook-login#327

--- original content ---
Hi, first of all thanks for this amazing library. I have encountered an issue while integrating this library with other login methods also present. Everything works fine until I get redirected from apples authentication with a query parameter code and the facebook popup would automatically open up.

I am not sure what the behavior should be, but in this case it's not creating an issue for me where I just want the app to continue with apple's login.

I think the condition can be corrected here in this function maybe but I am not sure.

// src/facebook.js
isRedirectedFromFb() {   
      const params = window.location.search;    
      return (      decodeParamForKey(params, 'state') === 'facebookdirect' && (decodeParamForKey(params, 'code') ||  
      decodeParamForKey(params, 'granted_scopes'))    );  
}
```

After successfully logging in, the callback for onSuccess is not called.

When you click the login with facebook button again, it now calls the onSuccess callback.

Basically you need to click the login button 2 times to show that you're authenticated

I'm developing in localhost:3000 with HTTPS=true set in package.json

import React, { useEffect } from 'react';
import { ButtonProps } from '@mantine/core';
import FacebookLogin from '@greatsumini/react-facebook-login';

export function FacebookButton(props: ButtonProps<'button'>) {
  return (
    <FacebookLogin
      appId=''
      onSuccess={(response) => {
        console.log('Login Success!', response);
      }}
      onFail={(error) => {
        console.log('Login Failed!', error);
      }}
      onProfileSuccess={(response) => {
        console.log('Get Profile Success!', response);
      }}
    />
  );
}

Hi,

I am using this to sign in with facebook and I get a white page in the popup after accepting the permission and it won't close and all confirmation don't work and when I close it i get status loginCancelled but it was not.

I do use API v13.0

Code to reproduce:

const handleResponse = (response) => {
  console.log("response", response)
}

return (
  <FacebookLogin
    appId="{APP_ID}"
    initParams={{
      version: 'v13.0',
      xfbml: true,
    }}
    scope="public_profile,instagram_basic,instagram_manage_insights,pages_read_engagement,pages_show_list"
    onFail={(e) => console.log('error', e)}
    onSuccess={handleResponse}
    onProfileSuccess={handleResponse}
  />
)

Facebook app only have Facebook login and Instagram app enabled. With correct redirect uri and Login with the JavaScript SDK set to Yes.

The page in the popup window get white/gray after clicking Continue As ... or Continue at the popup

Thank you for creating this React component! It's super useful!

I have one question. I am looking at https://developers.facebook.com/docs/facebook-login/facebook-login-for-business/ and would like to use Facebook login for business instead of normal Facebook login. I am wondering if that's possible with your React component, and if so I would like to know how to do it.

when user log in, i can receive user's information excepted token or credential
i need credential, then how do i get receive credential?

Hello, I am using this plugin and react-messenger-chat-plugin` together in my project. Because my project have messenger chat and facebook login features. When I use this two plugin together then in facebook login component onclick do not open any popup. You can check up it here - https://www.nekmart.com/users/login.

Instead of messenger plugin I use messenger script-

<div id="fb-root"></div>
            <div id="fb-customer-chat" className="fb-customerchat"></div>
            <Script id="facebook-messenger1" dangerouslySetInnerHTML={{
              __html: `var chatbox = document.getElementById('fb-customer-chat');
              chatbox.setAttribute("page_id", "app_id");
              chatbox.setAttribute("attribution", "biz_inbox");`
            }} />
            <Script
              id="facebook-messenger"
              dangerouslySetInnerHTML={{
                __html: `
                window.fbAsyncInit = function() {
                  FB.init({
                    xfbml: true,
                    version: 'v15.0'
                  });
        };
  
                (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
                fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
            `,
              }}
            />

I am getting same problem popup not opening. Please suggest me how can I solve this kind of issue.

If there is no way to use this plugin together, Then I have to use useRedirect. If I use useRedirect then how can I find acesssToken and where?

Hello, I'm encountering the following error after clicking the Facebook Login button. Just a basic implementation as suggested in the docs. The popup opens and closes immediately.

Any ideas?

Thanks a lot.

You are overriding current access token, that means some other app is expecting different access token and you will probably break things. Please consider passing access_token directly to API parameters instead of overriding the global settings.

related: keppelen/react-facebook-login#329

The pop-up does not close after a successful log-in. The pop-up stays open and you can browse your facebook content in the pop-up.

I'm developing in localhost:3000 with HTTPS=true set in package.json

import React, { useEffect } from 'react';
import { ButtonProps } from '@mantine/core';
import FacebookLogin from '@greatsumini/react-facebook-login';

export function FacebookButton(props: ButtonProps<'button'>) {
  return (
    <FacebookLogin
      appId=''
      onSuccess={(response) => {
        console.log('Login Success!', response);
      }}
      onFail={(error) => {
        console.log('Login Failed!', error);
      }}
      onProfileSuccess={(response) => {
        console.log('Get Profile Success!', response);
      }}
    />
  );
}

Hello,

I am using NextJS and trying the lib to use FacebookLogin, however I am having this issue, I am not sure if this an issue with v.15 api of facebook, these are my settings

The weird thing, is that I am able to log in and get information that is needed, but every time I click on the icon I get that error. any ideas as to why?

Hi,

I'm working with business integrations and sometimes some permission is not selected by default.
For this reason, I need to force show the popup with Edit or Manage Permissions.

Can I force it?

Or can you add a function like beforeLogin where I can call a function to remove my business integration?

Thank you

Trying to use Custom Render Function, looks like the onSuccess methods are not working