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

android, ios, react-native

Solution

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!

Problem

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.

Original source