LogIn

Unified auth card that toggles between login & register modes with animated transitions and a switch link.

Modular Build

Interactive Preview

Initialising Operative...

Architecture

Component Architecture

Prop Usage

Prop	Type	Default	Description
`defaultMode`	`"login" \| "register"`	`"login"`	Which form is shown initially.
`registrationMode`	`"otp" \| "confirmation-link"`	`"otp"`	Post-registration flow: advance to OTP entry or show "check inbox" screen.
`loading`	`boolean`	`false`	External loading flag that disables the form.
`onLoginSubmit`	`(values: { email; password }) => void`	—	Called on password login form submit.
`onRegisterSubmit`	`(values: { name; email; password }) => void`	—	Called on registration form submit.
`onGoogleSignIn`	`() => void`	—	Shows and handles Google OAuth login.
`onGoogleSignUp`	`() => void`	—	Shows and handles Google OAuth sign-up.
`onSendOtp`	`(email: string) => void`	—	Called to send a 6-digit OTP to the given email.
`onVerifyOtp`	`(email: string, token: string) => void`	—	Called to verify the OTP token.
`extraFields`	`React.ReactNode`	—	Slot for injecting additional content (e.g. error messages) inside the form.

Usage

import { LogIn } from '@/ui/features/LogIn';

<LogIn
  registrationMode="otp"
  onLoginSubmit={async ({ email, password }) => {
    await supabase.auth.signInWithPassword({ email, password });
  }}
  onRegisterSubmit={async ({ name, email, password }) => {
    await supabase.auth.signUp({ email, password, options: { data: { full_name: name } } });
  }}
  onSendOtp={async (email) => {
    await supabase.auth.signInWithOtp({ email });
  }}
  onVerifyOtp={async (email, token) => {
    await supabase.auth.verifyOtp({ email, token, type: 'signup' });
  }}
/>