react-native-app-auth: "authorization" works but doesn't return anything

Issue

I’ve got “authorize” to work against the Coinbase API. It authorizes and I get an email from then to say my app has been associated with my account. I also get redirected back to my app using Deep Linking.

The problem is “authorize” doesn’t return anything. I would have expected to receive something?

import { authorize } from 'react-native-app-auth';

authorize() {
    authorize(config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });
}

I have also tried this but it doesn’t return anything either:

authorize = async () => {
    try {
        const authState = await authorize(config);
        console.log(authState);
    } catch (error) {
        console.log(error);
    }
};

The only time I see any feedback is if I cancel before it is authorized. Then it says the user has cancelled but if it is successful I get no feedback after returning to the app except for the email from Coinbase saying it was successful.


Environment

  • Your Identity Provider: Coinbase
  • Platform that you’re experiencing the issue on:
    • iOS
    • Android
    • iOS but have not tested behavior on Android
    • Android but have not tested behavior on iOS
    • Both
  • Are you using Expo, e.g. ExpoKit?
    • No
    • Yes, I’ve not ejected
    • Yes, but I have ejected to ExpoKit
    • Yes, but I have ejected to vanilla React Native

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 32 (8 by maintainers)

Most upvoted comments

I can confirm, with Azure B2C authorize promise doesn’t get resolved. No exceptions cought. No error logs running this from Xcode. Authentication modal comes up, I can enter the mobile number for TOTP, then enter TOTP code, modal closes but the promise returned by authorize doesn’t get resolved.

UPDATE: In my case redirectUrl value msauth.com.company.app://auth was missing trailing forward slash. That resulted to shouldHandleURL in OIDAuthorizationService.m to return false negative as @mion mentioned. Adding / fixed the issue.

await authorize({
      clientId: 'xxx-xxx-xxx-xxx-xxx',
      redirectUrl: 'msauth.com.company.app://auth/', <--- Added `/` here
      scopes: ['openid', 'offline_access'],
      serviceConfiguration: {
         authorizationEndpoint: `${baseUrl}/authorize`,
         tokenEndpoint: `${baseUrl}/token`,
      },
});

@whittlem I was having the exact same issue and I’m using the same approach of having an HTML page redirect to a custom URI (such as foo://auth).

I just tried the update from @pbfrias17 answer and it works! Comment out OIDAuthorizationService.m line 113 and run it again, it should return now. The problem is here in line 113:

  if (![self shouldHandleURL:URL]) {
    return NO;
  }

The problem is that the custom URI that the app receives through deep linking is not the same as the one it was configured with (the one starting with https), and this check returns NO.

Other than this ugly fix, I guess the alternative is to use Universal Links. It would be nice to see some mention of this in the docs because I think lots of people would try this approach before turning to Universal Links.

I’ve created you a temporary OAuth application in Coinbase.

ClientID: dec2a79b0d9671bba8ca6c1b0b21fd4e1f49e456861669bc1eeaf4f19414b305

Redirect URIs: RNAppAuth://oauth

Sample Authorize URL: https://www.coinbase.com/oauth/authorize?client_id=dec2a79b0d9671bba8ca6c1b0b21fd4e1f49e456861669bc1eeaf4f19414b305&redirect_uri=RNAppAuth%3A%2F%2Foauth&response_type=code&scope=wallet%3Auser%3Aread

Verification deeplink: RNAppAuth://verification

Scope restrictions: wallet:transactions:send is limited $1.00/day per user wallet:transactions:send:bypass-2fa is disabled

You should be able to re-create my issue with this and signing up for a free Coinbase account.

I need to get this working…

const config = {
  clientId: 'dec2a79b0d9671bba8ca6c1b0b21fd4e1f49e456861669bc1eeaf4f19414b305',
  redirectUrl: 'RNAppAuth://oauth',
  scopes: ['wallet:accounts:read'],
  serviceConfiguration: {
    authorizationEndpoint: 'https://www.coinbase.com/oauth/authorize',
    tokenEndpoint: 'https://api.coinbase.com/oauth/token',
    revocationEndpoint: 'https://api.coinbase.com/oauth/revoke'
  }
};

oauth() {
	authorize(config)
	.then(response => {
  		console.log(response);
	})
	.catch(error => {
  		console.log(error);
	});
}

@kadikraman, if you want help fixing this I’m happy to help.

@kadikraman, just FYI the fix didn’t have anything to with the redirect URI. I am still using RNAppAuthExample://oauth for example. I think adding the “clientSecret” to the config did the trick.

@kadikraman btw this also happens for Dropbox. Only response I can ever get is the ‘user cancelled’ one. I can make a separate issue, but it seems like the fix for this would solve the dropbox case too.

UPDATE: To solve my error, I had to comment out OIDAuthorizationService.m line 113. It could have been a special case for us since we’re using a redirect URL from our client that returns a URL scheme to go back to our app. Here’s the dropbox request config in any case:

    const config = {
      clientId: 'CLIENT_ID',
      clientSecret: 'CLIENT_SECRET',
      redirectUrl: 'https://staging.client.com/dropbox_redirect',
      scopes: [],
      serviceConfiguration: {
        authorizationEndpoint: 'https://www.dropbox.com/oauth2/authorize',
        tokenEndpoint: `https://api.dropbox.com/oauth2/token`
      },
      useNonce: false,
      usePKCE: false
    }

where https://staging.client.com/dropbox_redirect redirects the mobile browser to com.ourclient.app which our ios project has as a registered url scheme.

@kadikraman, while you are looking at this would you mind updating this as well?

warning " > react-native-app-auth@4.3.1" has incorrect peer dependency "react-native@^0.50.3".

It is not an issue as such but nice to have no warnings 😃

“react-native”: “0.57.7”

Thanks for creating the demo application, it helps a lot! I’m replying to let you know I will be looking into this issue as a priority, but I’m very busy this week, so I will do it Saturday/Sunday.