Login is not working in "facebook mobile browser" on facebook android app(not facebook lite)

[IndraVikas]

I am facing this issue in facebook mobile browser. When I click a link in the Facebook app (not the Facebook lite app). It opens the URL in the "Facebook mobile browser". Login in this browser is not working. I am using the following setting.

<FacebookLogin appId={ config.FACEBOOK_APP_ID } autoLoad={ false } fields="name,email,picture" callback={ this.facebookResponse } cssClass="btnFacebook" isMobile={ false } disableMobileRedirect icon={ <i className="fa fa-facebook" style={ { marginLeft: "5px" } } /> } textButton="&nbsp;&nbsp;Login with Facebook" />

Note. It is working in chrome or other browsers on mobile. It is also working from the Facebook lite app. because it opens the URL in the chrome browser.

Please help it's very critical for my project. Do let me know if more details are required.

Thanks in Advance

[Dezzymei]

Same issue

[Dezzymei]

I think this is because by default it uses the user agent and it could be outdated:

isMobile = !!((window.navigator && window.navigator.standalone) || navigator.userAgent.match('CriOS') || navigator.userAgent.match(/mobile/i));

But perhaps it should be something else: Like here

[gmarokov]

I have the same issue. Does anyone came up with a fix for this?

[ilan0888]

i also have this same issue, any update?

[guigeekz]

Same here, it is also very critical for my project, any one has some news on this ?

Thanks

[ilan0888]

Same here, it is also very critical for my project, any one has some news on this ?

Thanks

I have a solution and it is to start using the redirect method instead of the popup. after the redirect you have access from the url to the idToken or the AccessToken depends on the prop you give to the component and then just use a hook on the route you want it to redirect that parses the query string and make the request to your backend, this is working in facebook in app webview and all the other senerios i had problems with.

[guigeekz]

Same here, it is also very critical for my project, any one has some news on this ? Thanks

I have a solution and it is to start using the redirect method instead of the popup. after the redirect you have access from the url to the idToken or the AccessToken depends on the prop you give to the component and then just use a hook on the route you want it to redirect that parses the query string and make the request to your backend, this is working in facebook in app webview and all the other senerios i had problems with.

@ilan0888 could you please share the code in order to help to integrate this !

Thanks in advance

[IndraVikas]

@ilan0888 can you please share the code. It will be a great help.

[alcidesbsilvaneto]

I was having a similar issues, wich I solved using disableMobileRedirect={true}

[ronytesler]

I was having a similar issues, wich I solved using disableMobileRedirect={true}

So you solved it by disabling the mobile redirect, and @ilan0888 solved it by enabling it? @guigeekz , @ilan0888 , @alcidesbsilvaneto , can you please share your code?

[nelsonfleig]

@ronytesler Yeah I've also been reading contradicting solutions. Others have suggested setting isMobile={false} or using other methods to detect the user agent, since the mobile browser may not be recognized properly by react-facebook-login.

[ronytesler]

Yes, I'm going to try the accepted answer here: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser Have you tried it?

[nelsonfleig]

Not yet, but I believe we also need to look for the Instagram or Facebook browser. Something similar to this:

For Facebook: https://stackoverflow.com/questions/31569518/how-to-detect-facebook-in-app-browser For Instragram: https://supergeekery.com/blog/detecting-the-instagram-in-app-browser

Waiting for my client to show the link to our site on his IG account again so I can do some testing. Let me know if you have any luck.

[ronytesler]

@Kokopelli84 If there's a problem with mobile detection, we need to set isMobile={true}, no? Because we're running on mobile.

[nelsonfleig]

@ronytesler I just tried it and setting isMobile={true} doesn't work as well. I used the following code to hide the facebook login for my client on FB and IG in-app browsers. Maybe it will help someone until we can come up with a stable solution.

Using this question on Stackoverflow as a reference, on your login component you can use this function to detect if we are on the FB or IG in-app browser:

const isFacebookApp = () => {
    const ua = navigator.userAgent || navigator.vendor || window.opera;
    return ua.indexOf('FBAN') > -1 || ua.indexOf('FBAV') > -1 || ua.indexOf('Instagram') > -1;
  };

Then use it to conditionally render your Facebook component inside your Login component:

{!isFacebookApp() && <Facebook />}

I believe though that the answer might be setting disableMobileRedirect={false}, parsing the query params and using these to handle your login like @ilan0888 mentioned. Will give it a try and post my code soon.

[jackkidding]

try it

