Component reference

Authdog's frontend SDKs ship prebuilt, themeable UI components so you can put authentication inside your own layout — no redirect to a hosted page. They're the middle ground between the Account portal and fully custom flows.

Available components

The SDKs provide a small set of drop-in components that cover the common surfaces of an app:

• Sign-in — the full sign-in experience (credentials, social, SSO) rendered in place.
• Sign-up — self-service registration.
• User button / profile — the signed-in user's avatar, menu, and account-management screens.
• Organization switcher — lets a member move between the organizations they belong to.

Each component talks to the same environment as your session, so it always reflects the connections and policies configured for that environment.

Which SDKs provide them

Components ship in the React SDK (react-elements) and are re-exported by the framework SDKs — Next.js, Remix, SvelteKit, TanStack Start, Vue/Nuxt, Angular, Astro, Gatsby, RedwoodJS, and React Native/Expo. See the full list in Integrations and the SDK-specific Quickstarts.

Theming

Components inherit the environment's theme (logo, colors, copy) and can be styled further to match your app. Because theming is per environment, the same component looks right in dev, staging, and production without code changes — see Deployments.

Mounting a component

A sign-in component is mounted like any other React element inside a provider that carries your environment's public key. The exact props vary by SDK; this is illustrative:

import { AuthdogProvider, SignIn } from "@authdog/react-elements";

export default function App() {
  return (
    <AuthdogProvider publicKey={process.env.PK_AUTHDOG}>
      <SignIn />
    </AuthdogProvider>
  );
}

Once the user signs in, the component establishes the authdog-session for the environment, just like the hosted portal does.

Portal, components, or custom?

• Use the Account portal when a hosted, redirect-based experience is enough.
• Use components when you want prebuilt UI inside your own app.
• Use custom flows when you need full headless control over the UI and edge cases.