hungdev / react-native-instagram-login

a react native instagram login component (support android & ios). Pull requests are welcome!
https://www.npmjs.com/package/react-native-instagram-login
184 stars 103 forks source link

returns status 403 when using code to fetch access token #120

Open Robogram opened 1 year ago

Robogram commented 1 year ago

specifically displays this

{"config": {"adapter": [Function xhrAdapter], "baseURL": "https://api.instagram.com/oauth/access_token", "data": {"_parts": [Array]}, "headers": {"Accept": "application/json, text/plain, /"}, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "url": "/", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}, "data": "<!DOCTYPE html> <html lang=\"en\" class=\"no-js logged-in \">

Page Not Found • Instagram
<body class=\" p-error dialog-404\" style=\"\">

        <div class=\"root -cx-PRIVATE-Page__root -cx-PRIVATE-Page__root__\">

                <div class=\"page -cx-PRIVATE-Page__body -cx-PRIVATE-Page__body__\">

                            <header class=\"top-bar top-bar-new -cx-PRIVATE-NavBar__root -cx-PRIVATE-NavBar__root__\">
<div class=\"top-bar-wrapper -cx-PRIVATE-NavBar__wrapper -cx-PRIVATE-NavBar__wrapper__\">
    <div class=\"logo -cx-PRIVATE-NavBar__logo -cx-PRIVATE-NavBar__logo__\"><a href=\"/\">Instagram</a></div>

    <div class=\"top-bar-left -cx-PRIVATE-NavBar__topBarLeft -cx-PRIVATE-NavBar__topBarLeft__\">
        <ul class=\"top-bar-actions\">
            <li>
                <a class=\"top-bar-home\" href=\"/\" label=Home><i></i></a>
            </li>
        </ul>
    </div>

        <div class=\"top-bar-right account-state\" id=\"top_bar_right\">
            <ul class=\"top-bar-actions -cx-PRIVATE-NavBar__topBarActions -cx-PRIVATE-NavBar__topBarActions__\">

                <li id=\"link_profile\" class=\"link-profile has-dropdown -cx-PRIVATE-NavBar__profile -cx-PRIVATE-NavBar__profile__\">
                    <a href=\"/georgegui7/\">
                        <strong class=\"-cx-PRIVATE-NavBar__username -cx-PRIVATE-NavBar__username__\">georgegui7</strong>
                    </a>

                </li>

            </ul>
        </div>

</div>

                    <div class=\"main -cx-PRIVATE-Page__main -cx-PRIVATE-Page__main__\">

<div class=\"error-container -cx-PRIVATE-ErrorPage__errorContainer -cx-PRIVATE-ErrorPage__errorContainer__\">

<h2>Error</h2>

    <p>Logged-in use not supported</p>

</div>

                    </div> <!-- .main -->

                </div> <!-- .page -->

                <footer class=\"page-footer -cx-PRIVATE-Footer__root -cx-PRIVATE-Footer__root__\" role=\"contentinfo\">
                    <div class=\"wrapper -cx-PRIVATE-Footer__wrapper -cx-PRIVATE-Footer__wrapper__\">
                        <nav class=\"-cx-PRIVATE-Footer__nav -cx-PRIVATE-Footer__nav__\">
                            <ul class=\"-cx-PRIVATE-Footer__navItems -cx-PRIVATE-Footer__navItems__\">
                                <li><a href=\"/about/us/\">About us</a></li>
                                <li><a href=\"https://help.instagram.com/\">Support</a></li>
                                <li><a href=\"https://about.instagram.com/blog/\">Press</a></li>
                                <li><a href=\"\">API</a></li>
                                <li><a href=\"https://about.instagram.com/about-us/careers\">Jobs</a></li>
                                <li><a href=\"/legal/privacy/\">Privacy</a></li>
                                <li><a href=\"/legal/terms/\">

                                      Terms

                                </a></li>

                            </ul>
                        </nav>

                        <p class=\"copyright -cx-PRIVATE-Footer__copyright -cx-PRIVATE-Footer__copyright__\">&copy; 2023 Instagram</p>
                    </div>
                </footer>

            <div id=\"reactModalMountPoint\"></div>
        </div> <!-- .root -->

    <script type=\"text/javascript\">

(function(){ function normalizeError(err) { var errorInfo = err.error || {}; var getConfigProp = function(propName, defaultValueIfNotTruthy) { var propValue = window._sharedData && window._sharedData[propName]; return propValue ? propValue : defaultValueIfNotTruthy; }; var windowUrl = window.location.href; var errUrl = err.url || windowUrl; return { line: err.line || errorInfo.message || 0, column: err.column || 0, name: 'InitError', message: err.message || errorInfo.message || '', script: errorInfo.script || '', stack: errorInfo.stackTrace || errorInfo.stack || '', timestamp: Date.now(), ref: windowUrl.indexOf('direct') >= 0 ? 'direct' : windowUrl, deployment_stage: getConfigProp('deployment_stage', ''), frontend_env: getConfigProp('frontend_env', 'prod'), rollout_hash: getConfigProp('rollout_hash', ''), is_prerelease: window.PRERELEASE || false, bundle_variant: getConfigProp('bundle_variant', null), request_url: errUrl.indexOf('direct') >= 0 ? 'direct' : errUrl, response_status_code: errorInfo.statusCode || 0 } } window.addEventListener('load', function(){ if (window.bufferedErrors && window.bufferedErrors.length) { if (window.caches && window.caches.keys && window.caches.delete) { window.caches.keys().then(function(keys) { keys.forEach(function(key) { window.caches.delete(key) }) }) } window.__bufferedErrors.map(function(error) { return normalizeError(error) }).forEach(function(normalizedError) { var request = new XMLHttpRequest(); request.open('POST', '/client_error/', true); request.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); request.send(JSON.stringify(normalizedError)); }) } }) }()); ", "headers": {"access-control-expose-headers": "X-IG-Set-WWW-Claim", "alt-svc": "h3=\":443\"; ma=86400", "cache-control": "private, no-cache, no-store, must-revalidate", "content-language": "en", "content-length": "21671", "content-security-policy": "report-uri https://www.instagram.com/security/csp_report/; default-src 'self' https://www.instagram.com; img-src data: blob: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com https://*.facebook.com https://*.fbsbx.com https://*.giphy.com; font-src data: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com; media-src 'self' blob: https://www.instagram.com https://*.cdninstagram.com https://*.fbcdn.net; manifest-src 'self' https://www.instagram.com; script-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://*.cdninstagram.com wss://www.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' https://*.www.instagram.com https://www.instagram.com 'unsafe-inline'; connect-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://graph.instagram.com https://*.graph.instagram.com https://i.instagram.com/graphql_www https://graphql.instagram.com https://*.cdninstagram.com https://api.instagram.com https://i.instagram.com https://*.i.instagram.com https://*.od.instagram.com wss://www.instagram.com wss://edge-chat.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net chrome-extension://boadgeojelhgndaghljhdicfkmllpafd blob:; worker-src 'self' blob: https://www.instagram.com; frame-src 'self' https://instagram.com https://www.instagram.com https://*.instagram.com https://staticxx.facebook.com https://www.facebook.com https://web.facebook.com https://connect.facebook.net https://m.facebook.com https://*.fbsbx.com; object-src 'none'; upgrade-insecure-requests", "content-type": "text/html; charset=utf-8", "cross-origin-embedder-policy-report-only": "require-corp;report-to=\"coep\"", "cross-origin-opener-policy": "same-origin-allow-popups;report-to=\"coop\"", "date": "Fri, 05 May 2023 20:41:03 GMT", "expires": "Sat, 01 Jan 2000 00:00:00 GMT", "origin-trial": "AuqWincgAuXeuu3KypEMnrrFEJHySaesyJS3EaIH40zvafzrU0Irhb7+5QwZpOqMZrPTjgvFl7Z5jJgy1dNAcQMAAAB6eyJvcmlnaW4iOiJodHRwczovL2luc3RhZ3JhbS5jb206NDQzIiwiZmVhdHVyZSI6IkNyb3NzT3JpZ2luT3BlbmVyUG9saWN5UmVwb3J0aW5nIiwiZXhwaXJ5IjoxNjEzNDExNjYyLCJpc1N1YmRvbWFpbiI6dHJ1ZX0=", "pragma": "no-cache", "report-to": "{\"group\": \"coep\", \"max_age\": 86400, \"endpoints\": [{\"url\": \"/security/coep_report/\"}]},{\"group\": \"coop\", \"max_age\": 86400, \"endpoints\": [{\"url\": \"/security/coop_report/\"}]}", "retry-after": "1", "set-cookie": ["rur=\"EAG\05458810415039\0541714855263:01f73a7d7e55f3fe7246a46a025f785c076bab72b906768dca44f5ea3c40d9973056967a\"; Domain=.instagram.com; HttpOnly; Path=/; SameSite=Lax; Secure"], "strict-transport-security": "max-age=31536000", "vary": "Accept-Language, Cookie", "x-aed": "86", "x-content-type-options": "nosniff", "x-fb-trip-id": "1679558926", "x-frame-options": "SAMEORIGIN", "x-ig-cache-control": "no-cache", "x-ig-origin-region": "eag", "x-ig-peak-time": "0", "x-ig-push-state": "c2", "x-ig-request-elapsed-time-ms": "89", "x-xss-protection": "0"}, "request": {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": false, "_headers": {"accept": "application/json, text/plain, /"}, "_incrementalEvents": false, "_lowerCaseResponseHeaders": {"access-control-expose-headers": "X-IG-Set-WWW-Claim", "alt-svc": "h3=\":443\"; ma=86400", "cache-control": "private, no-cache, no-store, must-revalidate", "content-language": "en", "content-length": "21671", "content-security-policy": "report-uri https://www.instagram.com/security/csp_report/; default-src 'self' https://www.instagram.com; img-src data: blob: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com https://*.facebook.com https://*.fbsbx.com https://*.giphy.com; font-src data: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com; media-src 'self' blob: https://www.instagram.com https://*.cdninstagram.com https://*.fbcdn.net; manifest-src 'self' https://www.instagram.com; script-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://*.cdninstagram.com wss://www.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' https://*.www.instagram.com https://www.instagram.com 'unsafe-inline'; connect-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://graph.instagram.com https://*.graph.instagram.com https://i.instagram.com/graphql_www https://graphql.instagram.com https://*.cdninstagram.com https://api.instagram.com https://i.instagram.com https://*.i.instagram.com https://*.od.instagram.com wss://www.instagram.com wss://edge-chat.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net chrome-extension://boadgeojelhgndaghljhdicfkmllpafd blob:; worker-src 'self' blob: https://www.instagram.com; frame-src 'self' https://instagram.com https://www.instagram.com https://*.instagram.com https://staticxx.facebook.com https://www.facebook.com https://web.facebook.com https://connect.facebook.net https://m.facebook.com https://*.fbsbx.com; object-src 'none'; upgrade-insecure-requests", "content-type": "text/html; charset=utf-8", "cross-origin-embedder-policy-report-only": "require-corp;report-to=\"coep\"", "cross-origin-opener-policy": "same-origin-allow-popups;report-to=\"coop\"", "date": "Fri, 05 May 2023 20:41:03 GMT", "expires": "Sat, 01 Jan 2000 00:00:00 GMT", "origin-trial": "AuqWincgAuXeuu3KypEMnrrFEJHySaesyJS3EaIH40zvafzrU0Irhb7+5QwZpOqMZrPTjgvFl7Z5jJgy1dNAcQMAAAB6eyJvcmlnaW4iOiJodHRwczovL2luc3RhZ3JhbS5jb206NDQzIiwiZmVhdHVyZSI6IkNyb3NzT3JpZ2luT3BlbmVyUG9saWN5UmVwb3J0aW5nIiwiZXhwaXJ5IjoxNjEzNDExNjYyLCJpc1N1YmRvbWFpbiI6dHJ1ZX0=", "pragma": "no-cache", "report-to": "{\"group\": \"coep\", \"max_age\": 86400, \"endpoints\": [{\"url\": \"/security/coep_report/\"}]},{\"group\": \"coop\", \"max_age\": 86400, \"endpoints\": [{\"url\": \"/security/coop_report/\"}]}", "retry-after": "1", "set-cookie": "rur=\"EAG\05458810415039\0541714855263:01f73a7d7e55f3fe7246a46a025f785c076bab72b906768dca44f5ea3c40d9973056967a\"; Domain=.instagram.com; HttpOnly; Path=/; SameSite=Lax; Secure", "strict-transport-security": "max-age=31536000", "vary": "Accept-Language, Cookie", "x-aed": "86", "x-content-type-options": "nosniff", "x-fb-trip-id": "1679558926", "x-frame-options": "SAMEORIGIN", "x-ig-cache-control": "no-cache", "x-ig-origin-region": "eag", "x-ig-peak-time": "0", "x-ig-push-state": "c2", "x-ig-request-elapsed-time-ms": "89", "x-xss-protection": "0"}, "_method": "POST", "_perfKey": "network_XMLHttpRequest_https://api.instagram.com/oauth/access_token/", "_performanceLogger": {"_closed": false, "_extras": [Object], "_pointExtras": [Object], "_points": [Object], "_timespans": [Object]}, "_requestId": null, "_response": "<!DOCTYPE html> <html lang=\"en\" class=\"no-js logged-in \">