<FacebookLogin
    ...
    redirectUri='yourRedirectUri'
    disableMobileRedirect={!isFacebookApp()} />

[ronytesler]

@jackkidding How did you implement it? I don't see any example or explanation. Can you share your code?

[ronytesler]

@jackkidding I think it works, thanks!

[nelsonfleig]

@jackkidding It is kind of working for me on the IG in-app browser, but with a few glitches. The first time I press "Log in with FB" it takes me to FB to login where it asks for my email and password. Then it redirects me back to my app, but does not log in to my app. After clicking on the "Log in with FB" button again, THEN it works and without having to enter my email and password on FB! Now I just have to figure out how to make it work on the first log in attempt...

[ronytesler]

@Kokopelli84 Maybe you can use autoLoad={true} and add a flag to the redirectUri that tells your app to do a refresh, then it will hopefully login automatically. I have a new and not related problem - when I use autoLoad={true} it makes the Login Popup pop without clicking anything (not on refresh, just when I go to the website normally).

[IndraVikas]

@ronytesler @jackkidding can you please share the config. I am using the following configuration and it is not working.

<FacebookLogin appId={ config.FACEBOOK_APP_ID } autoLoad={ false } fields="name,email,picture" callback={ this.facebookResponse } cssClass="btnFacebook" isMobile={ false } disableMobileRedirect={ false } icon={ <i className="fa fa-facebook" style={ { marginLeft: "5px" } } /> } textButton="&nbsp;&nbsp;Login with Facebook" /> </div>

[ronytesler]

@IndraVikas I think it's not working for you because you have isMobile={false}. This is mine:

isFacebookApp = () => { const ua = navigator.userAgent || navigator.vendor || window.opera; return ua.indexOf('FBAN') > -1 || ua.indexOf('FBAV') > -1 || ua.indexOf('Instagram') > -1; };

        <FacebookLogin
            disableMobileRedirect={!this.isFacebookApp()}
            redirectUri={"https://watoobi.appspot.com/"}
            state={window.location.search} // pass the current query string to the redirect.
            appId={appId}
            autoLoad={false}
            fields="name,picture"
            onClick={this.componentClicked}
            callback={this.responseFacebook}
            render={(renderProps) => (
                <button type="button" onClick={renderProps.onClick}>{lan.buttons.facebook}</button>
            )}/>

[IndraVikas]

