Solution: Signup Outcome Feedback

A status panel sharing the registration form's provider.

Solution: signup outcome feedback

src/components/PracticeSignup.tsx

1import {
2  WpAuthProvider,
3  WpRegisterForm,
4  useWpAuth,
5  useWpUser,
6} from "@forgewp/auth"
7
8function SignupFeedback() {
9  const { loading, error, notice } = useWpAuth()
10  const user = useWpUser()
11  if (loading) return <p role="status">Creating your account…</p>
12  if (error) return <p role="alert">{error}</p>
13  if (user) return <p role="status">Signed in as {user.displayName}.</p>
14  return notice ? <p role="status">{notice}</p> : null
15}
16
17export default function PracticeSignup() {
18  return (
19    <WpAuthProvider>
20      <WpRegisterForm />
21      <SignupFeedback />
22    </WpAuthProvider>
23  )
24}

This deliberately demonstrates a separate status panel. The built-in registration form also renders its own registration notice; in a finished design choose a single main feedback location, using custom form controls if needed. A separate provider around the panel would isolate it from the form's live state.

Add real login/resend navigation in the surrounding theme once the policy is clear. Do not redirect every account-created result into a protected Page.

Return to the exercise.