Main Components & Functions
1. Login (default export)
The main React component for the login and registration page. Handles user authentication, registration, Google sign-in, email link sign-in, and profile completion. Manages UI state for login, registration, password reset, and error handling.
Key State Variables:
-
user: Current Firebase user (if logged in). -
isLogin: Toggles between login and registration forms. -
isLoading: Indicates loading state for async actions. -
error: Stores error messages for display. -
authMethod: Chooses between password or email link authentication. -
isResetting: Toggles password reset form. -
needsProfile: Indicates if the user needs to complete their profile. -
emailLinkUser: Stores user object for email link sign-in flow.
Key Effects:
-
Listens for authentication state changes.
-
Handles email verification via URL parameters.
-
Handles email link sign-in flow.
2. handleGoogleSignIn
Handles Google OAuth sign-in using Firebase. If the user is new, creates a user record in the backend database. Ensures email is verified before allowing login.
3. NameCollectionForm
A React component/form for collecting first and last name when a new user signs in via email link and has not completed their profile. Updates Firebase user profile and backend database.
4. checkPasswordStrength
Checks if a password meets strength requirements (min 10 chars, uppercase, number, special char). Updates UI with password strength feedback.
5. handleVerifyEmail
Handles email verification via Firebase action code (from URL). Sets error or success messages and navigates as needed.
6. handleEmailLink
Sends a sign-in link to the provided email using Firebase. Stores the email locally for use in the sign-in flow.
7. handleSubmit
Handles form submission for both login and registration:
-
On registration: creates a new user, updates profile, creates backend user record, sends verification email.
-
On login: signs in with email and password.
8. EmailLinkForm
A React component/form for email link authentication. Collects email (and name for registration), sends sign-in link, and toggles between login/register.
9. handleSignOut
Signs out the current user and resets relevant state.
10. createUserData
Helper function to create a user data object for backend storage, including UID, email, names, and timestamps.
11. meta
Exports page metadata for SEO and browser display.
Additional Notes
-
The component uses Firebase for authentication and a custom backend (via
USER_WORKER_URL) for user data storage. -
Handles both password and passwordless (email link) authentication.
-
Integrates Google sign-in and enforces email verification.
-
Provides UI for password reset and profile completion.