Silent authentication CORS problem when using Keycloak

Question

I'm trying to perform Silent Authentication on my site using the following call:

fetch('http://localhost:8100/auth/realms/master/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=portal&redirect_uri=http%3A//localhost%3A8080/o/auth/oidc/callback&state=CJOREX0_bHtivjgNUYRkE3908LqdnUUvm2Jhxo5U8tg&nonce=MJj2eQkCtlwqIx0UbSFdWRsbll7fiBSUkRkbxzi2VFs&prompt=none', {
    method: 'GET',
    mode: 'cors'
})

I have configured web origins for my client as follows:

But I'm still getting CORS error:

Access to fetch at 'http://localhost:8100/auth/realms/master/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=portal&redirect_uri=http%3A//localhost%3A8080/o/auth/oidc/callback&state=CJOREX0_bHtivjgNUYRkE3908LqdnUUvm2Jhxo5U8tg&nonce=MJj2eQkCtlwqIx0UbSFdWRsbll7fiBSUkRkbxzi2VFs&prompt=none' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Any idea what am I missing here?

What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker
@sideshowbarker, it's not about status code, it's about missing Access-Control-Allow-Origin header, so the request is blocked by the browser itself. — Alexander

Alexander Alexander · Accepted Answer · 2021-07-03T07:08:55

The whole approach was a mistake here. I was trying to use Authorization Code flow from the client, which is not how it should work. Authorization Code flow is always about server to server interaction with client side redirects.

If you'd like to use it, you will need to open the target page in an iframe or a separate page (for silent authentication, an invisible iframe will do).

If your goal is to have pure client-side authentication you'd rather consider using Implicit (which is classic and simple, but is not currently recommended for security reasons) or Authorization Code with PKCE flows.

There are many resources regarding auth flows, but if you'd like to see quick and high-level overview of them, I recommend to check this short article: https://dev.to/hem/oauth-2-0-flows-explained-in-gifs-2o7a

Silent authentication CORS problem when using Keycloak

1 Answers