-
Notifications
You must be signed in to change notification settings - Fork 27.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'canary' into fix-polyfill-script-loading
- Loading branch information
Showing
42 changed files
with
580 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Public Environment variables that can be used in the browser. | ||
NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY= | ||
|
||
# Secret environment variables only available to Node.js | ||
CLOUDFLARE_TURNSTILE_SECRET_KEY= |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
.pnpm-debug.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
# Example with Cloudflare Turnstile | ||
|
||
[Turnstile](https://developers.cloudflare.com/turnstile/) is Cloudflare’s smart CAPTCHA alternative. It can be embedded into any website without sending traffic through Cloudflare and works without showing visitors a CAPTCHA. | ||
|
||
This example shows how you can use **Cloudflare Turnstile** with your Next.js project. You can see a [live version here](https://with-cloudflare-turnstile.vercel.app/). | ||
|
||
## Deploy your own | ||
|
||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example). | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cloudflare-turnstile&project-name=cloudflare-turnstile&repository-name=cloudflare-turnstile) | ||
|
||
**Important**: When you import your project on Vercel, make sure to click on **Environment Variable**s and set them to match your .env.local file. | ||
|
||
## How to use | ||
|
||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: | ||
|
||
```bash | ||
npx create-next-app --example cloudflare-turnstile cloudflare-turnstile-app | ||
``` | ||
|
||
```bash | ||
yarn create next-app --example cloudflare-turnstile cloudflare-turnstile-app | ||
``` | ||
|
||
```bash | ||
pnpm create next-app --example cloudflare-turnstile cloudflare-turnstile-app | ||
``` | ||
|
||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
||
## Configuring Cloudflare Turnstile | ||
|
||
### Get a sitekey and secret key | ||
|
||
1. Go to the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/turnstile) and select your account. | ||
2. Go to Turnstile. | ||
3. Select Add a site and fill out the form. | ||
4. Copy your **Site Key** and **Secret Key**. | ||
|
||
### Set up environment variables | ||
|
||
To connect the app with Cloudflare Turnstile, you'll need to add the settings from your Cloudflare dashboard as environment variables | ||
|
||
Copy the .env.local.example file in this directory to .env.local. | ||
|
||
```bash | ||
cp .env.local.example .env.local | ||
``` | ||
|
||
Then, open .env.local and fill these environment variables: | ||
|
||
- `NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY` | ||
- `CLOUDFLARE_TURNSTILE_SECRET_KEY` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
html, | ||
body { | ||
display: grid; | ||
place-content: center; | ||
margin: 0; | ||
height: 100%; | ||
} | ||
|
||
main { | ||
height: 50vh; | ||
width: 300px; | ||
text-align: center; | ||
} | ||
|
||
button[type='submit'] { | ||
cursor: pointer; | ||
width: 100%; | ||
outline: none; | ||
border: none; | ||
padding: 0.5rem 1rem; | ||
margin-top: 1rem; | ||
border-radius: 0.25rem; | ||
background: #0d6efd; | ||
font-size: 1.25rem; | ||
color: #ffffff; | ||
} | ||
|
||
.checkbox { | ||
min-height: 70px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
module.exports = { | ||
async rewrites() { | ||
return [ | ||
{ | ||
source: '/', | ||
destination: '/implicit', | ||
}, | ||
] | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"dev": "next", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"next": "latest", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "^18.0.0", | ||
"@types/react": "^18.0.14", | ||
"@types/react-dom": "^18.0.5", | ||
"typescript": "^4.7.4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import type { AppProps } from 'next/app' | ||
import '../app.css' | ||
|
||
export default function App({ Component, pageProps }: AppProps) { | ||
return <Component {...pageProps} /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import type { NextApiRequest, NextApiResponse } from 'next' | ||
|
||
export default async function Handler( | ||
req: NextApiRequest, | ||
res: NextApiResponse | ||
) { | ||
const form = new URLSearchParams() | ||
form.append('secret', process.env.CLOUDFLARE_TURNSTILE_SECRET_KEY) | ||
form.append('response', req.body['cf-turnstile-response']) | ||
form.append('remoteip', req.headers['x-forwarded-for'] as string) | ||
|
||
const result = await fetch( | ||
'https://challenges.cloudflare.com/turnstile/v0/siteverify', | ||
{ method: 'POST', body: form } | ||
) | ||
const json = await result.json() | ||
res.status(result.status).json(json) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import Script from 'next/script' | ||
|
||
type RenderParameters = { | ||
sitekey: string | ||
theme?: 'light' | 'dark' | ||
callback?(token: string): void | ||
} | ||
|
||
declare global { | ||
interface Window { | ||
onloadTurnstileCallback(): void | ||
turnstile: { | ||
render(container: string | HTMLElement, params: RenderParameters): void | ||
} | ||
} | ||
} | ||
|
||
export default function ExplicitRender() { | ||
return ( | ||
<main> | ||
<Script id="cf-turnstile-callback"> | ||
{`window.onloadTurnstileCallback = function () { | ||
window.turnstile.render('#my-widget', { | ||
sitekey: '${process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY}', | ||
}) | ||
}`} | ||
</Script> | ||
<Script | ||
src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" | ||
async={true} | ||
defer={true} | ||
/> | ||
<form method="POST" action="/api/handler"> | ||
<h2>Dummy Login Demo</h2> | ||
<div id="my-widget" className="checkbox" /> | ||
<button type="submit">Sign in</button> | ||
<p> | ||
Go to the <a href="/implicit">implicit render demo</a> | ||
</p> | ||
</form> | ||
</main> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import Script from 'next/script' | ||
|
||
export default function ImplicitRender() { | ||
return ( | ||
<main> | ||
<Script | ||
src="https://challenges.cloudflare.com/turnstile/v0/api.js" | ||
async={true} | ||
defer={true} | ||
/> | ||
<form method="POST" action="/api/handler"> | ||
<h2>Dummy Login Demo</h2> | ||
<div | ||
className="cf-turnstile checkbox" | ||
data-sitekey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY} | ||
/> | ||
<button type="submit">Sign in</button> | ||
<p> | ||
Go to the <a href="/explicit">explicit render demo</a> | ||
</p> | ||
</form> | ||
</main> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "es5", | ||
"lib": ["dom", "dom.iterable", "esnext"], | ||
"allowJs": true, | ||
"skipLibCheck": true, | ||
"strict": false, | ||
"forceConsistentCasingInFileNames": true, | ||
"noEmit": true, | ||
"esModuleInterop": true, | ||
"module": "esnext", | ||
"moduleResolution": "node", | ||
"resolveJsonModule": true, | ||
"isolatedModules": true, | ||
"jsx": "preserve", | ||
"incremental": true | ||
}, | ||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], | ||
"exclude": ["node_modules"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,5 +16,5 @@ | |
"registry": "https://registry.npmjs.org/" | ||
} | ||
}, | ||
"version": "12.3.2-canary.25" | ||
"version": "12.3.2-canary.26" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.