2.7 KiB
<RegisterPage> — routing-aware sign-up page
(no submodules)
Purpose
<RegisterPage> is the routing-aware adapter that wraps the Wave 2 <RegisterForm> with the navigation and auth-context wiring needed for a sign-up route. It applies a guest-only auth guard, strips confirmPassword from the form payload before invoking useAuth().signUp, and navigates to /dashboard on success.
Use this component as the Route element for the /auth/register path. If a downstream application needs a richer flow (multi-step wizard, marketing copy, A/B testing) it can compose <RegisterForm> directly instead.
Features
useAuthGuard({ requireGuest: true })— already-authenticated visitors are redirected to/.- Strips the client-side-only
confirmPasswordfield before callingsignUp. TheRegisterDatapayload that reaches the auth client matches the server contract. signUprejections are swallowed; errors surface viauseAuth().errorinto the form's alert.- Navigates to
/dashboardon success.
Usage: Basic
import { Route, Routes } from "react-router-dom";
import { RegisterPage } from "@suaveplan/react-auth";
export function AuthRoutes() {
return (
<Routes>
<Route path="/auth/register" element={<RegisterPage />} />
</Routes>
);
}
Usage: Advanced
Combine with a custom landing redirect after sign-up. Because <RegisterPage> always navigates to /dashboard, an app that wants a different post-sign-up route can intercept via a useAuth().onAuthStateChange callback registered on the <AuthProvider>:
import { useNavigate } from "react-router-dom";
import { AuthProvider } from "@suaveplan/react-auth";
function App() {
const navigate = useNavigate();
return (
<AuthProvider
config={{ baseURL: "/auth" }}
onAuthStateChange={(state) => {
if (state.isAuthenticated && state.user?.emailVerified === false) {
navigate("/auth/verify-email");
}
}}
>
<RegisterPage />
</AuthProvider>
);
}
API Reference
<RegisterPage> accepts no props. It reads context via useAuth() and navigates via useNavigate().
Implementation Notes
- The page never inspects the underlying form's Zod schema; it relies on the form to deliver a validated
RegisterFormDatapayload. - The destructured
confirmPassworddiscard uses avoidstatement to keep Biome'snoUnusedVariablesrule satisfied without resorting to// biome-ignore. - The
signUpaction wraps better-auth; failure modes (USER_EXISTS,WEAK_PASSWORD, network) propagate via the contexterrorfield.