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

Question

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.

Answer 1

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!