Record a Demo of an App Behind a Login
To record a demo of an app behind a login, give the recorder a way in that runs before recording starts, so the video opens on the first real page: a test account for a plain form, a saved browser session for single sign-on or two-factor, or a staging test-login link. Klevo stores each as a secret, encrypted and referenced by name, so the credentials never enter the chat or the saved script. This guide picks the right kind for your login and sets it up.
Which kind of login do you have?
Ask the AI to look:
Use Klevo’s auth tool to inspect https://staging.acme.app/login and tell me how to save a login secret.
Klevo opens the page and reports what it found: a plain form (email and password fields), sign-in buttons for Google or GitHub only, a captcha, or a one-time code. The answer tells you which secret to save.
| Login page | Secret kind | What you need |
|---|---|---|
| Email and password form | Password | A test account without two-factor |
| Google, GitHub or other SSO only | Storage state | A browser session exported once |
| Form plus captcha | Storage state | Same, or the captcha disabled on staging for the test account |
| One-time code by email or app | Storage state | Same |
| Staging has a test-login URL | Magic link | The URL with its token |
How does a password secret work?
The simplest. Create a test account in the app with access to a demo workspace only (why a demo workspace), then save it:
Save a Klevo secret named DEMO_LOGIN, kind password, login URL https://staging.acme.app/login, username demo@acme.test and the password I will paste next.
Or fill the form on the Secrets page in your account, where the password field is write-only. Klevo finds the username and password fields and the submit button on its own; if the form is unusual, the secret can carry selectors for each.
Check it before the first recording:
Check the DEMO_LOGIN secret with Klevo.
Klevo runs the login and reports whether the page after it still looks like a sign-in form, with a screenshot.
How does a storage state secret work?
For SSO, two-factor or a captcha, nothing can be automated, and nothing needs to be: log in once by hand in a browser, export the session, and Klevo reuses it. Playwright’s codegen does the export:
npx playwright codegen --save-storage=state.json https://staging.acme.app
A browser opens; log in as the test account (through Google, with the code, past the captcha), close the window, and state.json holds the cookies. Save it on the Secrets page as a storage state secret named, say, DEMO_SESSION, or paste it into the chat for the auth tool. Recording then starts already signed in.
Sessions expire. When a recording fails with auth_failed and the screenshot shows the login page, export again and save the secret under the same name; every script that references it works again.
How does a magic link secret work?
If staging has a test-login endpoint (/test-login?token=...) that signs in by itself, save that URL as a magic link secret. Klevo opens it before every recording, then goes to the demo’s start URL. This is the most durable option because nothing expires but the token you control.
How do you record with the secret?
Name it in the prompt and the login happens before the first frame:
Record a demo with Klevo of creating a project on https://staging.acme.app/projects, logged in with DEMO_LOGIN: click New project, name it Q4 launch, save it. Desktop, 16:9, browser frame.
The saved script references DEMO_LOGIN by name. If you later delete the secret, renders of that script fail with a clear message until a secret with that name exists again.
What if the demo has to type a password?
Some flows require typing a password after the login, such as confirming a dangerous action. Reference the secret in the step instead of the text (“type the DEMO_LOGIN password into the Confirm field”) and Klevo types it with the field blurred, so the value is neither in the video nor in the script. Password fields and fields that look like tokens, keys or card numbers are blurred automatically either way.
What are the limits?
- Free accounts keep three secrets; Pro keeps twenty. Pricing.
- Secrets are per account, not per script, so one DEMO_LOGIN serves every demo of that app.
- The app must be reachable at a public URL; the login runs in a browser on Klevo’s servers.
- The usage log records that the auth tool was called, never what was sent.
FAQ
Is the login ever in the video? No. Recording starts after the login completes.
Can I use my own account? You can, but a test account with access to a demo workspace is safer; the customer-data guide explains why.
What about apps that log in on a different domain? A storage state covers every origin it was exported from. Export after the full sign-in round trip has completed.
Where do I see my secrets? Under Secrets in your account: name, kind, host and last use. The values are never shown again.