https://github.com/nossbigg/react-csr-ssr-recaptcha-example
Barebones example of using React (CSR/SSR) with Google reCATPCHA v3
https://github.com/nossbigg/react-csr-ssr-recaptcha-example
client-side-rendering expressjs nextjs react recaptcha-v3 server-side-rendering
Last synced: 23 days ago
JSON representation
Barebones example of using React (CSR/SSR) with Google reCATPCHA v3
- Host: GitHub
- URL: https://github.com/nossbigg/react-csr-ssr-recaptcha-example
- Owner: nossbigg
- Created: 2020-07-28T10:16:57.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T06:29:51.000Z (over 2 years ago)
- Last Synced: 2025-02-13T11:45:25.187Z (3 months ago)
- Topics: client-side-rendering, expressjs, nextjs, react, recaptcha-v3, server-side-rendering
- Language: TypeScript
- Homepage:
- Size: 2.51 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-csr-ssr-recaptcha-example
This repository is a barebones example of how to use Google reCAPTCHA v3 together with React (Client-side Rendering and Server-side Rendering)
## Running Example Locally
**Prerequisites**
Requires Google reCAPTCHA v3 API key pair:
1. Request an API key pair [here](https://www.google.com/recaptcha/admin/create)
1. In _Domains_ options, add `localhost` and `127.0.0.1` (to allow calls from local machine)
**Environment Variables**
This example repository requires the following environment variables to work correctly:
1. `RECAPTCHA_SITE_KEY` - Used to call reCAPTCHA API from Client-side
1. `RECAPTCHA_SECRET_KEY` - Used to call reCAPTCHA API from Server-side (must not be exposed to public!)
**Commands to run locally**
| Command | What it does | Default port |
| --------------------------------------------------------------------- | --------------------------------------------- | ------------ |
| `RECAPTCHA_SECRET_KEY= yarn start:backend` | Starts node backend instance | 3005 |
| `RECAPTCHA_SITE_KEY= yarn start:csr` | Starts React Client-side rendering instance | 3001 |
| `RECAPTCHA_SITE_KEY= yarn start:ssr` | Starts Next.js Server-side rendering instance | 3002 |
## References
- [Developer's Guide | reCAPTCHA | Google Developers](https://developers.google.com/recaptcha/intro)
- [Express.js Routing](https://expressjs.com/en/guide/routing.html)
- [Getting Started | Create React App](https://create-react-app.dev/docs/getting-started/)
- [Getting Started | Next.js](https://nextjs.org/docs/getting-started)