chore(examples): Encourage use of environment variables for keys (#139)

arcjet-next/README.md

@@ -38,7 +38,10 @@ import arcjet from "@arcjet/next";
 import { NextApiRequest, NextApiResponse } from "next";
 
 const aj = arcjet({
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY,
   rules: [],
 });
 

arcjet/README.md

@@ -43,7 +43,10 @@ import arcjet, { createRemoteClient, defaultBaseUrl } from "arcjet";
 import { createConnectTransport } from "@connectrpc/connect-node";
 
 const aj = arcjet({
-  key: "ajkey_mykey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://www.npmjs.com/package/dotenv
+  key: process.env.AJ_KEY,
   rules: [],
   client: createRemoteClient({
     transport: createConnectTransport({

examples/nextjs-13-pages-wrap/README.md

@@ -25,11 +25,17 @@ Route](https://nextjs.org/docs/pages/building-your-application/routing/api-route
    npm ci
    ```
 
-3. Start the dev server.
+3. Add your Arcjet key to `.env.local`
+
+   ```env
+   AJ_KEY=
+   ```
+
+4. Start the dev server.
 
    ```bash
    npm run dev
    ```
 
-4. Visit `http://localhost:3000/api/arcjet`.
-5. Refresh the page to trigger the rate limit.
+5. Visit `http://localhost:3000/api/arcjet`.
+6. Refresh the page to trigger the rate limit.

examples/nextjs-13-pages-wrap/pages/api/arcjet-edge.ts

@@ -7,8 +7,10 @@ export const config = {
 };
 
 const aj = arcjet({
-  // mark
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     rateLimit({
       mode: "LIVE",
@@ -25,4 +27,4 @@ export default withArcjet(aj, async function handler(req: NextRequest) {
   return NextResponse.json({
     message: "Hello world",
   });
-});
+});

examples/nextjs-13-pages-wrap/pages/api/arcjet.ts

@@ -3,8 +3,10 @@ import arcjet, { rateLimit, withArcjet } from "@arcjet/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 const aj = arcjet({
-  // mark
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     rateLimit({
       mode: "LIVE",
@@ -22,4 +24,4 @@ export default withArcjet(
   async function handler(req: NextApiRequest, res: NextApiResponse) {
     res.status(200).json({ name: "Hello world" });
   },
-);
+);

examples/nextjs-14-app-dir-rl/README.md

@@ -25,11 +25,17 @@ handler](https://nextjs.org/docs/app/building-your-application/routing/route-han
    npm ci
    ```
 
-3. Start the dev server.
+3. Add your Arcjet key to `.env.local`
+
+   ```env
+   AJ_KEY=
+   ```
+
+4. Start the dev server.
 
    ```bash
    npm run dev
    ```
 
-4. Visit `http://localhost:3000/api/arcjet`.
-5. Refresh the page to trigger the rate limit.
+5. Visit `http://localhost:3000/api/arcjet`.
+6. Refresh the page to trigger the rate limit.

examples/nextjs-14-app-dir-rl/app/api/arcjet/route.ts

@@ -2,7 +2,10 @@ import arcjet, { rateLimit } from "@arcjet/next";
 import { NextResponse } from "next/server";
 
 const aj = arcjet({
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     rateLimit({
       mode: "LIVE",
@@ -30,4 +33,4 @@ export async function GET(req: Request) {
   }
 
   return NextResponse.json({ message: "Hello World" });
-}
+}

examples/nextjs-14-app-dir-rl/app/api/custom_timeout/route.ts

@@ -11,7 +11,10 @@ const client = createNextRemoteClient({
 });
 
 const aj = arcjet({
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     validateEmail({
       mode: "LIVE",
@@ -37,4 +40,4 @@ export async function GET(req: Request) {
   }
 
   return NextResponse.json({ message: "Hello World" });
-}
+}

examples/nextjs-14-app-dir-rl/middleware.ts

@@ -6,8 +6,11 @@ export const config = {
 };
 
 const aj = arcjet({
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [],
 });
 
-export default createMiddleware(aj);
+export default createMiddleware(aj);

examples/nextjs-14-app-dir-validate-email/README.md

@@ -25,12 +25,18 @@ handler](https://nextjs.org/docs/app/building-your-application/routing/route-han
    npm ci
    ```
 
-3. Start the dev server.
+3. Add your Arcjet key to `.env.local`
+
+   ```env
+   AJ_KEY=
+   ```
+
+4. Start the dev server.
 
    ```bash
    npm run dev
    ```
 
-4. Visit `http://localhost:3000/api/arcjet`.
-5. Refresh the page to see the email verification fail due to no MX records
+5. Visit `http://localhost:3000/api/arcjet`.
+6. Refresh the page to see the email verification fail due to no MX records
    existing on the domain.

examples/nextjs-14-app-dir-validate-email/app/api/arcjet/route.ts

@@ -2,7 +2,10 @@ import arcjet, { validateEmail } from "@arcjet/next";
 import { NextResponse } from "next/server";
 
 const aj = arcjet({
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     validateEmail({
       mode: "LIVE",
@@ -30,4 +33,4 @@ export async function GET(req: Request) {
   return NextResponse.json({
     message: "Hello world",
   });
-}
+}

examples/nextjs-14-openai/README.md

@@ -25,9 +25,10 @@ uses the OpenAI chat API.
    npm ci
    ```
 
-3. Add your OpenAI key to `.env.local`
+3. Add your Arcjet & OpenAI keys to `.env.local`
 
    ```env
+   AJ_KEY=
    OPENAI_API_KEY=
    ```
 

examples/nextjs-14-openai/app/api/chat/route.ts

@@ -6,7 +6,10 @@ import { promptTokensEstimate } from "openai-chat-tokens";
 
 // Arcjet rate limit rule
 const aj = arcjet({
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     rateLimit({
       mode: "LIVE",
@@ -68,4 +71,4 @@ export async function POST(req: Request) {
   const stream = OpenAIStream(response);
   // Respond with the stream
   return new StreamingTextResponse(stream);
-}
+}

examples/nextjs-14-pages-wrap/README.md

@@ -25,11 +25,17 @@ Route](https://nextjs.org/docs/pages/building-your-application/routing/api-route
    npm ci
    ```
 
-3. Start the dev server.
+3. Add your Arcjet key to `.env.local`
+
+   ```env
+   AJ_KEY=
+   ```
+
+4. Start the dev server.
 
    ```bash
    npm run dev
    ```
 
-4. Visit `http://localhost:3000/api/arcjet`.
-5. Refresh the page to trigger the rate limit.
+5. Visit `http://localhost:3000/api/arcjet`.
+6. Refresh the page to trigger the rate limit.

examples/nextjs-14-pages-wrap/pages/api/arcjet-edge.ts

@@ -7,8 +7,10 @@ export const config = {
 };
 
 const aj = arcjet({
-  // mark
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     rateLimit({
       mode: "LIVE",
@@ -25,4 +27,4 @@ export default withArcjet(aj, async function handler(req: NextRequest) {
   return NextResponse.json({
     message: "Hello world",
   });
-});
+});

examples/nextjs-14-pages-wrap/pages/api/arcjet.ts

@@ -3,8 +3,10 @@ import arcjet, { rateLimit, withArcjet } from "@arcjet/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 const aj = arcjet({
-  // mark
-  key: "ajkey_yourkey",
+  // Get your site key from https://app.arcjet.com
+  // and set it as an environment variable rather than hard coding.
+  // See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+  key: process.env.AJ_KEY!,
   rules: [
     rateLimit({
       mode: "LIVE",
@@ -22,4 +24,4 @@ export default withArcjet(
   async function handler(req: NextApiRequest, res: NextApiResponse) {
     res.status(200).json({ name: "Hello world" });
   },
-);
+);