Sign-in on your own page

Most apps send people to their environment’s Lobby to sign in. If you’d rather keep them on your own page, <SignIn /> from @usher/react signs them in right there, then finishes with OpenID Connect exactly as before: your server still gets its tokens from Usher, and no password or token passes through your page.

Allow your app’s origin

In Usher Console, open the environment, then Sign-in → Embedded sign-in, and add your app’s origin, such as https://app.example.com. Only listed origins may use the environment’s Frontend API, and only for signing in.

Add the component

import { SignIn } from '@usher/react'

export function SignInPage() {
  return <SignIn frontendApi="https://login.example.com" returnTo="/dashboard" />
}

It sits inside the UsherProvider that @usher/nextjs already uses. frontendApi is your environment’s issuer.

What happens

• Email first, then a password or an emailed code, then the second step if the person has one. Social sign-in and Continue with Usher go to the provider and come back to your app.
• Then OpenID Connect. Signed in at your environment, the component sends the browser to your app’s /auth/sign-in, which goes straight through Usher and back with a code. The first time, Usher asks the person to allow your app.
• Bot protection works as in the Lobby: when Usher asks for a proof of work, the component does it.
• Anything else (passkeys, enterprise sign-in, creating an account) is a link to your Lobby.

Use your own domain in production

The component keeps Usher’s session in your environment’s cookies. In production those must be first-party: give the environment your own domain, on the same site as your app (login.example.com for app.example.com). In development, an environment that allows embedding sends its cookies across sites, which Chrome accepts. Where a browser won’t keep them, the component hands over to your Lobby instead.