Function AuthPage

Split-screen login / register screen.

A presentational page: it performs client-side validation (username >= 3 chars, password >= 6 chars) and then calls the login or register callback you pass in (typically the useAuth actions). When currentUser becomes truthy it automatically calls onBack, so it can be rendered as a route guard that redirects once authentication succeeds. The whole page is controlled by mode, which lets onSwitchMode toggle between sign in and sign up without unmounting.

Props:

• mode - "login" or "register"; selects the form.
• onBack - called to leave the page (and automatically on success).
• onSwitchMode - called to toggle between login and register.
• login - (username, password) => Promise<void> from useAuth.
• register - (username, password) => Promise<void> from useAuth.
• loading - disables the submit button and shows a spinner.
• error - server error message to display.
• currentUser - when set, triggers onBack.

<AuthPage
  mode="login"
  onBack={() => navigate(-1)}
  onSwitchMode={() => setMode(m => (m === "login" ? "register" : "login"))}
  login={auth.login}
  register={auth.register}
  loading={auth.loading}
  error={auth.error}
  currentUser={auth.currentUser}
/>
Copy