onLoginFailure being triggered every time

[tuladharjaa]

The login was working fine but after adding another Instagram tester user the "onLoginFailure" keeps triggering instead of "onLoginSuccess".

[Tymofiev]

I get this as well, it also gives a code in error response object, insead of token and HTML page is logged out into console.

[Dhanraj-bidchat]

i am also facing that issue. Instagram Login was working yesterday also. Now its throwing some 403 forbidden issue for android only

[rafalzawadzki]

Also facing the problem, Android only

[Nico-Guyon]

I have also the same problem, both on real android device and ios device. Somehow the login is working correctly on ios simulator ... Which is rather strange, the code executed being exactly the same.

The first code is correctly retrieved but it's the request to https://api.instagram.com/oauth/access_token which gets a 403 response (but not on ios simulator)

[Nico-Guyon]

Found the issue but this is rather unexplainable ...

Instagram changed the fields app_id and app_secret used with access_token to client_id and client_secret. https://developers.facebook.com/docs/instagram-basic-display-api/reference/oauth-access-token

So in the file instagram.js from your react-native-instagram-login replace the following code

form.append('app_id', appId);
form.append('app_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code);

with

form.append('client_id', appId);
form.append('client_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code)

And your login should work again.

Why the requests are working on the ios simulator and failing with a real device is totally beyond me though ...

[Rramandeep]

athorisation on instagram is returning code key instead of acess token key, as mentioned above you can make changes in libraray's main file accordingly. here it is: https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

[Dhanraj-bidchat]

i forked and fixed the issue. Here is my package: "react-native-instagram-login": "git+https://github.com/bidchatindia/react-native-instagram-login.git#v2" You can use my package till they give update to this package.

[Rramandeep]

why not to copy lib code locally and change untill lib not updated.

[Dhanraj-bidchat]

@Rramandeep Our app is already live on store. You will have to give new update to playstore for that anyways. i made codepush to my users and done!

[Rramandeep]

@Dhanraj-bidchat no offence bro, but my app is under developement that's why.

[Dhanraj-bidchat]

@Rramandeep thats fine bro. Nobody is forced to use my package. Its for beginners who may find it difficult to do so.

[hungdev]

I updated the library, so you can remove the old version and install the new version. Feel free to comment here. Love guys.

[kiritm-nimblechapps]

Found the issue but this is rather unexplainable ...

Instagram changed the fields app_id and app_secret used with access_token to client_id and client_secret. https://developers.facebook.com/docs/instagram-basic-display-api/reference/oauth-access-token

So in the file instagram.js from your react-native-instagram-login replace the following code

form.append('app_id', appId);
form.append('app_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code);

with

form.append('client_id', appId);
form.append('client_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code)

And your login should work again.

Why the requests are working on the ios simulator and failing with a real device is totally beyond me though ...

You also change the appId to client_id

let ig_uri = `https://api.instagram.com/oauth/authorize/?client_id=${appId}&redirect_uri=${redirectUrl}&response_type=${responseType}&scope=${scopes.join(',')}`;

[hungdev]

@kiritm-nimblechapps I forgot it. Thank u. i updated.

[tuladharjaa]

Getting this on the "onLoginFailure"

Object { _: "" }

The latest package was working a while ago.

[hungdev]

@tuladharjaa can you give me steps to get onLoginFailure? or send me a video about this

[tuladharjaa]

The screen capture is on the following link: https://drive.google.com/file/d/17zwnpqwRmwP11FqCm6DdBk9p-8sqA_5a/view?usp=sharing

The code I have used: <Instagram ref={instagram => { this.instagramLogin = instagram; }} appId={config.igAppId} appSecret={config.igAppSecret} redirectUrl={config.igRedirectUrl} scopes={['user_profile', 'user_media']} onLoginSuccess={this.setIgToken} onLoginFailure={(data) => console.warn("Failure", data)} onClose={() => this.props.navigation.goBack(null)} />

[Nico-Guyon]

Tried to see if I had a login problem again on my app but it's working on iOS both device and simulator for me right now.

@tuladharjaa can you step into the library with the debugger and see what are the result of the instagram requests ? Does anyone else also have a login problem again ?

[tuladharjaa]

The returned URL from WebView does not contain the codes. It just returns the redirectURL

I am getting this on an Android device.

[Dhanraj-bidchat]

@tuladharjaa you tried android login with same user that you loged in on iOS?? If your app is not live, always add new user as test user if not done

[tuladharjaa]

@tuladharjaa you tried android login with same user that you loged in on iOS?? If your app is not live, always add new user as test user if not done

I have added the account as tester and was working previously on Android. I have not tried it on iOS.

[Dhanraj-bidchat]

@tuladharjaa can you try one common test account on both and let us know please?

[tuladharjaa]

@tuladharjaa can you try one common test account on both and let us know please?

On iOS it is working fine.

[Nico-Guyon]

Just tried with an android emulator and it's working fine on my end. I'll test later with a real android device and let you know if I can also reproduce the login pb.

[hungdev]

I just checked it again, it still works normally. I don't know the exact error.

[tuladharjaa]

I installed the version 2.0.2 and then made changes on the Instagram.js file and it is working fine.

[denisprado]

Hey guys! Thanks for your efforts.. but, I'm receiving on onLoginFailure an object with the code. Anyone can help me?

[hungdev]

@denisprado show me your error, your code and your current version you are using

[denisprado]

@hungdev HI. My component is like that:

<InstagramLogin ref={ref => (instagramLogin = ref)} appId={igProd.appId} responseType="code" appSecret={igProd.appSecret} scopes={['user_profile', 'user_media']} redirectUrl={igProd.redirectUrl} onLoginSuccess={setIgToken} onLoginFailure={data =>console.log(data.code)} />

and I'm using the last version, 2.0.4. The error is the onLoginSuccess not receiving any data. I'm receiving a code onLoginFailure.

[hungdev]

@denisprado show me error from onLoginFailure func

[buraktt]

On v2.0.5 I'm having the same issue. It looks like a problem with the axios post call. It's not adding the correct headers to the request, hence instagram is returning an exception. (not sure why. never used axios before)

...
"data":{
"code":400,
"error_message":"Missing required field client_id",
"error_type":"OAuthException"
},
...

using fetch instead of axios fixed the issue for me: https://github.com/hungdev/react-native-instagram-login/blob/master/Instagram.js#L71

let form = new FormData();
form.append('client_id', appId);
form.append('client_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code);
let res = await fetch('https://api.instagram.com/oauth/access_token', {
  body: form,
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
})
if (res.status === 200) {
  const responseJson = await res.json()
  this.props.onLoginSuccess(responseJson, results);
} else {
  this.props.onLoginFailure(results);
}

[tienle46]

I'm also having this issue on 2.0.5. Calling'https://api.instagram.com/oauth/access_token' returning Forbidden 403 on Android, even it was working fine yesterday. Anyone got solution for this ?

[Tymofiev]

I'm also having this issue on 2.0.5. Calling'https://api.instagram.com/oauth/access_token' returning Forbidden 403 on Android, even it was working fine yesterday. Anyone got solution for this ?

The issue returned as unexpected as gone for me. I've been trying for an hour to figure out what the problem is and for now I see the possible issue with setting the cookies along with returning the response, seems like axios needs to be configured correctly for this.

[cisplRejjak]

@Tymofiev did you find any solution for this?

[Dlas1212]

+1

[unixkapl]

+1

[tienle46]

I'm also having this issue on 2.0.5. Calling'https://api.instagram.com/oauth/access_token' returning Forbidden 403 on Android, even it was working fine yesterday. Anyone got solution for this ?

The issue returned as unexpected as gone for me. I've been trying for an hour to figure out what the problem is and for now I see the possible issue with setting the cookies along with returning the response, seems like axios needs to be configured correctly for this.

I have tried using Fetch as @buraktt suggested but it still returned Network Error which I guess is the same with axios error. Still looking for any solution.

[Tymofiev]

@Tymofiev did you find any solution for this?

Looks like issues appears because of spaming with /oauth/access_token, tried on another account and it worked. Found some descriptions on 403 errors in here https://developers.facebook.com/docs/instagram-basic-display-api/reference/error-codes/ It says that error could be thrown when Rate limit exceeded.

[hungdev]

@Tymofiev did you find any solution for this?

Looks like issues appears because of spaming with /oauth/access_token, tried on another account and it worked. Found some descriptions on 403 errors in here https://developers.facebook.com/docs/instagram-basic-display-api/reference/error-codes/ It says that error could be thrown when Rate limit exceeded.

But i tried with postman with the same account, and it still works. I don't know exactly where the problem is coming from.

[hungdev]

And we should only discuss in 1 thread. Please don't discuss the error: returned 403 here to avoid distractions Everything related to returned 403 should discuss in https://github.com/hungdev/react-native-instagram-login/issues/102

[Tymofiev]

@Tymofiev did you find any solution for this?

Looks like issues appears because of spaming with /oauth/access_token, tried on another account and it worked. Found some descriptions on 403 errors in here https://developers.facebook.com/docs/instagram-basic-display-api/reference/error-codes/ It says that error could be thrown when Rate limit exceeded.

But i tried with postman with the same account, and it still works. I don't know exactly where the problem is coming from.

Hmm, one more thing that I noticed that it didn't work when I didn't receive notification on IG app about new login from some browser. Have no idea how it can be connected though

[Dlas1212]

I solved the issue and still not sure why it doesn't work.

/authorize works and returns you the code. You may use PostMan on /access_token and it works. Although using /access_token within the package throws a 403. Switching axios -> fetch, still throws the same error ONLY on /access_token. This has nothing to do with rate limits since you can literally get the values from another spot.

What I ended up doing is making an API call to my main application (PHP app) which I pass the CODE from /authorize. Then doing the EXACT same call to /access_token and returning the token.

Not sure why this method works since it's exactly the same, but doing the call within the app is getting blocked.

[alyn3d]

@Dlas1212 You're talking about making the call within redirectUrl on backend, right? Then how do you capture the access_token on the frontend side, cause react-native-instagram-login is looking for the code in querystring.

[Dlas1212]

InstagramLogin - leave the app secret key empty, which will return you the authorize code in loginSuccess(). Then make your api call - pass the code - do the /access_token there and return access_token to your app.

[alyn3d]

Oh, now it makes sense to me. Thank you :)

[sujay-bidchat]

https://github.com/hungdev/react-native-instagram-login/issues/102#issuecomment-1003946692

[bleszerd]

Found the issue but this is rather unexplainable ...

Instagram changed the fields app_id and app_secret used with access_token to client_id and client_secret. https://developers.facebook.com/docs/instagram-basic-display-api/reference/oauth-access-token

So in the file instagram.js from your react-native-instagram-login replace the following code

form.append('app_id', appId);
form.append('app_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code);

with

form.append('client_id', appId);
form.append('client_secret', appSecret);
form.append('grant_type', 'authorization_code');
form.append('redirect_uri', redirectUrl);
form.append('code', code)

And your login should work again.

Why the requests are working on the ios simulator and failing with a real device is totally beyond me though ...

I wanted to highlight this answer, it's simple, but it solved my problem

[Dlas1212]

Found the issue but this is rather unexplainable ...

Instagram changed the fields app_id and app_secret used with access_token to client_id and client_secret. https://developers.facebook.com/docs/instagram-basic-display-api/reference/oauth-access-token

So in the file instagram.js from your react-native-instagram-login replace the following code

form.append('app_id', appId);

form.append('app_secret', appSecret);

form.append('grant_type', 'authorization_code');

form.append('redirect_uri', redirectUrl);

form.append('code', code);

with

form.append('client_id', appId);

form.append('client_secret', appSecret);

form.append('grant_type', 'authorization_code');

form.append('redirect_uri', redirectUrl);

form.append('code', code)

And your login should work again.

Why the requests are working on the ios simulator and failing with a real device is totally beyond me though ...

I wanted to highlight this answer, it's simple, but it solved my problem

It's already using client_id and client_secret

[duongquang1611]

does anyone have a solution? i used fetch still get 403 error