[Bug]: ReCaptcha - possible security breach + misguided documentation

[drma-tech]

Blazorise Version

all

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

https://dev.streamingdiscovery.com/login-providers

Steps to reproduce

follow documentation

What is expected?

be able to connect correctly with Google and securely

What is actually happening?

I followed the example in the documentation, but I soon came across a CORS error, because I'm using WASM and the call is made from the browser. After researching, I discovered that the correct thing to do would be to call it from an API, not directly from the WEB project (no matter what settings you make in the Google Console).
But I also noticed a second problem: I saw a lot of comments from people saying that this key shouldn't be public, but private. But the documentation says that the key should be configured in program.cs, which makes it public to the user, since it's in the source code.

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

[drma-tech]

I also received a warning from GitHub about uploading the source code with this key. In other words, it is also suggesting that the recaptcha key must be private under any circumstances.

[David-Moreira]

Hello,
Since you are using WASM which runs your app on the client side, it is true you should implement server validation.
The public key, is exactly that a public key that only your server with the private key should be able to validate against it. There are also additional measures over at google admin console, so the public key is only valid against domains you configure.

You do not need to commit the public key to your source code repository as any other secret. You should have something like a pipeline command running to replace the value with your production secret. It will be visible by users if they really want to see it, but again, the server validation makes it secure.

Maybe we're not clear in the docs, but you should follow the google recaptcha documentation to make sure everything is implemented correctly, we do have an example that showcases the server implementation:
In the screenshot below from the docs find the example of the validation that should be running in the server, in our docs we've made it run in the app itself, because it's Blazor Server, and to simplify the example:
The private key should be in the server.

https://blazorise.com/docs/extensions/captcha

As for the CORS error, this error is happening when communicating with your own API is this not correct? You should configure it so whatever domain you're crossing is supported, by properly configuring the cors headers.