Hosted sign-in pages

Ready sign-in, sign-up, sign-in link, password reset and two-step pages at your project's address, so your app needs no auth screens of its own.

The hosted sign-in page gives your app finished auth screens at https://<ref>.p.stitchdb.com/login: sign in with a password, sign up, a sign-in link or code by e-mail, password reset, two-step verification and your OAuth providers. You send users there, they sign in, and they come back to your app with a session. It follows your Auth settings, so a provider you turn on shows up on the page, and you choose its name, logo, colour, theme and language.

#Turn it on

1. Open Studio › Authentication › Hosted sign-in and click Turn on. The page is live within a minute.
2. Set your app’s name, logo, button colour, theme (light, dark or following the device) and language (seven languages, or the browser’s language).
3. Pick the methods: e-mail and password, sign-in link and code, whether new users may sign up, and which of your providers to show.
4. Check your Site URL and Redirect URLs: users only ever come back to one of them.

Turning the page on adds https://<ref>.p.stitchdb.com/login/** to your Redirect URLs, so password-reset and sign-in links from e-mails can come back to the page. Auth restarts once for that, which takes a few seconds.

#Send users there

With the SDK the user comes back with a one-time code that the SDK exchanges for a session (PKCE), so no tokens appear in the address bar or in your logs. Without the SDK a plain link works too, and the session comes back in the URL fragment.

import { createClient } from 'stitchdb-js'
const stitchdb = createClient(STITCHDB_URL, STITCHDB_ANON_KEY, { auth: { flowType: 'pkce' } })

// on your sign-in button
await stitchdb.auth.signInWithHostedPage({ redirectTo: 'https://yourapp.com/auth/callback' })

// on /auth/callback the client exchanges ?code= for a session by itself;
// or do it yourself:
const code = new URL(location.href).searchParams.get('code')
await stitchdb.auth.exchangeCodeForSession(code)

<a href="https://<ref>.p.stitchdb.com/login?redirect_to=https%3A%2F%2Fyourapp.com%2F">Sign in</a>
<!-- comes back to https://yourapp.com/#access_token=…&refresh_token=…&type=signin -->

#Options

#What the page handles

• Sign in and sign up with e-mail and password. New users get your confirmation e-mail when Confirm e-mail is on; the page tells them to check their inbox and accepts the code from the e-mail too.
• Sign-in links and codes: the user enters their e-mail and either clicks the link or types the six-digit code.
• Password reset: the reset link opens the page, the user picks a new password and comes back signed in.
• Two-step verification: users with an authenticator app set up are asked for the code before they come back (see Multi-factor authentication).
• OAuth providers you turned on in Sign-in methods, such as Google, GitHub or Apple.
• CAPTCHA: when Auth requires hCaptcha or Turnstile, add your public site key on the Hosted sign-in page and the widget shows on every form.

Your terms and privacy policy can be linked under the form. The page shows “Secured by StitchDB” at the bottom; from the Pro plan you can hide it.

#Use it from a mobile app

Open the page in the system browser (an ASWebAuthenticationSession on iOS, a Custom Tab on Android) with skipBrowserRedirect: true and a deep link of your app as redirectTo. Add that deep link, such as com.yourapp://auth-callback, to your Redirect URLs. When the browser comes back, pass the code to exchangeCodeForSession.

#HTTP

#Limits