Error with facebook login in mobile browser

[birendra-90]

I am trying to login by facebook using react-facebook-login so I logged successfully in the web browser but not in the mobile browser.

Error:

URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

[rystraum]

@birendra-90 Make sure that the URL trying to access is included in the app's Whitelist. If this is in development (and you're looking at the site via IP address), you might have to go use a web proxying service (e.g. ngrok.io) and add the URL generated by ngrok in your app's whitelist.

FB doesn't allow listing IP addresses in oauth redirects, afaik.

[birendra-90]

@rystraum Thank you for your response but after deployed in netlify, then only I got this issues.

[AlburIvan]

I'm currently having this issue too, all URL are whitelisted. That's the thing that is currently bothering me. I tried to whitelist lots of variations just in case, but to no avail. And this happens only on mobile browsers

[ghost]

isMobile={false}

on props is a temporary workaround on my side. Let me know if it works for you too.

[ghost]

Still not working on iOs on Instagram and Facebook app anyhow.

[vovkasm]

I think this all from here: https://github.com/keppelen/react-facebook-login/pull/47/commits/eb98aa540aec12a3ee9622101d8549ef9f9a08f1#diff-437f415a64efd5e6b57b16920e7a0ffdL87 And I'm sure all this tuning for mobile browsers can be removed now... at least someone can try this and test.

[ghost]

@vovkasm after a lot of extensive testing, we moved all the logins with the redirect method with isMobile={true}, since otherwise the login fails on Instagram and Facebook browsers on iPhone. We are experiencing the same behaviour for react-google-login on iOS.

The popup method does not work for Facebook and Instagram browsers on iOS, both for google and facebook login, but we are unable to debug the situation with Fiddler due to the protection of the certificate pinning.

Hope someone comes up with some more information on the problem.

[vovkasm]

Thanks for info! We will monitor this! And... then it should be reported to facebook-sdk project. It is SDK responsibility, imho.

[r4F705]

Do we have any update on this issue?

[techyrajeev]

facing same issue here. Please let me know in case any one found the possible solution.

[dastrong]

Yea I'm following this too.

I ended up hiding the FB button on mobile devices for now. Would definitely like to show that button in the future.

[ghost]

@dastrong did the same; on our schedule we will be working hard to fix this issue by mid May, so I will report my findings.

[codingwaysarg]

Hi there, I'm getting the same issue. Login works fine on web, but fails on mobile. Does anyone has any temporary fix? Thank you.

[jmayergit]

isMobile={false}

on props is a temporary workaround on my side. Let me know if it works for you too.

Works for me on iOS Chrome

[juanruben]

Same issue here

[thaihung019]

I set isMobile prop to false and also set redirectUri to the domain that I set up on facebook dashboard. And it solves the problem.

[DanijelaKraljevic]

Setting isMobile prop to false worked for me too for android. :disappointed:

[Sklpcc]

There is another prop for this purpose, but it is undocumented since 2017 #175

[aharbavets]

@vovkasm after a lot of extensive testing, we moved all the logins with the redirect method with isMobile={true}, since otherwise the login fails on Instagram and Facebook browsers on iPhone. We are experiencing the same behaviour for react-google-login on iOS.

The popup method does not work for Facebook and Instagram browsers on iOS, both for google and facebook login, but we are unable to debug the situation with Fiddler due to the protection of the certificate pinning.

Hope someone comes up with some more information on the problem.

I think this issue is the same as mine. This issue usually happens when using autoLoad on iOS. Safari detects that popup is opened by JavaScript (not in some button handler) and blocks it. In desktop browsers you can unblock such popups, but in mobile Safari there's no way to do it and even to know that it was blocked. I think disableMobileRedirect prop was implemented as workaround for this issue. Redirects are not blocked in contrast to popup windows. Another solution is not use autologin but rather use the FacebookLogin component as the control which initiates facebook login. E.g. replace your custom button or menu item with this component if possible

[batgerelt]

