Not working on mobile phone.

[ghumman]

My Login button looks like following.

            <FacebookLogin
              disableMobileRedirect={true}
              isMobile={false}
              appId="xxxxxxxxxxxx"
              fields="name,email,picture"
              callback={this.responseFacebook}
              redirectUri="https://www.stealthdocumentation.com/#/"
            />

Login works on computer browsers but not working on android chrome and firefox. I've tried disableMobileRedirect={true} and disableMobileRedirect={false}, isMobile={true} and isMobile={false} and with and without redirectUri but wasn't able to make it work. Error I'm getting is "URL Blocked: This redirect failed because the ..."

[advance512]

We've having the same problem.

We're using react-facebook-login successfully for perform Facebook login on desktop. On mobile, we get:

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 a Valid OAuth Redirect URIs.

In Desktop, we get the following parameters on the OAuth popup:

channel_url=https://staticxx.facebook.com/connect/xd_arbiter.php?version=44#cb=f123412341234&domain=app.selectom.com&origin=https%3A%2F%2Fapp.selectom.com%2Ff123412341234&relation=opener
fallback_redirect_uri=https://app.selectom.com/user/accounts
redirect_uri=https://staticxx.facebook.com/connect/xd_arbiter.php?version=44#cb=f123412341234&domain=app.selectom.com&origin=https%3A%2F%2Fapp.selectom.com%2Ff123412341234&relation=opener&frame=f123412341234

In Mobile, we get the following parameters:

redirect_uri=https://app.selectom.com/user/accounts?code=1234-1234-1234-1234-1234-1234-123-1234&state=facebookdirect#_=_

As we know, Redirect URIs must be absolute, they cannot have query strings or any variable parts to them. https://stackoverflow.com/a/7722099/4391814

Seems like this issue happens because Mobile and Desktop behave differently.

[advance512]

This seems related to issue #257.

[eliranamar]

As suggested in some other threads, Adding isMobile={false} prop seems to do the trick (tested in chrome android) Looking at the source code we can see how it works:

n.props.isMobile && !c
                ? window.location.href = '//www.facebook.com/dialog/oauth' + (0, b['default'])(p)
                : window.FB.login(n.checkLoginState, { scope: o, return_scopes: a, auth_type: p.auth_type });

[sauceman40]

@eliranamar this works well on Desktop+mobile, but breaks in the Instagram in-app browser for me -- I get redirected back the homepage immediately without seeing the facebook login screen.

[dasshield96]

@eliranamar this works well on Desktop+mobile, but breaks in the Instagram in-app browser for me -- I get redirected back the homepage immediately without seeing the facebook login screen.

Have you found a solution?

[sauceman40]

@eliranamar this works well on Desktop+mobile, but breaks in the Instagram in-app browser for me -- I get redirected back the homepage immediately without seeing the facebook login screen.

Have you found a solution?

@dasshield96

I have, but it breaks Desktop Safari+Firefox which I'm willing to live with for now (most app installs coming from Instagram browser) -- I'm currently using the following setup and this works for Chrome desktop+mobile, mobile Safari, and Instagram+Facebook in-app for me:

<FacebookLogin appId={FACEBOOK_APP_ID} cookie={true} xfbml={true} version={"3.2"} autoLoad={false} isMobile={true} ..... />

[ghumman]

 I changed the settings to following, but still not able to make it work on mobile browsers(chrome and firefox). I also tried different combinations in whitelist url section inside  facebook development account but it's only working on Desktops. 

      <FacebookLogin
              isMobile={true}
              cookie={true}
              xfbml={true}
              autoLoad={false}
              appId="xxxxxxxxxx"
              fields="name,email,picture"
              callback={this.responseFacebook}
              redirectUri="https://www.stealthdocumentation.com/"
              disableMobileRedirect={true}
            />

[sauceman40]

@ghumman @dasshield96 I was able to fix this for all use cases (cross-browser mobile, in-app, and browser) - had to fork the repo until a pull request gets approved. The change were twofold:

