401 unauthorized browser alert after fetch call with bearer token in react

Question

I have a get fetch request with header having Bearer token, getting 401 unauthorized error, even if the response status condition checked in the then statement,the browser is showing sign in alert box, can you please suggest how to avoid browser alert on 401 error

    function call(url: string, req:RequestInit):Promise<Any>{[enter image description here][1]
    req.headers = { Authorization: 'Bearer ' + idToken };
    
    return fetch(url, req)
                .then((response: Any) => {
                    if (response.status !== 200) {
                        // return to base url
                        return false;
                    } else {
                        return response;
                    }
                })
    }

for

score 0 · Accepted Answer · answered May 13 '22 at 09:40

Whether the prompt displays or not depends on WWW-Authenticate header that you receive in the response.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/WWW-Authenticate

Verify what are the conditions for it to appear in response (server-side) or if you can configure server not to send this header. If you cannot modify server itself, you can try to use a proxy.

Refer to How can I suppress the browser's authentication dialog?

401 unauthorized browser alert after fetch call with bearer token in react

1 Answers1