React components

@meetploy/auth-react gives React apps ready-made auth UI and hooks. It works with Next.js, Vite, TanStack Start, and any other React setup deployed on Ploy.

pnpm add @meetploy/auth-react

Set up the provider

Wrap your app in AuthProvider. It loads the current user and the project's enabled sign-in methods.

import { AuthProvider } from "@meetploy/auth-react";

export function App({ children }: { children: React.ReactNode }) {
	return <AuthProvider>{children}</AuthProvider>;
}

In Next.js, put it in app/layout.tsx. The components are client components, so they work inside Server Component layouts.

Components

All of them follow your project's sign-in methods, so turning a method on in the dashboard shows it everywhere without a redeploy.

A typical header

import { SignedIn, SignedOut, UserButton } from "@meetploy/auth-react";

export function Header() {
	return (
		<header>
			<SignedOut>
				<a href="/login">Sign in</a>
			</SignedOut>
			<SignedIn>
				<UserButton userProfileUrl="/account" afterSignOutUrl="/" />
			</SignedIn>
		</header>
	);
}

Sign-in and sign-up pages

"use client";

import { SignInForm } from "@meetploy/auth-react";

export default function LoginPage() {
	return (
		<SignInForm
			redirectTo="/dashboard"
			onSignUpClick={() => location.assign("/signup")}
		/>
	);
}

SignUpForm takes the same props plus fields, a list of extra metadata fields such as ["name", "company"].

Account page

"use client";

import { UserProfile } from "@meetploy/auth-react";

export default function AccountPage() {
	return <UserProfile afterSignOutUrl="/" />;
}

Users can connect another provider (when it is enabled), disconnect one, add and remove passkeys, and sign out. Ploy refuses to remove the last way a user can sign in.

Theming

Every component follows the system color scheme by default, and switches to dark mode inside a .dark class (Tailwind's convention). Force a mode with theme="light" or theme="dark".

Change colors, corner radius, and font with appearance, on one component or on AuthProvider for all of them:

<AuthProvider
	appearance={{
		variables: {
			colorPrimary: "#4f46e5",
			colorPrimaryHover: "#4338ca",
			borderRadius: "12px",
			fontFamily: "Inter, sans-serif",
		},
		hideBranding: true,
	}}
>

appearance values apply in both light and dark mode. For different values per mode, set the custom properties in your own CSS instead:

.ploy-auth-root {
	--ploy-auth-primary: #4f46e5;
}
.dark .ploy-auth-root {
	--ploy-auth-primary: #818cf8;
}

Hooks

useAuth() exposes the state and every action, for building your own UI: