onLoginFailure being triggered every time #80

tuladharjaa · 2020-11-02T05:14:25Z

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

Tymofiev · 2020-11-02T10:54:14Z

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 · 2020-11-02T14:48:24Z

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

rafalzawadzki · 2020-11-02T17:39:01Z

Also facing the problem, Android only

Nico-Guyon · 2020-11-02T19:33:23Z

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 · 2020-11-02T21:22:03Z

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 · 2020-11-04T09:43:24Z

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 · 2020-11-04T10:01:08Z

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 · 2020-11-04T10:06:23Z

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

Dhanraj-bidchat · 2020-11-04T10:08:15Z

@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 · 2020-11-04T10:12:45Z

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

Dhanraj-bidchat · 2020-11-04T10:16:02Z

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

hungdev · 2020-11-04T16:44:00Z

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 · 2020-11-05T05:38:29Z

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 · 2020-11-05T08:44:54Z

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

tuladharjaa · 2020-11-10T05:55:17Z

Getting this on the "onLoginFailure"

Object { _: "" }

The latest package was working a while ago.

hungdev · 2020-11-10T06:18:09Z

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

tuladharjaa · 2020-11-10T06:34:27Z

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 · 2020-11-10T06:56:10Z

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 · 2020-11-10T07:03:43Z

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 · 2020-11-10T09:48:19Z

@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 · 2020-11-10T09:50:45Z

@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 · 2020-11-10T09:52:21Z

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

tuladharjaa · 2020-11-10T10:05:05Z

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

On iOS it is working fine.

Nico-Guyon · 2020-11-10T10:11:47Z

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 · 2020-11-12T14:29:51Z

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

tuladharjaa · 2020-11-12T19:53:54Z

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

denisprado · 2020-11-13T19:16:36Z

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

hungdev · 2020-11-16T03:45:51Z

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

denisprado · 2020-11-16T10:29:27Z

@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 · 2020-11-16T16:56:08Z

@denisprado show me error from onLoginFailure func

buraktt · 2021-10-03T12:08:55Z

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 · 2021-12-16T10:04:18Z

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 · 2021-12-16T10:20:48Z

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 · 2021-12-16T15:14:00Z

@Tymofiev did you find any solution for this?

Dlas1212 · 2021-12-17T01:08:50Z

+1

unixkapl · 2021-12-17T01:59:41Z

+1

tienle46 · 2021-12-17T02:31:20Z

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 · 2021-12-20T11:34:25Z

@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 · 2021-12-20T14:19:53Z

@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 · 2021-12-20T14:25:36Z

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
#102

Tymofiev · 2021-12-20T15:23:04Z

@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 · 2021-12-20T15:27:40Z

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 · 2021-12-20T15:50:46Z

@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 · 2021-12-20T15:52:58Z

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 · 2021-12-20T15:54:06Z

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

sujay-bidchat · 2022-01-10T12:59:46Z

#102 (comment)

bleszerd · 2022-01-10T20:14:57Z

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 · 2022-01-10T20:56:45Z

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 · 2023-05-08T08:32:50Z

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

alyn3d mentioned this issue Jan 10, 2022

403 Error [URGENT] #102

Open

onLoginFailure being triggered every time #80

onLoginFailure being triggered every time #80

Comments

tuladharjaa commented Nov 2, 2020

Tymofiev commented Nov 2, 2020

Dhanraj-bidchat commented Nov 2, 2020

rafalzawadzki commented Nov 2, 2020

Nico-Guyon commented Nov 2, 2020 • edited Loading

Nico-Guyon commented Nov 2, 2020 • edited Loading

Rramandeep commented Nov 4, 2020 • edited Loading

Dhanraj-bidchat commented Nov 4, 2020 • edited Loading

Rramandeep commented Nov 4, 2020

Dhanraj-bidchat commented Nov 4, 2020

Rramandeep commented Nov 4, 2020

Dhanraj-bidchat commented Nov 4, 2020

hungdev commented Nov 4, 2020

kiritm-nimblechapps commented Nov 5, 2020

hungdev commented Nov 5, 2020

tuladharjaa commented Nov 10, 2020 • edited Loading

hungdev commented Nov 10, 2020

tuladharjaa commented Nov 10, 2020

Nico-Guyon commented Nov 10, 2020

tuladharjaa commented Nov 10, 2020 • edited Loading

Dhanraj-bidchat commented Nov 10, 2020

tuladharjaa commented Nov 10, 2020

Dhanraj-bidchat commented Nov 10, 2020

tuladharjaa commented Nov 10, 2020

Nico-Guyon commented Nov 10, 2020

hungdev commented Nov 12, 2020

tuladharjaa commented Nov 12, 2020

denisprado commented Nov 13, 2020

hungdev commented Nov 16, 2020

denisprado commented Nov 16, 2020

hungdev commented Nov 16, 2020

buraktt commented Oct 3, 2021

tienle46 commented Dec 16, 2021 • edited Loading

Tymofiev commented Dec 16, 2021

cisplRejjak commented Dec 16, 2021

Dlas1212 commented Dec 17, 2021

unixkapl commented Dec 17, 2021

tienle46 commented Dec 17, 2021

Tymofiev commented Dec 20, 2021

hungdev commented Dec 20, 2021

hungdev commented Dec 20, 2021 • edited Loading

Tymofiev commented Dec 20, 2021

Dlas1212 commented Dec 20, 2021

alyn3d commented Dec 20, 2021

Dlas1212 commented Dec 20, 2021

alyn3d commented Dec 20, 2021

sujay-bidchat commented Jan 10, 2022

bleszerd commented Jan 10, 2022

Dlas1212 commented Jan 10, 2022

duongquang1611 commented May 8, 2023

Nico-Guyon commented Nov 2, 2020 •

edited

Loading

Nico-Guyon commented Nov 2, 2020 •

edited

Loading

Rramandeep commented Nov 4, 2020 •

edited

Loading

Dhanraj-bidchat commented Nov 4, 2020 •

edited

Loading

tuladharjaa commented Nov 10, 2020 •

edited

Loading

tuladharjaa commented Nov 10, 2020 •

edited

Loading

tienle46 commented Dec 16, 2021 •

edited

Loading

hungdev commented Dec 20, 2021 •

edited

Loading