Page Not Found • Instagram
<body class=\" p-error dialog-404\" style=\"\">

        <div class=\"root -cx-PRIVATE-Page__root -cx-PRIVATE-Page__root__\">

                <div class=\"page -cx-PRIVATE-Page__body -cx-PRIVATE-Page__body__\">

                            <header class=\"top-bar top-bar-new -cx-PRIVATE-NavBar__root -cx-PRIVATE-NavBar__root__\">
<div class=\"top-bar-wrapper -cx-PRIVATE-NavBar__wrapper -cx-PRIVATE-NavBar__wrapper__\">
    <div class=\"logo -cx-PRIVATE-NavBar__logo -cx-PRIVATE-NavBar__logo__\"><a href=\"/\">Instagram</a></div>

    <div class=\"top-bar-left -cx-PRIVATE-NavBar__topBarLeft -cx-PRIVATE-NavBar__topBarLeft__\">
        <ul class=\"top-bar-actions\">
            <li>
                <a class=\"top-bar-home\" href=\"/\" label=Home><i></i></a>
            </li>
        </ul>
    </div>

        <div class=\"top-bar-right account-state\" id=\"top_bar_right\">
            <ul class=\"top-bar-actions -cx-PRIVATE-NavBar__topBarActions -cx-PRIVATE-NavBar__topBarActions__\">

                <li id=\"link_profile\" class=\"link-profile has-dropdown -cx-PRIVATE-NavBar__profile -cx-PRIVATE-NavBar__profile__\">
                    <a href=\"/georgegui7/\">
                        <strong class=\"-cx-PRIVATE-NavBar__username -cx-PRIVATE-NavBar__username__\">georgegui7</strong>
                    </a>

                </li>

            </ul>
        </div>

</div>

                    <div class=\"main -cx-PRIVATE-Page__main -cx-PRIVATE-Page__main__\">

<div class=\"error-container -cx-PRIVATE-ErrorPage__errorContainer -cx-PRIVATE-ErrorPage__errorContainer__\">

<h2>Error</h2>

    <p>Logged-in use not supported</p>

</div>

                    </div> <!-- .main -->

                </div> <!-- .page -->

                <footer class=\"page-footer -cx-PRIVATE-Footer__root -cx-PRIVATE-Footer__root__\" role=\"contentinfo\">
                    <div class=\"wrapper -cx-PRIVATE-Footer__wrapper -cx-PRIVATE-Footer__wrapper__\">
                        <nav class=\"-cx-PRIVATE-Footer__nav -cx-PRIVATE-Footer__nav__\">
                            <ul class=\"-cx-PRIVATE-Footer__navItems -cx-PRIVATE-Footer__navItems__\">
                                <li><a href=\"/about/us/\">About us</a></li>
                                <li><a href=\"https://help.instagram.com/\">Support</a></li>
                                <li><a href=\"https://about.instagram.com/blog/\">Press</a></li>
                                <li><a href=\"\">API</a></li>
                                <li><a href=\"https://about.instagram.com/about-us/careers\">Jobs</a></li>
                                <li><a href=\"/legal/privacy/\">Privacy</a></li>
                                <li><a href=\"/legal/terms/\">

                                      Terms

                                </a></li>

                            </ul>
                        </nav>

                        <p class=\"copyright -cx-PRIVATE-Footer__copyright -cx-PRIVATE-Footer__copyright__\">&copy; 2023 Instagram</p>
                    </div>
                </footer>

            <div id=\"reactModalMountPoint\"></div>
        </div> <!-- .root -->

    <script type=\"text/javascript\">

