Secrets stay server-side

A key is a credit card with a worse receipt. If it ships in a frontend bundle, anyone can spend it.

Why this matters

The common “hello world” on the internet pastes the key into a React file “just to see it work.” That file is then committed, or deployed, or copied into a lesson artifact. Bots harvest xai- and sk- strings from GitHub in minutes.

This course will not take your key. Do not give it to us. Do not give it to Grok in a chat “so you remember.” Rotate if you already did.

Teach

Allowed

• User or system environment variable: XAI_API_KEY
• A .env file that is in .gitignore
• A secrets manager at work, later

Forbidden

• NEXT_PUBLIC_* or any variable that ships to the browser
• The Grok Mastery exercise box
• Slack, email, a screenshot of the console
• config.toml committed to a public repo
• The TUI prompt as if the key were a chat message

If a key leaks: revoke it on console.x.ai, create a new one, update the environment, assume the old one was used.

This LMS never needs your API key. Exercises are “open Grok / open a terminal.” We do not proxy the xAI API for you. That is a cost and a leak surface we will not take.

Worked example

A shop tool in Next.js calls Grok from a server route (app/api/…). The browser sends the customer question only. The server reads process.env.XAI_API_KEY and calls https://api.x.ai/v1/responses. The key never appears in Network tab as a client header.

The failure: a fetch('https://api.x.ai/v1/responses', { headers: { Authorization: 'Bearer ' + process.env.NEXT_PUBLIC_XAI_API_KEY }}) in a client component. That is a public charge account.

Your turn

Audit my API setup.

I will list:
1. Where the key lives right now (environment / .env / nowhere yet)
2. What is in .gitignore if I have a repo
3. Whether any frontend file could see the key
4. What I will do if I already pasted the key into a chat or this site (rotate)
5. A five-line Never-Store card for API work

Then write the card back with the stamp: “This card was written by Grok in this thread. No key is in this paste.”

Artifact to paste

The five-line card + stamp. No key material.

Rubric

• Pass: Environment named. Browser called out as forbidden. Rotate path if they leaked. No key in the paste.
• Fail: Key visible. “It’s fine in the frontend for a demo.”

Common failure

“I’ll put the key in the LMS so you can grade me.” We will fail you and you will still pay the bill.

What’s next

One useful job through the pipe — the same job you would have done in Applied, now from a script.

Audit my API setup.

I will list:
1. Where the key lives right now (environment / .env / nowhere yet)
2. What is in .gitignore if I have a repo
3. Whether any frontend file could see the key
4. What I will do if I already pasted the key into a chat or this site (rotate)
5. A five-line Never-Store card for API work

Then write the card back with the stamp: “This card was written by Grok in this thread. No key is in this paste.”