react via Entra ID: signIn

Question

Hello,

I wanna authenticate my WebApp in react against Entra ID.

I set it up according to the guide and now I am stuck.

I created a fetch request to obtain the id_token via redirect uri, but whenever the app is sending the request I get the response that 'Access-Control-Allow-Origin' is missing. I set it up on my side, but it still doesn't work.

So my question: what am I missing here?

---

useEffect(() => {
    if (signIn) {
        const signingIn = async () => {
            const signInReq = clientHost + tenantID + '/oauth2/v2.0/authorize?' +
                'client_id=' + clientID +
                '&response_type=id_token' +
                '&redirect_uri=' + redirectUri +
                '&response_mode=form_post' +
                '&scope=openid' +
                '&state=12345' +
                '&nonce=678910'
            const resp = await fetch(signInReq, {
                mode: 'cors',
                method: 'POST',
                redirect: 'manual',
                headers: {
                    'Allow-Control-Allow-Origin': '*',
                }
            });
            const respJson = await resp.json();
            console.log(respJson);
            setSignIn(false);
        }
        signingIn().catch(console.error);
    }
},
    [signIn]
)

Thanks & kind regards,

Answer 1

Hi @zihe2

Thank you for posting this on the Microsoft Q&A platform.

I understand that you want to authenticate your React WebApp against Entra ID and have set up a fetch request to obtain the id_token via the redirect URI. However, you are encountering an issue where the response is missing the 'Access-Control-Allow-Origin' header.

The missing Access-Control-Allow-Origin header in the response indicates a CORS (Cross-Origin Resource Sharing) issue, which determines whether a resource can be accessed by content from a different origin.

After reviewing your code, I noticed the following issue in the headers, you have used "Allow-Control-Allow-Origin", which is incorrect. The correct header is "Access-Control-Allow-Origin".

Using the wildcard Access-Control-Allow-Origin: * it means to allow all sites to access a private API.

Could you please correct it and try to obtain the id_token.

Hope this helps. Do let us know if you any further queries.

---

If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.