1. (NOTE: Fork Required) Adding a status: true parameter to window.FB.init() call as specified here: https://stackoverflow.com/a/37849204/4493895 Turns out Safari+Chrome will block popups if they are triggered outside of a synchronous user click event. This fixes that by retrieving the login status before user clicks "Login With Facebook".

2. In the onClick method -- push a new state to the browser history removing query parameters + hash, before triggering Facebook Login. I use React Router v4 and the history package so just requires one history.push("/") call as shown here: https://stackoverflow.com/a/45849608/4493895 Note that this works for me because I don't use any query parameters or hash state at my Login page -- be advised this approach may break things if you do.

[alex-lechner]

@keppelen Is this repository actively maintained? I'm facing the same issue and I'm wondering if this will be fixed or PRs accepted.

[j4nos]

Set URI to Valid OAuth Redirect URIs like I did below, and clear browser history.

[abakhtiar]

This configuration solved the problem for me: 😃

                  <FacebookLogin
                    appId="13xxxxxxxxxxx09"//TODO: Replace yours...
                    autoLoad={false}
                    fields="first_name, last_name ,email, picture"
                    callback={(resp)=>this.responseFacebook(resp)}//TODO: Replace your callback
                    cssClass="fbtn"
                    disableMobileRedirect={true}
                  />   

Also, I enabled the "Embedded Browser OAuth Login" on the my app panel on FB.

[Dezzymei]

@ghumman @dasshield96 I was able to fix this for all use cases (cross-browser mobile, in-app, and browser) - had to fork the repo until a pull request gets approved.

This is cool.

Seeing as @keppelen doesn't seem to be updating this REPO should we fork it and run from something else? I am struggling with this tbh and am thinking about just creating something from scratch...if only I had the time!

[Zanoshky]

This configuration solved the problem for me: 😃

                  <FacebookLogin
                    appId="13xxxxxxxxxxx09"//TODO: Replace yours...
                    autoLoad={false}
                    fields="first_name, last_name ,email, picture"
                    callback={(resp)=>this.responseFacebook(resp)}//TODO: Replace your callback
                    cssClass="fbtn"
                    disableMobileRedirect={true}
                  />   

Also, I enabled the "Embedded Browser OAuth Login" on the my app panel on FB.

Can you please add this to Readme as a mobile solution? @keppelen

[nelsonfleig]

@abakhtiar Does this solution also work on the Instagram and Facebook mobile in-app browsers?

[IndraVikas]

@ghumman @dasshield96 I was able to fix this for all use cases (cross-browser mobile, in-app, and browser) - had to fork the repo until a pull request gets approved. The change were twofold:

1. (NOTE: Fork Required) Adding a status: true parameter to window.FB.init() call as specified here: https://stackoverflow.com/a/37849204/4493895 Turns out Safari+Chrome will block popups if they are triggered outside of a synchronous user click event. This fixes that by retrieving the login status before user clicks "Login With Facebook".
2. In the onClick method -- push a new state to the browser history removing query parameters + hash, before triggering Facebook Login. I use React Router v4 and the history package so just requires one history.push("/") call as shown here: https://stackoverflow.com/a/45849608/4493895 Note that this works for me because I don't use any query parameters or hash state at my Login page -- be advised this approach may break things if you do.

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

[abakhtiar]

@abakhtiar Does this solution also work on the Instagram and Facebook mobile in-app browsers?

I didn’t not check instagram but for mobile browsers it would work as well! However, you’ll need deep linking if you need to use Facebook app for authentication.

[EduardoUstarez]

I can't make it work, the code below only works when autoload is true

  <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={false}
                redirectUri={"https://www.my-site.com"}
              />

[Abhishek9760]

I can't make it work, the code below only works when autoload is true

  <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={false}
                redirectUri={"https://www.my-site.com"}
              />

I also had same issue not working on mobile...I tested on chrome in Mobile which was not updated..so update your browser and try again.. it'll work🙂

[sidharrth2002]

Hi, 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}
/>

[alanMendoza1993]

isMobile={false} redirectUri="my-website-here" add both fields