React-native-app-auth: Making this work with Facebook

[Dexwell]

Hey,

Really look forward to working with this library!

However, I'm having trouble getting it to work with Facebook OAuth. My code is like this:

console.log('Starting');

try {

  const result = await authorize({
    serviceConfiguration: {
      authorizationEndpoint: 'https://www.facebook.com/v3.1/dialog/oauth',
      tokenEndpoint: `<token-url>`
    },
    clientId: '<id>',
    redirectUrl: '<redirect-url>',
    scopes: ['email']
  });

  console.log('Done');

} catch (error) {
  console.warn(error);
}

The modal is opened and I can log in. But afterwards, instead of the modal closing, it stays up on a white page. When I cancel to dismiss the dialog and try again, the modal _does_ dismiss.

However:

• <token-url> is never called. I know this because I'm using my own backend to exchange for an access_token, since this requires a Secret.
• The promise is never resolved; neither 'Done' nor a warning is logged

One note: My redirect URL is a https URL which is set up as a Universal Link for my app, but this seems to work fine after the initial login.

[kitten]

Hiya @Dexwell, :wave:

I'm not quite sure how Facebook's OAuth works, but the URL looks a little suspect to me as usually spec-compliant authorisation URLs end in /oauth/authorize. I did find a Stackoverflow issue that describes a potential _second_ OAuth API that is intended to work without any Facebook SDKs.

Does that potentially work? https://graph.facebook.com/oauth/authorize https://stackoverflow.com/questions/22798181/facebook-oauth-authorize-url-and-parameter-options

[Dexwell]

Phil! Such a small world 😄

Tried that; exact same result. Even if it worked, some way to debug the process would be nice.

[jasondibenedetto]

Anyone manage to get this working with Facebook?

[uypao]

@Dexwell did you find a solution on this issue?

[Dexwell]

@uypao Nope, I ended up implementing a custom sign in flow.

[JofBigHealth]

Having spent a week with these libraries going into the internals and working around various problems my recommendation is using facebook's own project react-native-fbsdk. It seems pretty robust and, comparatively speaking, is quick to set up on iOS and Android.

[kadikraman]

Thanks for the recommendation @JofBigHealth - I agree with your assessment. Facebook login seems to be very custom, so using their own library might be best.

[sunto]

For iOS, it's possible to get the package working for Facebook by modifying the underlying App-Auth package (look at OIDTokenRequest.m) between lines 277 - 294.

You'd have to track through the Facebook documentation to find that it requires those keys in the body parameters. I have used the following fix before either in a pod post install script to add those two lines.

The hack would get you by, but I'd also recommend sticking with the Facebook library to ensure it's properly supported.

```
if (_clientSecret) {
// The client id and secret are encoded using the "application/x-www-form-urlencoded"
// encoding algorithm per RFC 6749 Section 2.3.1.
// https://tools.ietf.org/html/rfc6749#section-2.3.1
NSString *encodedClientID = [OIDTokenUtilities formUrlEncode:_clientID];
NSString *encodedClientSecret = [OIDTokenUtilities formUrlEncode:_clientSecret];

NSString *credentials =
    [NSString stringWithFormat:@"%@:%@", encodedClientID, encodedClientSecret];
NSData *plainData = [credentials dataUsingEncoding:NSUTF8StringEncoding];
NSString *basicAuth = [plainData base64EncodedStringWithOptions:kNilOptions];

NSString *authValue = [NSString stringWithFormat:@"Basic %@", basicAuth];
[httpHeaders setObject:authValue forKey:@"Authorization"];

**[bodyParameters addParameter:kClientIDKey value:_clientID];
[bodyParameters addParameter:kClientSecretKey value:_clientSecret];**

} else {
[bodyParameters addParameter:kClientIDKey value:_clientID];
}
``

[tarouboy]

Can anyone make this package work with Facebook sign-in?
I really want to unlink the FB SDK because they have been adding all the auto-collected events that couldn't opt out.

I would like to add $100 as bounty if someone could help.
Please PM for payment after a PR is submitted.