Files
suaveplan/packages/ui/react/react-auth/src/pages/register/register.md
2026-05-27 23:47:53 +01:00

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 confirmPassword field before calling signUp. The RegisterData payload that reaches the auth client matches the server contract.
  • signUp rejections are swallowed; errors surface via useAuth().error into the form's alert.
  • Navigates to /dashboard on 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 RegisterFormData payload.
  • The destructured confirmPassword discard uses a void statement to keep Biome's noUnusedVariables rule satisfied without resorting to // biome-ignore.
  • The signUp action wraps better-auth; failure modes (USER_EXISTS, WEAK_PASSWORD, network) propagate via the context error field.