Login Page

LoginLeft Component

The LoginLeft component is responsible for rendering the login form and handling user authentication processes in a web application built with Next.js and Firebase.

Features

• User login via email and password.
• Admin check and redirection based on user roles.
• Form validation using Zod schema.
• Responsive feedback to users on login status and errors.

Usage

The component should be used in scenarios where user authentication is required. It integrates with Firebase for authentication and Firestore to fetch user data.

Code Structure

• Imports: Utilizes several React and Next.js hooks, Firebase authentication services, form management via react-hook-form, and schema validation with Zod.
• Component Definition: LoginLeft is a functional React component.
• State Management: Manages loading state locally with a useState hook.
• Form Handling: Uses react-hook-form for form handling with Zod for schema-based validation.
• Authentication: Authenticates users with Firebase and checks for additional attributes (like admin status) in Firestore.
• Styling: Applies Tailwind CSS for styling.

Component Breakdown

Form Schema

Defines the schema for form validation using Zod:

const FormSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
  rememberMe: z.boolean(),
});

Authentication Function

Handles the sign-in process:

const handleSignIn = async (values) => {
  const { email, password } = values;
  setIsLoading(true);
  try {
    const userCredential = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    // Additional logic to handle user redirection based on roles
  } catch (error) {
    toast("Login failed. Please check your credentials.");
  }
  setIsLoading(false);
};