Component reference

Authdog's frontend SDKs ship prebuilt, themeable UI components so you can put authentication surfaces inside your own layout. They're the middle ground between the Account Portal and fully custom flows.

Available components

The React component library (@authdog/react-elements) provides a small set of drop-in components that cover the common signed-in surfaces of an app:

• UserProfile: the signed-in user's profile, emails, and connected accounts.
• UserDropdown: the user's avatar menu with manage-account and sign-out actions.
• Navbar: an app navbar with built-in auth-aware user slots.
• TOTPValidator: the MFA code-entry step for TOTP challenges.

Each component talks to the same environment as your session, so it always reflects the connections and policies configured for that environment. Sign-in and sign-up themselves are driven by the SDK's redirect primitives (signIn, signUp) into the hosted flow.

Which SDKs provide them

Components ship in the React component library (@authdog/react-elements) and pair with 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

Components mount like any other React element. In a Next.js app, wrap your tree in the framework SDK's AuthdogProvider (which consumes the sign-in callback) and feed components the user from the useUser hook; the environment's public key is read from NEXT_PUBLIC_PK_AUTHDOG:

import { AuthdogProvider, useUser } from "@authdog/nextjs-app";
import { UserProfile } from "@authdog/react-elements";

function Account() {
  const { user } = useUser();
  return user ? <UserProfile user={user} /> : null;
}

export default function App() {
  return (
    <AuthdogProvider>
      <Account />
    </AuthdogProvider>
  );
}

Once the user signs in, the SDK establishes the 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.