Authorize with HTTPS redirect URL (Instagram API) and PKCE support?

[GunnarAK]

Issue

I'm investigating if it is possible to use this library to login to Instagram Basic Display.

I've got the following setup, but on Android I'm faced with the error JSON deserialization error:

const authResult = await authorize({
  issuer: "https://api.instagram.com",
  clientId: settings.instagram.appId,
  redirectUrl: settings.instagram.redirectUri, // https://...
  scopes: [...settings.instagram.scopes],
  serviceConfiguration: {
    authorizationEndpoint: "https://api.instagram.com/oauth/authorize",
    tokenEndpoint: "https://api.instagram.com/oauth/access_token",
  },
});

Adding the skipCodeExchange: true will get me the authorizationCode similar to what is returned by react-native-instagram-login, but that is not what I'm looking for.
The developer responsible for the backend refuses to implement a POST request to https://api.instagram.com/oauth/access_token with the client_secret attached, and instead redirects me to PKCE.

I haven't found any resolutions to configuring app login for Instagram.

Could someone help me get to the bottom of this or give me some definitive answer that PKCE is not supported by the Instagram OAuth API?

And second, how can I make iOS treat my HTTPS redirectUrl properly so it closes the in-app browser?
I have configured Apple Universal Links and Android App Links for deeplinking.

On Android I'm overriding the RedirectUriReceiverActivity to have it capture the authorize() result, but the result is empty.
Debug Mode on Android Studio keeps opening assembly and .h files, so is of no use either.

Errors

iOS

Nothing, the redirect URL is loaded and nothing happens. Browser stays open.

Android

[Error: JSON deserialization error]

---

Environment

• Platform that you're experiencing the issue on: both
• Your react-native Version: 0.72.6
• Your react-native-app-auth Version: 7.1.0
• Are you using Expo?: No

[GunnarAK]

Meta does not allow the use of Instagram Basic Display for authenticating users. After giving a closer look at the config page it shows the following:

Instagram Basic Display allows apps to access the Instagram Basic Display API, which provides read-only access to basic data in app users' Instagram accounts.
Use this tab to configure the API's authorization window so you can get permissions from users, and to submit your app for App Review when you are ready to switch it to Live Mode.
Note that Basic Display is not an authentication tool. Data returned by the API cannot be used to authenticate your app users or log them into your app. If your app uses API data to authenticate users, it will be rejected during App Review. If you need an authentication solution, use Facebook Login instead.

And

To help individuals share their own content with 3rd party apps: Profile Permission
This permission is meant for apps that allow the general public to log in with Instagram to get their basic profile information; for example, an app that retrieves a person's Instagram username and account type. Apps that fall into this use case must use the instagram_graph_user_profile permission.
To help individuals share their own content with 3rd party apps: Media Permission
This permission is meant for apps that allow the general public to log in with Instagram to get their own content; for example, an app that allows people to print their own pictures from their Instagram profile. Apps that fall into this use case must use the instagram_graph_user_media permission.
To learn more about Instagram Basic Display's permissions, please visit the Basic Display Permissions documentation.

I haven't set the app to "Live" yet, but it is very likely that it will be rejected because of this.

Closing this ticket.

[GunnarAK]

Little update here, as I ran into this same problem with TikTok OAuth.

I was able to get this to work with the following setup:

The redirect URL is set to something like https://acme.com/auth
On the server I created this path and added the following script to execute if that address was opened by an iOS device:

if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
  let params = (new URL(document.location)).searchParams.toString();
   console.log(params);
    window.location.href = 'YOUR_URL_SCHEME://?' + params;
}

In my AppDelegate.mm I've made the following changes:

// Universal Link support
 (BOOL) application: (UIApplication *)application
             openURL: (NSURL *)url
             options: (NSDictionary<UIApplicationOpenURLOptionsKey, id> *) options
{
++ NSString *newUrl = [[url absoluteString] stringByReplacingOccurrencesOfString:@"YOUR_URL_SCHEME://" withString:@"https://acme.com/auth"];

--  if ([self.authorizationFlowManagerDelegate resumeExternalUserAgentFlowWithURL:url]) {
++  if ([self.authorizationFlowManagerDelegate resumeExternalUserAgentFlowWithURL:[NSURL URLWithString:newUrl]]) {
    return YES;
  }
  return [RCTLinkingManager application:application openURL:url options:options];
}

Then, make sure you have support for YOUR_URL_SCHEME deeplinks in your Info.plist. This should look something like this:

<dict>
	<key>CFBundleTypeRole</key>
	<string>Editor</string>
	<key>CFBundleURLName</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleURLSchemes</key>
	<array>
		<string>YOUR_URL_SCHEME</string>
	</array>
</dict>

And last but certainly not least; set the following prop to your authorize():

iosCustomBrowser: "safari",

This will open the default browser, and this is what ultimately allows you to open HTTPS deeplinks.

You should now have a functioning HTTPS redirect url!