(function(){ function normalizeError(err) { var errorInfo = err.error || {}; var getConfigProp = function(propName, defaultValueIfNotTruthy) { var propValue = window._sharedData && window._sharedData[propName]; return propValue ? propValue : defaultValueIfNotTruthy; }; var windowUrl = window.location.href; var errUrl = err.url || windowUrl; return { line: err.line || errorInfo.message || 0, column: err.column || 0, name: 'InitError', message: err.message || errorInfo.message || '', script: errorInfo.script || '', stack: errorInfo.stackTrace || errorInfo.stack || '', timestamp: Date.now(), ref: windowUrl.indexOf('direct') >= 0 ? 'direct' : windowUrl, deployment_stage: getConfigProp('deployment_stage', ''), frontend_env: getConfigProp('frontend_env', 'prod'), rollout_hash: getConfigProp('rollout_hash', ''), is_prerelease: window.PRERELEASE || false, bundle_variant: getConfigProp('bundle_variant', null), request_url: errUrl.indexOf('direct') >= 0 ? 'direct' : errUrl, response_status_code: errorInfo.statusCode || 0 } } window.addEventListener('load', function(){ if (window.bufferedErrors && window.bufferedErrors.length) { if (window.caches && window.caches.keys && window.caches.delete) { window.caches.keys().then(function(keys) { keys.forEach(function(key) { window.caches.delete(key) }) }) } window.__bufferedErrors.map(function(error) { return normalizeError(error) }).forEach(function(normalizedError) { var request = new XMLHttpRequest(); request.open('POST', '/client_error/', true); request.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); request.send(JSON.stringify(normalizedError)); }) } }) }()); ", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "https://api.instagram.com/oauth/access_token/", "readyState": 4, "responseHeaders": {"Alt-Svc": "h3=\":443\"; ma=86400", "Cache-Control": "private, no-cache, no-store, must-revalidate", "Content-Language": "en", "Content-Length": "21671", "Content-Type": "text/html; charset=utf-8", "Date": "Fri, 05 May 2023 20:41:03 GMT", "Expires": "Sat, 01 Jan 2000 00:00:00 GMT", "Pragma": "no-cache", "Set-Cookie": "rur=\"EAG\05458810415039\0541714855263:01f73a7d7e55f3fe7246a46a025f785c076bab72b906768dca44f5ea3c40d9973056967a\"; Domain=.instagram.com; HttpOnly; Path=/; SameSite=Lax; Secure", "Strict-Transport-Security": "max-age=31536000", "Vary": "Accept-Language, Cookie", "access-control-expose-headers": "X-IG-Set-WWW-Claim", "content-security-policy": "report-uri https://www.instagram.com/security/csp_report/; default-src 'self' https://www.instagram.com; img-src data: blob: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com https://*.facebook.com https://*.fbsbx.com https://*.giphy.com; font-src data: https://*.fbcdn.net https://*.instagram.com https://*.cdninstagram.com; media-src 'self' blob: https://www.instagram.com https://*.cdninstagram.com https://*.fbcdn.net; manifest-src 'self' https://www.instagram.com; script-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://*.cdninstagram.com wss://www.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' https://*.www.instagram.com https://www.instagram.com 'unsafe-inline'; connect-src 'self' https://instagram.com https://www.instagram.com https://*.www.instagram.com https://graph.instagram.com https://*.graph.instagram.com https://i.instagram.com/graphql_www https://graphql.instagram.com https://*.cdninstagram.com https://api.instagram.com https://i.instagram.com https://*.i.instagram.com https://*.od.instagram.com wss://www.instagram.com wss://edge-chat.instagram.com https://*.facebook.com https://*.fbcdn.net https://*.facebook.net chrome-extension://boadgeojelhgndaghljhdicfkmllpafd blob:; worker-src 'self' blob: https://www.instagram.com; frame-src 'self' https://instagram.com https://www.instagram.com https://*.instagram.com https://staticxx.facebook.com https://www.facebook.com https://web.facebook.com https://connect.facebook.net https://m.facebook.com https://*.fbsbx.com; object-src 'none'; upgrade-insecure-requests", "cross-origin-embedder-policy-report-only": "require-corp;report-to=\"coep\"", "cross-origin-opener-policy": "same-origin-allow-popups;report-to=\"coop\"", "origin-trial": "AuqWincgAuXeuu3KypEMnrrFEJHySaesyJS3EaIH40zvafzrU0Irhb7+5QwZpOqMZrPTjgvFl7Z5jJgy1dNAcQMAAAB6eyJvcmlnaW4iOiJodHRwczovL2luc3RhZ3JhbS5jb206NDQzIiwiZmVhdHVyZSI6IkNyb3NzT3JpZ2luT3BlbmVyUG9saWN5UmVwb3J0aW5nIiwiZXhwaXJ5IjoxNjEzNDExNjYyLCJpc1N1YmRvbWFpbiI6dHJ1ZX0=", "report-to": "{\"group\": \"coep\", \"max_age\": 86400, \"endpoints\": [{\"url\": \"/security/coep_report/\"}]},{\"group\": \"coop\", \"max_age\": 86400, \"endpoints\": [{\"url\": \"/security/coop_report/\"}]}", "retry-after": "1", "x-aed": "86", "x-content-type-options": "nosniff", "x-fb-trip-id": "1679558926", "x-frame-options": "SAMEORIGIN", "x-ig-cache-control": "no-cache", "x-ig-origin-region": "eag", "x-ig-peak-time": "0", "x-ig-push-state": "c2", "x-ig-request-elapsed-time-ms": "89", "x-xss-protection": "0"}, "responseURL": "https://api.instagram.com/oauth/access_token/", "status": 403, "timeout": 0, "upload": {}, "withCredentials": true}, "status": 403, "statusText": undefined}

