Multiple Providers

When this guide helps

Use multiple auth setups when one app needs to support more than one provider or more than one account context.

Common examples include:

• work and personal accounts
• customer-specific identity providers
• separate admin and end-user login paths

Give each setup a clear identity

Create one auth instance per provider and give each one its own storageKeyPrefix.

export const workAuth = createAuth({
  clientId: "work-client-id",
  authorizationEndpoint: "https://work.example.com/authorize",
  tokenEndpoint: "https://work.example.com/token",
  redirectUri: window.location.origin,
  storageKeyPrefix: "work_",
});

export const personalAuth = createAuth({
  clientId: "personal-client-id",
  authorizationEndpoint: "https://personal.example.com/authorize",
  tokenEndpoint: "https://personal.example.com/token",
  redirectUri: window.location.origin,
  storageKeyPrefix: "personal_",
});

That one choice prevents sessions from stepping on each other.

Keep the UI obvious

If people can sign in to more than one provider, label the choices clearly so they always know which account they are using.

function App() {
  const work = useAuth(workAuth);
  const personal = useAuth(personalAuth);

  return (
    <div>
      <p>Work account: {work.status}</p>
      <p>Personal account: {personal.status}</p>
    </div>
  );
}

Rules that prevent confusion

• Use a different storageKeyPrefix for every auth setup.
• Use separate labels in the UI so people know which login they are choosing.
• Give each provider its own redirectUri when required.
• Avoid triggering multiple login flows from one unclear action.

When multiple-provider login works well, people always know where they are, which account they are using, and how to switch.