Popup Login

When popup login is the better experience

Popup login works well when you want people to stay on the page they were using instead of being redirected away.

That is often useful for:

• dashboards with unsaved work
• embedded tools
• admin consoles
• flows where people need to compare information before signing in

Start popup login from a button

The most reliable way to open a popup is from a direct user action.

<button onClick={() => auth.login({ method: "popup" })}>
  Log in with popup
</button>

Make popup your default choice

If popup login is the main experience you want, set it once in your auth configuration.

const auth = createAuth({
  clientId: "my-client-id",
  authorizationEndpoint: "https://auth.example.com/authorize",
  tokenEndpoint: "https://auth.example.com/token",
  redirectUri: window.location.origin,
  loginMethod: "popup",
});

Plan for blocked popups

Some browsers or browser settings will block popups.

For the smoothest experience:

• keep autoLogin off
• show a clear login button
• make sure a redirect-based login still feels acceptable as a fallback

Before you ship

• Confirm your redirectUri is registered with your provider.
• Make sure that URL loads your app after sign-in.
• Test the flow in the browsers your customers actually use.

When popup login works well, it feels faster and less disruptive because people never lose the context of the page they started from.