Invalid Redirect_uri For instagram login using react native

Question

I am using react-native-instagram-login for React Native.

Here is my code

<InstagramLogin
  ref={instagramLoginRef}
  appId='***********'
  appSecret='*******************'
  scopes={['user_profile', 'user_media']}
  onLoginSuccess={(data) => console.log("Success")}
  onLoginFailure={(data) => console.log("Fail " +  JSON.stringify(data))}
/>

I am getting following error

{"error_type": "OAuthException", "code": 400, "error_message": "Invalid redirect_uri"}

In Instagram Developer Console what should I add as redirect Uri as this is not a website but an react native app.

Answer 1

From Instagram Basic Display API:

Valid OAuth Redirect URIs

Enter your website’s URL. Normally this would be a dedicated URI that can capture redirect query string parameters, but for this tutorial your website’s URL will be fine.

For example: https://socialsizzle.heroku.com/auth/

After you enter a URL, save your changes and check the URL again; we may have appended a trailing forward slash depending your URL structure. Copy the complete URL somewhere since you will need it in later steps to get authorization codes and access tokens.

At this example code, we see the redirectUrl='https://www.google.com', which means that you can set whatever you want. It is useful for collecting login data statistics and to have a backend endpoint for logging.

<InstagramLogin
  ref={instagramLoginRef}
  clientId="931cca1d0c154de3aafd83300ff8b288"
  redirectUrl="https://google.com"
  scopes={['basic']}
  onLoginSuccess={token => this.setState({ token })}
  onLoginFailure={data => this.setState({ failure: data })}
/>

Also have a look at this issue "no response when completed" which it says that redirectUrl has to start with a www because of a bug in react-native-webview. Also at this issue, you'll see that the user example code has a Firebase function endpoint URL redirectUrl="https://us-central1-xxx.cloudfunctions.net/url_get&response_type=token" so it uses Firebase to log/feedback login requests.

Finally, in Facebook Developer Console, you just enter the Valid OAuth Redirect URIs:

which means that you enter which URLs you accept for the API to redirect; it's more like a security mechanism but you have to enter your redirect URL there, or else the API won't work.