https://github.com/sebadob/leptos-captcha

Simple, fully self-hosted Captcha / PoW component for Leptos without any user interaction
https://github.com/sebadob/leptos-captcha

captcha leptos proof-of-work rust wasm

Last synced: about 1 month ago
JSON representation

Simple, fully self-hosted Captcha / PoW component for Leptos without any user interaction

• Host: GitHub
• URL: https://github.com/sebadob/leptos-captcha
• Owner: sebadob
• License: mit
• Created: 2023-12-31T15:10:53.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-02-02T16:14:04.000Z (5 months ago)
• Last Synced: 2024-04-25T18:02:54.498Z (3 months ago)
• Topics: captcha, leptos, proof-of-work, rust, wasm
• Language: Rust
• Homepage:
• Size: 39.1 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - sebadob/leptos-captcha - Simple, fully self-hosted Captcha / PoW component for Leptos without any user interaction (Rust)
• awesome-leptos - leptos-captcha

README

        
# leptos-captcha

This is a simple Captcha component. Everything runs on the same backend without any external dependencies.  

The crate for the Proof of Work (PoW) being used is [spow](https://github.com/sebadob/spow), which is another project of

mine. If you want to know more about the algorithm, please take a look at the repository.  

No user input, solving weird puzzles, or anything like that is needed. This provides a way better UX than the

traditional captchas out there.

This component is designed to be injected into a `` for easy usage with leptos server_fn's, but you

can of course use it independently and build a custom solution, if you like. In that case you might consider to use

[spow](https://github.com/sebadob/spow) directly.

No inline-css is being used on purpose for 2 reasons:

- you are not forced to use an `unsafe-inline` CSP for `style-src`, if you don't like that

- you can customize the whole look yourself

For these reasons, you need to import the `css/leptos-captcha.css` in your application in what ever way fits your needs,

or simply copy & paste it into your current `main.scss`.

There is an [example](https://github.com/sebadob/leptos-captcha/tree/main/examples/axum-example) based on the official

`start-axum` template. Just take a look at it, and it should (hopefully) be clear, how to use this component.

At this moment, it runs thread local. This means if you have a too high difficulty, it will block the UI.

An improvement with outsourcing it to a web worker will probably come at some point, even though you should not really

need it in production.

![screenshot](https://github.com/sebadob/leptos-captcha/blob/main/leptos-captcha.png)

## Leptos Compatibility

Leptos 0.5: leptos-captcha 0.1  

Leptos 0.6: leptos-captcha 0.2+