The context/environment is not secure

[madtag]

Hi all,

I am trying to use this module to authenticate on keycloak. After solving cors issues I am not getting the error below. Tried on Chrome just in case and got the same error. Any ideas on how to solve this?

[sebastianvitterso]

Hi, @madtag!
This error is thrown by pkceUtils.ts:24-30.
It can happen because of an outdated browser, but it's probably rather because you are trying to use it in an "unsecure context" where SubtleCrypto is disabled automatically by the browser (for security reasons). (MDN docs on crypto.subtle)

Any url that starts with http:// instead of https:// (except localhost, I think) are considered insecure automatically.

Two quick ways to check if this is the issue:

1. Tap the address bar in your browser, and copy and paste it. Does it say http:// at the beginning (and the rest isn't localhost) - then that's your issue.
2. To check whether javascript considers the website to be secure, simply open your dev console and type in window.isSecureContext, to see what it returns. If that's false, you need to look at why. (MDN docs on Secure contexts).

To solve this issue, you probably need to host your website using TLS (HTTPS).

Let us know if that wasn't your issue, and we'll have a look!

[madtag]

So I checked with window.isSecureContext and you are correct about http being unsecure and https and localhost being secure. This is the problem now. using http://localhost:3000 when I try to login I get a CORS error. If I use http://myIP:3000 I get the context error.

If I run my application using HTTPS=true in .env file for both http://localhost:3000 and https://myIP:3000 i get the error below when trying to login

[soofstad]

The "normal" solution to this is to add "http://localhost:3000" as a valid address in the auth provider, to whitelist it for CORS errors.

If you are uncomfortable with that for security reasons, you could create a new client in the auth provider for local development only.

[madtag]

[soofstad]

In Keycloak, valid redirect does not update CORS.
You will need to add localhost to "Web origins" as well.

[madtag]

This solved the cors issue. I selected the first comment as the answer to the question because that solved the security issue. Thanks a million mate.

[soofstad]

Good stuff! Happy to help. Give the project a star if you haven't already 😉