Café Project · Part 1 · Episode 03
A quick hello.
A real account.
A sign-in prompt that keeps the journey moving and protects account history. Copy the prompt below and adapt it to your own project.
Your copy-and-paste prompt
Make it yoursThis build uses Clerk. Pick the official quickstart for your own frontend and backend stack.
Add Clerk authentication to my existing café campaign app. Inspect the stack first and use the current official Clerk quickstart for that stack. Keep the public working name “Café Project”.
Visitors must be able to read the campaign while signed out. When a signed-out visitor chooses “Back this café”, open a clear sign-in/sign-up flow. Use Clerk’s supported UI, styled to fit the cream, dark-ink and forest-green app. Enable email verification, and show Google only if it is actually configured. Do not promise a fixed completion time.
After sign-in, return the visitor to the contribution screen. Preserve an unfinished amount and note through the sign-in transition where appropriate; signing out must clear account-specific data from the screen. Include loading, cancelled and failed sign-in states, plus a visible sign-out action.
Protect the backend as well as the interface. Verify Clerk session tokens on every protected request and derive the owner from the verified token, never a browser-supplied user_id. Save contribution history against that owner. If my backend serves more than one application, also enforce an application boundary on records and queries. Never expose server keys in client code.
Use placeholders for the required environment-variable names and tell me where to configure them. Do not paste credentials into source files, URLs, logs or screenshots.
Verify: signed-out visitors can read the campaign; signed-out contribution requests are rejected; sign-in returns to the intended screen; a reload restores the session correctly; sign-out removes private history; a second user cannot read the first user’s contribution by guessing its ID. Do not mark unconfigured sign-in methods as tested.
Official starting point: https://clerk.com/docs
An original prompt from The Other Tab. No account needed.
The useful links
Clerk official documentation
Choose the current quickstart for your stack
Clerk JavaScript quickstart
The JavaScript/Vite setup used in this build
Clerk Express quickstart
Authenticate requests on the Express backend