How to get URL Scheme myapp:// to work with Instagram API redirect uri

user_4574914 0
Viewed 1490

I'm new to mobile development.

I have an app that has Instagram Authentication.

My URL scheme is working. When I open Safari and type myapp:// it opens the app.

When I try to add myapp:// as the redirect URL in Instagram API it errors and says Enter a valid website.

How do I get this redirect URL to work? What should I have as Instagrams redirect URI?

Thank you in advance.

react-native android ios
1 Answers

First of all, this problem is only with ios, not android because in android we can save a url scheme like this: http://myApp in AndroidManifest.xml file which is a valid redirect url in instagram form at https://www.instagram.com/developer/

For ios, we need something like this: http//myApp://, which works fine in safari, but isn't a valid url in instagram form

In my case, following was the state of my app when I faced a similar problem:

  • I was using Linking api of react-native to open instagram login page in browser;
  • After submitting the form with proper login credentials, I could see a new page hit in the browser with access_token, something like this: http://myApp/#access_token=asa2dcc...'
  • But then it never redirected back to my app from browser

So, I was able to get the token, but it wasn't automatically redirecting back to my app.So I handled this redirecting part manually as following:

  • First of all, I used WebView api of react-native rather than Linking;What it does is it opens a web view in your app rather than in a browser so you can have full control of navigation within the app
  • I didn't add any redirect url for ios on instagram/developer site, the one I added for android was enough
  • The key to solving this problem was getting this prop in which I can get the url with access_token so that it can be fetched out and used for further api calls

  • I used react-navigation to navigate to the screen with WebView and also passed a callback which would receive a token which in turn can be used to make other api calls:

    navigation.navigate('InstaWebView', {
  callback: (err, access_token) => {
    if (!access_token) { 
      return Alert.alert('Error in fetching insta token');
    }
    // make api calls
  },
});


  • InstaWebView component returned following WebView from the render function:

    <WebView
      ref={WEBVIEW_REF}
      style={{ flex: 1 }}
      onNavigationStateChange={
          this.onNavigationStateChange.bind(this)
      }
      source={{ uri: instaUrl }}
      onError={() => {
        Alert.alert('Error in loading WebView..Please try again');
        return navigation.goBack();
      }}
    />


Have a look at this code for more help

Hope this helps someone!

user_50362120
Related