Implement sign up feature with authentication

src/components/Login.jsx

@@ -1,6 +1,8 @@
 import React, { useRef, useState } from "react";
 import Header from "./Header";
 import { checkValidata } from "../utils/validate";
+import { createUserWithEmailAndPassword } from "@firebase/auth";
+import { auth } from "../utils/firebase";
 
 const Login = () => {
   const [isSignInForm, setIsSignInForm] = useState(true);
@@ -11,9 +13,36 @@ const Login = () => {
   const password = useRef(null);
 
   const handleButtonClick = () => {
-    const message = checkValidata(name.current.value, email.current.value, password.current.value);
+    const message = checkValidata(
+      name.current.value,
+      email.current.value,
+      password.current.value
+    );
     setErrorMessage(message);
-    console.log(message);
+    if (message) return;
+
+    if (isSignInForm) {
+      // Sign Up logic
+      createUserWithEmailAndPassword(
+        auth,
+        email.current.value,
+        password.current.value
+      )
+        .then((userCredential) => {
+          // Signed up
+          const user = userCredential.user;
+          console.log(user);
+          // ...
+        })
+        .catch((error) => {
+          const errorCode = error.code;
+          const errorMessage = error.message;
+          setErrorMessage(errorCode + "-" + errorMessage);
+          // ..
+        });
+    } else {
+      // Sign In logic
+    }
   };
 
   const toggleSignInForm = () => {
@@ -38,7 +67,7 @@ const Login = () => {
         </h1>
         {isSignInForm && (
           <input
-          ref={name}
+            ref={name}
             type="text"
             placeholder="Full Name"
             className="p-4 my-4 w-full bg-gray-700"
@@ -65,8 +94,8 @@ const Login = () => {
         </button>
         <p className="py-4 cursor-pointer" onClick={toggleSignInForm}>
           {isSignInForm
-            ? "New to Netflix? Sign in now."
-            : "Already registered? Sign up now."}
+            ? "Already registered? Sign in now."
+            : "New to Netflix? Sign up now."}
         </p>
       </form>
     </div>

src/utils/firebase.js

@@ -1,6 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
+import { getAuth } from "firebase/auth";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -13,9 +14,11 @@ const firebaseConfig = {
   storageBucket: "netflixgpt-a2047.appspot.com",
   messagingSenderId: "43717799838",
   appId: "1:43717799838:web:582c536e61623255a5f08f",
-  measurementId: "G-FNRQH7B2G3"
+  measurementId: "G-FNRQH7B2G3",
 };
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);
+const analytics = getAnalytics(app);
+
+export const auth = getAuth();