April 9, 2026 · How-to

How to add a login to an AI-generated HTML app

Your AI-built app works, but it's open to anyone with the link. Here's how to add a real sign-in (magic link, Google, or Microsoft) without writing auth code or running a server.

You built an app with Claude or ChatGPT, you’ve got it online, and now you need it to be yours, or your team’s, or your family’s, not open to anyone who stumbles on the URL. You need a login. Here’s how to add one to a single-page HTML app without becoming an authentication engineer.

The quick answer

You don’t write the auth yourself. Host the app on Backlit and every private app gets a managed sign-in (magic link, Google, or Microsoft) gated by an allowlist of the emails or domain you choose. Your app reads the signed-in person with one line: window.backlit.auth.user(). No server, no passwords to store, no tokens to manage.

Authentication is one of those things that sounds simple and isn’t. Done properly it means handling sign-in flows, verifying identities, storing sessions securely, protecting against a long list of attacks, and never, ever mishandling passwords. An assistant can write you the front of a login form in seconds, but the hard part lives on a server you don’t have. So AI-built apps almost always ship wide open: anyone with the link is “in.”

For a public toy that’s fine. For anything with real content (a household budget, a team roster, customer submissions), it’s a problem you have to solve before you share.

The options, honestly

Roll your own. Don’t. Real auth is a security domain, not a weekend feature. Getting it subtly wrong is worse than having none, and the login is exactly where apps built with AI keep getting hacked (how to keep an app you built with AI from getting hacked).
Bolt on an auth provider. Services exist that handle identity for you. They’re solid, but they assume you have a backend to integrate with and some comfort wiring up SDKs, callbacks, and session handling. That’s a real setup for a developer and a wall for everyone else.
Let your host handle it. The simplest path for a single-page app is to put it somewhere that treats sign-in as part of hosting, so you don’t integrate anything. You just turn it on.

That last option is what Backlit is built for.

Backlit’s auth layer is called Lens, and it’s on by default for private apps. You don’t configure a provider or write a flow:

Sign-in methods: magic link (a one-tap email link), Google, and Microsoft. No passwords for you to store.
The allowlist: you decide who’s allowed, whether specific email addresses or a whole domain like @yourteam.com on a paid plan. Everyone else is turned away at the door.
Private by default: a new app isn’t public. It requires sign-in unless you deliberately flip it to public.

Inside your app, reading the current user is a single call:

const user = window.backlit.auth.user();
// → { email: "sam@yourteam.com" }  or  null if not signed in

That’s the whole API surface you touch. Backlit handles the redirect, the verification, and the session; your HTML just asks “who’s here?” and gets an answer.

Adding it to an app you already built

If your app is already running on Backlit, it’s already private and already has sign-in. That’s the default. To make use of who’s logged in:

Ask your assistant to “gate this on Backlit sign-in and show the user’s email.” It’ll wire window.backlit.auth.user() into the app.
Set the allowlist to the people who should have access (your email is there automatically; add others or a domain on a paid plan).
Share the link. People click it, sign in with a magic link or Google/Microsoft, and if they’re on the list, they’re in.

If you haven’t deployed yet, connect Backlit to Claude or ChatGPT and ask it to publish. The login comes attached, so you don’t bolt it on afterward.

A note on data and privacy

A login is only half of “private.” The other half is making sure people can’t see each other’s data. Backlit pairs sign-in with per-user storage: each signed-in person gets their own isolated data silo, keyed to their verified email, so one user’s entries are never visible to another. You get both halves from the same place.

When you’d want public instead

Sometimes you want anyone to use it, a public booking page, a survey, a calculator. On a paid plan you can flip a glow to public; Backlit mints an anonymous session on first visit so the app still works, just without a sign-in gate. Per-user data turns off in that mode by design, because there’s no verified user to key it to.

Sign-in shouldn’t be the reason a good little app stays trapped on your machine. Host it where the login is part of the deal. See pricing → or read the FAQ →.

Built an app with Claude or ChatGPT? Get early access to Backlit and share it in seconds.