@ronytesler I tried the above solution It is not working for me. :( Please note that it is working in the Facebook Lite app but not in the Facebook app. because in the lite app the URL is opened in chrome powered browser. while in the Facebook app it is getting opened in a browser powered by Facebook.

` const isFacebookApp = () => { const ua = navigator.userAgent || navigator.vendor || window.opera; return ua.indexOf("FBAN") > -1 || ua.indexOf("FBAV") > -1 || ua.indexOf("Instagram") > -1; };

<FacebookLogin disableMobileRedirect={! isFacebookApp()} appId={ config.FACEBOOK_APP_ID } autoLoad={ false } fields="name,email,picture" callback={ this.facebookResponse } cssClass="btnFacebook" redirectUri="https://prepsutra.com" state={ window.location.search } icon={ <i className="fa fa-facebook" style={ { marginLeft: "5px" } } /> } textButton="  Login with Facebook" />`

[ronytesler]

@IndraVikas Nothing happens when you click the login button? Just to make sure, try disableMobileRedirect={false} and isMobile={true} Are you on iPhone?

[IndraVikas]

@ronytesler I am using an android. When I click the login button it redirects me to the following URL. The callback function "this.facebookResponse" is not getting invoked.

https://prepsutra.com/?code=AQAM-cRfrQXsel6a2QkyiOobaxZsNMiXgC8iTKgP3j3u3uLgL4Sw7moCmLTzBn73neFScc9ITqqEfGFyQ7RUUave8MeMp0MhyN_XYmv_OfK3rLZl1V8b_oni-NHatD-ZTTroEtd6WNPyKVpwBzPeZ_W-4ET0T#_=_

[ronytesler]

@IndraVikas try removing the state if you don't need it. did you clear the cache in the browser and put a breakpoint in the correct place in developer tools?

[ghost]

Same issue

1. isMobile={false}
2. disableMobileRedirect={true} This params didn't help ` <FacebookLogin fields="name,email,picture" isMobile={false} disableMobileRedirect={true} callback={this.responseFacebook} render={(renderProps) => ( <Button onClick={renderProps.onClick} className="facebook big login-button"

   Facebook )} /> `

[ronytesler]

@frontend-oleh-k No, you should use disableMobileRedirect={false}. isMobile is automatically detected. This is mine: isFacebookApp = () => { const ua = navigator.userAgent || navigator.vendor || window.opera; return ua.indexOf('FBAN') > -1 || ua.indexOf('FBAV') > -1 || ua.indexOf('Instagram') > -1; };

<FacebookLogin disableMobileRedirect={!this.isFacebookApp()} // false if using the Facebook browser redirectUri={"https://mywebsite.com/"} state={window.location.search} appId="470..." autoLoad={false} fields="name,picture" onClick={this.componentClicked} callback={this.responseFacebook} render={(renderProps) => (

{lan.buttons.facebook}

            )}/>

[brunoqs]

@ronytesler i used this last config you sent above, but it doesnt work for iphone, just for android and desktop. Its same for u?

[ronytesler]

for me it works on iPhone.. on which browser did you try, Facebook Messenger's? what happens exactly? did you try isMobile={true} and check if works?

[brunoqs]

yes i tried with isMobile={true}, im login using safari browser and its worked just on iphone 8, on iphone 11 it doesnt worked.

[NPZlatu]

I have been struggling through this issue for pretty much time. After multiple hit and trial the following configuration works for me.

const isFacebookApp = () => {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  return (
    ua.indexOf('FBAN') > -1 ||
    ua.indexOf('FBAV') > -1 ||
    ua.indexOf('Instagram') > -1
  );
};

         <FacebookLogin
          appId={FACEBOOK_APP_ID}
          autoLoad={isFacebookApp()}  //auto load had to be true for facebook browser
          disableMobileRedirect={!isFacebookApp()}
          redirectUri={'https://bpazes.com/'}  //had to give this
          fields="name"
          callback={loginByFb}
          render= .....
     />

[EduardoUstarez]

I have been struggling through this issue for pretty much time. After multiple hit and trial the following configuration works for me.

const isFacebookApp = () => {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  return (
    ua.indexOf('FBAN') > -1 ||
    ua.indexOf('FBAV') > -1 ||
    ua.indexOf('Instagram') > -1
  );
};

         <FacebookLogin
          appId={FACEBOOK_APP_ID}
          autoLoad={isFacebookApp()}  //auto load had to be true for facebook browser
          disableMobileRedirect={!isFacebookApp()}
          redirectUri={'https://bpazes.com/'}  //had to give this
          fields="name"
          callback={loginByFb}
          render= .....
     />

thanks It works to me. autoLoad={true} works in Facebook Browser, and in chrome or desktop browser autoLoad={false} in a certain way solves the problem.

[ssxenon01]

I have been struggling through this issue for pretty much time. After multiple hit and trial the following configuration works for me.

const isFacebookApp = () => {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  return (
    ua.indexOf('FBAN') > -1 ||
    ua.indexOf('FBAV') > -1 ||
    ua.indexOf('Instagram') > -1
  );
};

         <FacebookLogin
          appId={FACEBOOK_APP_ID}
          autoLoad={isFacebookApp()}  //auto load had to be true for facebook browser
          disableMobileRedirect={!isFacebookApp()}
          redirectUri={'https://bpazes.com/'}  //had to give this
          fields="name"
          callback={loginByFb}
          render= .....
     />

thanks this fixed Facebook App Browser issue, but on Messenger issue still remains.

[Johnsonzhangc]

I have been struggling through this issue for pretty much time. After multiple hit and trial the following configuration works for me.

const isFacebookApp = () => {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  return (
    ua.indexOf('FBAN') > -1 ||
    ua.indexOf('FBAV') > -1 ||
    ua.indexOf('Instagram') > -1
  );
};

         <FacebookLogin
          appId={FACEBOOK_APP_ID}
          autoLoad={isFacebookApp()}  //auto load had to be true for facebook browser
          disableMobileRedirect={!isFacebookApp()}
          redirectUri={'https://bpazes.com/'}  //had to give this
          fields="name"
          callback={loginByFb}
          render= .....
     />

thanks this fixed Facebook App Browser issue, but on Messenger issue still remains.

Yes, Messenger still remains the same issue.

[OlyaKastsiukova]

@jackkidding It is kind of working for me on the IG in-app browser, but with a few glitches. The first time I press "Log in with FB" it takes me to FB to login where it asks for my email and password. Then it redirects me back to my app, but does not log in to my app. After clicking on the "Log in with FB" button again, THEN it works and without having to enter my email and password on FB! Now I just have to figure out how to make it work on the first log in attempt...

Have the same, did you find the solution?