duongquang1611 commented 1 year ago

+1

Robogram commented 1 year ago

+1

??? fine, srry for the long logs lol. Basically, I'm getting pretty plugin errors as a result

Jaredude commented 1 year ago

I started encountering this issue as well. I've found the access token call works fine when I'm running a simulator. If I take the values and use them in Postman to manually make a request to oauth/access_token, I'm receiving back an access token fine as well.

Only when I run on a physical device, the IG servers always return a 403.

@Robogram Are you encountering the same behavior on physical devices only? Does running your app on a simulator work fine?

I thought that perhaps the axios version in package.json in the library was the cause of the problem, but I patched react-native-instagram-login to use "axios": "^1.4.0", and the 403 issue on a physical device persists.

I even tried making the request via fetch instead of axios, and I ended up with the same 403 on physical devices only and success on simulators behavior.

Since this is a 403, I'm thinking the likely culprit is the IG servers themselves and not this library. I have an open bug request with FB since May 4. I'll try to remember to come back to this post if I hear anything one way or the other.

Robogram commented 1 year ago

Yeah, we're on the same page here lol. I'm currently still testing stuff out with both fetch and axios in javascript,

but I haven't ran it on a simulator yet, just my physical device so far, I'll try it asap and let you know:)

Robogram commented 1 year ago

