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

IndraVikas · 2020-06-18T03:55:42Z

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="  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

The text was updated successfully, but these errors were encountered:

Dezzymei · 2020-06-18T18:21:47Z

Same issue

Dezzymei · 2020-06-19T10:25:48Z

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 · 2020-06-26T08:56:59Z

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

ilan0888 · 2020-07-03T10:44:39Z

i also have this same issue, any update?

guigeekz · 2020-07-09T09:42:17Z

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

Thanks

ilan0888 · 2020-07-09T10:02:53Z

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 · 2020-07-13T17:35:17Z

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 · 2020-08-02T06:03:00Z

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

alcidesbsilvaneto · 2020-08-28T16:00:58Z

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

ronytesler · 2020-08-30T13:48:30Z

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 · 2020-08-30T15:33:54Z

@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 · 2020-08-30T15:37:02Z

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

nelsonfleig · 2020-08-30T15:43:40Z

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 · 2020-08-31T11:37:10Z

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

nelsonfleig · 2020-09-01T00:04:24Z

@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 · 2020-09-01T07:26:12Z

try it

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

ronytesler · 2020-09-05T11:14:00Z

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

ronytesler · 2020-09-07T21:45:40Z

@jackkidding I think it works, thanks!

nelsonfleig · 2020-09-08T02:29:42Z

@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 · 2020-09-08T11:10:42Z

@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 · 2020-09-09T17:58:22Z

@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="  Login with Facebook" /> </div>

ronytesler · 2020-09-09T18:22:44Z

@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 · 2020-09-10T18:31:05Z

@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 · 2020-09-10T20:48:53Z

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

IndraVikas · 2020-09-11T04:25:39Z

@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 · 2020-09-11T08:03:40Z

@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 · 2020-10-01T14:29:16Z

Same issue

isMobile={false}
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 </Button> )} />

ronytesler · 2020-10-01T16:02:15Z

@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 · 2020-10-14T14:54:39Z

@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 · 2020-10-14T19:48:02Z

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 · 2020-10-15T16:28:17Z

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 · 2020-10-23T07:33:37Z

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 · 2020-12-20T19:08:27Z

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 · 2021-01-24T17:05:33Z

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 · 2021-11-04T12:06:25Z

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 · 2022-02-07T12:35:35Z

@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?

ronytesler mentioned this issue Sep 8, 2020

Login Button not responding in mobile Facebook browser on iPhone. #310

Open

Tokenyet mentioned this issue May 20, 2021

How's the mobile support and the suggestion greatSumini/react-facebook-login#2

Open

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

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

Comments

IndraVikas commented Jun 18, 2020

Dezzymei commented Jun 18, 2020

Dezzymei commented Jun 19, 2020 • edited Loading

gmarokov commented Jun 26, 2020

ilan0888 commented Jul 3, 2020

guigeekz commented Jul 9, 2020

ilan0888 commented Jul 9, 2020

guigeekz commented Jul 13, 2020

IndraVikas commented Aug 2, 2020

alcidesbsilvaneto commented Aug 28, 2020

ronytesler commented Aug 30, 2020

nelsonfleig commented Aug 30, 2020

ronytesler commented Aug 30, 2020

nelsonfleig commented Aug 30, 2020

ronytesler commented Aug 31, 2020

nelsonfleig commented Sep 1, 2020 • edited Loading

jackkidding commented Sep 1, 2020 • edited Loading

ronytesler commented Sep 5, 2020

ronytesler commented Sep 7, 2020

nelsonfleig commented Sep 8, 2020 • edited Loading

ronytesler commented Sep 8, 2020

IndraVikas commented Sep 9, 2020

ronytesler commented Sep 9, 2020

IndraVikas commented Sep 10, 2020

ronytesler commented Sep 10, 2020

IndraVikas commented Sep 11, 2020

ronytesler commented Sep 11, 2020

ghost commented Oct 1, 2020 • edited by ghost Loading

ronytesler commented Oct 1, 2020

brunoqs commented Oct 14, 2020 • edited Loading

ronytesler commented Oct 14, 2020

brunoqs commented Oct 15, 2020 • edited Loading

NPZlatu commented Oct 23, 2020 • edited Loading

EduardoUstarez commented Dec 20, 2020 • edited Loading

ssxenon01 commented Jan 24, 2021

Johnsonzhangc commented Nov 4, 2021

OlyaKastsiukova commented Feb 7, 2022

Dezzymei commented Jun 19, 2020 •

edited

Loading

nelsonfleig commented Sep 1, 2020 •

edited

Loading

jackkidding commented Sep 1, 2020 •

edited

Loading

nelsonfleig commented Sep 8, 2020 •

edited

Loading

ghost commented Oct 1, 2020 •

edited by ghost

Loading

brunoqs commented Oct 14, 2020 •

edited

Loading

brunoqs commented Oct 15, 2020 •

edited

Loading

NPZlatu commented Oct 23, 2020 •

edited

Loading

EduardoUstarez commented Dec 20, 2020 •

edited

Loading