React SDK
@qeetid/react — client components and hooks for the hosted-login flow: SignedIn/SignedOut, useUser, useAuth, and sign-in/out buttons.
@qeetid/react provides client components and hooks for the hosted-login flow:
<SignedIn>, <SignedOut>, useUser(), useAuth(), and sign-in/out buttons. It's
framework-agnostic React; with Next.js, pair it with
@qeetid/nextjs to compute the initial state on the server.
pnpm add @qeetid/reactProvider
The provider takes server-computed initialState, so the UI is correct on first
paint and the HttpOnly session cookie is never read in the browser.
import { auth, currentUser } from "@qeetid/nextjs";
import { QeetidProvider } from "@qeetid/react";
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const { isAuthenticated, userId, tenantId, sessionId } = await auth();
const user = isAuthenticated ? await currentUser() : null;
return (
<html>
<body>
<QeetidProvider initialState={{ isAuthenticated, userId, tenantId, sessionId, user }}>
{children}
</QeetidProvider>
</body>
</html>
);
}Components & hooks
"use client";
import { SignedIn, SignedOut, SignInButton, SignOutButton, useUser } from "@qeetid/react";
export function Header() {
const { user } = useUser();
return (
<header>
<SignedOut>
<SignInButton>Log in</SignInButton>
</SignedOut>
<SignedIn>
<span>{user?.email}</span>
<SignOutButton />
</SignedIn>
</header>
);
}| Export | Description |
|---|---|
<QeetidProvider initialState loginUrl? logoutUrl?> | Supplies auth context. |
<SignedIn> / <SignedOut> | Conditionally render by auth state. |
<SignInButton> / <SignOutButton> | Redirect to the hosted login / logout. |
useUser() | { isLoaded, isAuthenticated, user }. |
useAuth() | { isLoaded, isAuthenticated, userId, tenantId, sessionId }. |
The buttons redirect to the @qeetid/nextjs auth
routes (/api/auth/login, /api/auth/logout), which run the
hosted-login OAuth flow. Prebuilt full-page sign-in components are on the roadmap; the
hosted login covers the UI today.