Yeah, somehow the simulator works but not on the physical device. Never experienced this before, this is interesting lol.

duongquang1611 commented 1 year ago

My real device also has this error, why 1 time struggling can't handle it, I called api get access_token on my Backend and no more 403 error. It's so tired

Robogram commented 1 year ago

yeah I'm tired too lol. I hope the instagram api team can acknowledge this sooner and get it fix

Jaredude commented 1 year ago

Not a big surprise, but Meta support provided no support at all. I provided them with the details that only requests coming from a physical mobile device were receiving a 403 from their servers, and they told me that's not their realm. You can find the support ticket here: https://developers.facebook.com/support/bugs/1931307653882844/ And feel free to open up your own ticket so that they can understand the issue is with their servers and not with the code.

I also posted in the community to see if others have been encountering this odd issue: https://developers.facebook.com/community/threads/805517364418376/?post_id=805517367751709

rofirezkin commented 1 year ago

try this solution in react-native-instagram-login/instagram.js

I replace scope else in line around 70.

      const data = {
        client_id: appId,
        client_secret: appSecret,
        grant_type: 'authorization_code',
        redirect_uri: redirectUrl,
        code: code,
      };

      const url = 'oauth/access_token';

      const api = axios.create({
        baseURL: 'https://api.instagram.com/',
        withCredentials: false, // Disable automatic handling of cookies
      });

      const config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      };

      api
          .post(url, new URLSearchParams(data).toString(), config)
          .then((res) => {
            console.log(res);
            // Handle the response containing the access token
            if (res) {
              this.props.onLoginSuccess(res.data, results);
            } else {
              this.props.onLoginFailure(results);
            }
            // Use the access token to make further API requests
            // ...
          })
          .catch((error) => {
            console.log(error);
            // Handle any error that occurred during the request
          });
Robogram commented 1 year ago

try this solution in react-native-instagram-login/instagram.js

I replace scope else in line around 70.

      const data = {
        client_id: appId,
        client_secret: appSecret,
        grant_type: 'authorization_code',
        redirect_uri: redirectUrl,
        code: code,
      };

      const url = 'oauth/access_token';

      const api = axios.create({
        baseURL: 'https://api.instagram.com/',
        withCredentials: false, // Disable automatic handling of cookies
      });

      const config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      };

      api
          .post(url, new URLSearchParams(data).toString(), config)
          .then((res) => {
            console.log(res);
            // Handle the response containing the access token
            if (res) {
              this.props.onLoginSuccess(res.data, results);
            } else {
              this.props.onLoginFailure(results);
            }
            // Use the access token to make further API requests
            // ...
          })
          .catch((error) => {
            console.log(error);
            // Handle any error that occurred during the request
          });

Thank you man:) I'll definitely try this whenever I can

Jaredude commented 1 year ago

@rofirezkin Great find! The key is on the axios create call withCredentials: false, // Disable automatic handling of cookies

Adding that one line will resolve the issue!

If you have patch-package, it should produce a patch file along these lines:

diff --git a/node_modules/react-native-instagram-login/Instagram.js b/node_modules/react-native-instagram-login/Instagram.js
index bffac6c..5e81911 100644
--- a/node_modules/react-native-instagram-login/Instagram.js
+++ b/node_modules/react-native-instagram-login/Instagram.js
@@ -72,6 +72,7 @@ export default class Instagram extends Component {
           let http = axios.create({
             baseURL: 'https://api.instagram.com/oauth/access_token',
             headers: headers,
+            withCredentials: false,
           });
           let form = new FormData();
           form.append('client_id', appId);

I have tested the above on my physical device, and it worked. A colleague also tested the patch, and it's working as expected to resolve the IG issue!

Robogram commented 1 year ago

@rofirezkin Great find! The key is on the axios create call withCredentials: false, // Disable automatic handling of cookies

Adding that one line will resolve the issue!

If you have patch-package, it should produce a patch file along these lines:

diff --git a/node_modules/react-native-instagram-login/Instagram.js b/node_modules/react-native-instagram-login/Instagram.js
index bffac6c..5e81911 100644
--- a/node_modules/react-native-instagram-login/Instagram.js
+++ b/node_modules/react-native-instagram-login/Instagram.js
@@ -72,6 +72,7 @@ export default class Instagram extends Component {
           let http = axios.create({
             baseURL: 'https://api.instagram.com/oauth/access_token',
             headers: headers,
+            withCredentials: false,
           });
           let form = new FormData();
           form.append('client_id', appId);

I have tested the above on my physical device, and it worked. A colleague also tested the patch, and it's working as expected to resolve the IG issue!

Thank you @rofirezkin for the solution,

@rofirezkin Great find! The key is on the axios create call withCredentials: false, // Disable automatic handling of cookies

Adding that one line will resolve the issue!

If you have patch-package, it should produce a patch file along these lines:

diff --git a/node_modules/react-native-instagram-login/Instagram.js b/node_modules/react-native-instagram-login/Instagram.js
index bffac6c..5e81911 100644
--- a/node_modules/react-native-instagram-login/Instagram.js
+++ b/node_modules/react-native-instagram-login/Instagram.js
@@ -72,6 +72,7 @@ export default class Instagram extends Component {
           let http = axios.create({
             baseURL: 'https://api.instagram.com/oauth/access_token',
             headers: headers,
+            withCredentials: false,
           });
           let form = new FormData();
           form.append('client_id', appId);

I have tested the above on my physical device, and it worked. A colleague also tested the patch, and it's working as expected to resolve the IG issue!

try this solution in react-native-instagram-login/instagram.js

I replace scope else in line around 70.

      const data = {
        client_id: appId,
        client_secret: appSecret,
        grant_type: 'authorization_code',
        redirect_uri: redirectUrl,
        code: code,
      };

      const url = 'oauth/access_token';

      const api = axios.create({
        baseURL: 'https://api.instagram.com/',
        withCredentials: false, // Disable automatic handling of cookies
      });

      const config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      };

      api
          .post(url, new URLSearchParams(data).toString(), config)
          .then((res) => {
            console.log(res);
            // Handle the response containing the access token
            if (res) {
              this.props.onLoginSuccess(res.data, results);
            } else {
              this.props.onLoginFailure(results);
            }
            // Use the access token to make further API requests
            // ...
          })
          .catch((error) => {
            console.log(error);
            // Handle any error that occurred during the request
          });

Thank you @rofirezkin. Worked as expected

WossomGonzo commented 1 year ago

Hello! Are you guys going to create a Pull Request?

Kushagra7744 commented 1 year ago

Hi guys! Will you be creating a pull request for this? I was facing the same issue and @rofirezkin's solution solved my problem. Thanks for this!

hungdev commented 1 year ago

I haven't used this library for a long time. Thank you all. This pull request merged and released a new version.