not working on mobile browser :-( heeelp mee

<FacebookLogin appId={SOCIAL_IDS.facebook} fields="name,email,picture.type(large)" cssClass="btn btn-block btn-social btn-facebook" onClick={this.componentClicked} callback={this.responseFacebook} textButton={intl.formatMessage({ id: "shared.form.button.facebookLogin" })} size="metro" cookie disableMobileRedirect isMobile={false} version="3.1" />

[wilfison]

Just use the redirectUri property

<FacebookLogin
  {...otherProps}
  redirectUri='https://my-site.com'
/>

Remember to add the link in valid OAuth redirect URIs in the application settings on facebook. https://developers.facebook.com/apps/APP_ID/fb-login/settings/

[rotimi-best]

REPLY 1

Just use the redirectUri property

<FacebookLogin
  {...otherProps}
  redirectUri='https://my-site.com'
/>

Remember to add the link in valid OAuth redirect URIs in the application settings on facebook. https://developers.facebook.com/apps/APP_ID/fb-login/settings/

This didn't work for me.

REPLY 2

not working on mobile browser :-( heeelp mee

<FacebookLogin appId={SOCIAL_IDS.facebook} fields="name,email,picture.type(large)" cssClass="btn btn-block btn-social btn-facebook" onClick={this.componentClicked} callback={this.responseFacebook} textButton={intl.formatMessage({ id: "shared.form.button.facebookLogin" })} size="metro" cookie disableMobileRedirect isMobile={false} version="3.1" />

For some reason I did this and it didn't work

<FacebookLogin
  {...otherProps}
  disableMobileRedirect // I expected this to be true since its react which didn't work
/>

The I changed it to

<FacebookLogin
  {...otherProps}
  disableMobileRedirect={true} // This worked
/>

[vovkasm]

@rotimi-best

For some reason I did this and it didn't work

<FacebookLogin
  {...otherProps}
  disableMobileRedirect // I expected this to be true since its react which didn't work
/>

The I changed it to

<FacebookLogin
  {...otherProps}
  disableMobileRedirect={true} // This worked
/>

This can't be true at all. Babel will translate both JSX snippets into exactly same code.

1. First snippet
2. Second one

[daveteu]

Well it's true.

Anyone on mobile who faces the following error should set disableMobileRedirect={true}.

Once you set it to true, you will see the Facebook login open up to the new window, and closes once you login, which is the same behaviour on desktop.

URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

disableMobileRedirect={true}

[chonlatee-s]

isMobile={false} Works for me on andrioid

[niloy2019]

isMobile={false}

on props is a temporary workaround on my side. Let me know if it works for you too.

Thanks. It works for me.

[jkvgo]

isMobile={false} worked for me!

[V-Jgenti]

for me worked this solution disableMobileRedirect={true} set this code in the propertis of button <3

[wassikhaan]

<FacebookLogin appId={config.FB_APP_ID} autoLoad={false} fields="name,first_name,last_name,email,picture" callback={this.responseFacebook} cssClass="fbButtonsMobile" icon={<i class="melorra-fb" style={{ margin: '0 8px 0 100px', fontSize: 12 }}>} onClick={this.handleFbLoginClick} textButton={Login with Facebook} isMobile={true} disableMobileRedirect={true} cookie={true} // xfbml={true} // version={"3.2"} status={true} />

This is not at al workinng for me I am a doing any mistake here ?

[marcioomonte]

<FacebookLogin appId={config.FB_APP_ID} autoLoad={false} fields="name,first_name,last_name,email,picture" callback={this.responseFacebook} cssClass="fbButtonsMobile" icon={<i class="melorra-fb" style={{ margin: '0 8px 0 100px', fontSize: 12 }}>} onClick={this.handleFbLoginClick} textButton={Login with Facebook} isMobile={true} disableMobileRedirect={true} cookie={true} // xfbml={true} // version={"3.2"} status={true} />

This is not at al workinng for me I am a doing any mistake here ?

redirect_uri ?

[EduardoUstarez]

I can't make it work

  <FacebookLoginWithButton
                appId="XXXXXXXXX"              fields="link,first_name,middle_name,name,birthday,last_name,email,gender,locale,verified,picture.height(2048),age_range"
                callback={responseFacebook}
                autoLoad={false}
                disableMobileRedirect={true}
                textButton="Iniciar con facebook"
                isMobile={true}
                redirectUri={"https://www.my-site.com"}
              />

[Abhishek9760]

`

<FacebookLogin appId="3375293559265744" fields="name,email,picture" disableMobileRedirect={true} redirectUri="/diary/" cookie isMobile={false} render={(renderProps) => ( <button_ className="facebook-button btn-block" onClick={renderProps.onClick} disabled={renderProps.disabled}

Login )} callback={(res) => props.facebookLogin(res)} />

`

this is not redirecting to /home in mobile devices after login..help please!

[sidharrth2002]

Hi, is there currently a fix for this? I'm trying to login from Facebook/Instagram in-app browsers, but it doesn't work. Here's my current setup:

<FacebookLogin
              size="medium"
              autoLoad={false}
              appId={process.env.REACT_APP_FACEBOOK_APP_ID}
              fields="name,email"
              callback={responseFacebook}
              isMobile={false}
              redirectUri="my-website-here"
              disableMobileRedirect={true}
/>