Added basic auth.

GautamPatil1 · Mar 21, 2024 · 0f52a95 · 0f52a95
1 parent 01d0da8
commit 0f52a95
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 17 deletions.
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,18 +1,65 @@
 import styles from "./styles/Hero.module.css";
+import { useState, useEffect } from "react";
+import {
+  auth,
+  provider,
+  signInWithPopup,
+  GoogleAuthProvider,
+} from "../firebase";
+
 export default function Hero() {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const storedUser = JSON.parse(localStorage.getItem("user"));
+    if (storedUser) {
+      setUser(storedUser);
+    }
+  }, []);
+
+  const handleSignIn = async () => {
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        const credential = GoogleAuthProvider.credentialFromResult(result);
+        const token = credential.accessToken;
+        const user = result.user;
+        setUser(user);
+        localStorage.setItem("user", JSON.stringify(user)); // Store user in localStorage
+      })
+      .catch((error) => {
+        console.error("Sign-in error:", error);
+      });
+  };
+
+  const handleSignOut = () => {
+    auth
+      .signOut()
+      .then(() => {
+        setUser(null);
+        localStorage.removeItem("user"); // Remove user from localStorage on sign out
+      })
+      .catch((error) => {
+        console.error("Sign-out error:", error);
+      });
+  };
   return (
     <div className={styles.heroContainer}>
       <div className={styles.left}>
         <div className={styles.title}>
           Your Personalized <br /> Resume Hosting Platform
         </div>
         <div className={styles.subtitle}>
-          Create your own personalized resume website in minutes & host it on a personalized username of your choice.
+          Create your own personalized resume website in minutes & host it on a
+          personalized username of your choice.
         </div>
         <div className={styles.buttons}>
-            <div className={styles.getStarted}>
-                <a href="/dashboard">Get Started</a>
-            </div>
+          <div className={styles.getStarted}>
+            {user ? (
+              <a href="/dashboard">Dashboard</a>
+            ) : (
+              <a onClick={handleSignIn}>Login to Get Started</a>
+            )}
+          </div>
         </div>
       </div>
       <div className={styles.cube}>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,11 +1,42 @@
-// Navbar.js
-
-import React from 'react';
+import React, { useState, useEffect } from "react";
 import styles from "./styles/Navbar.module.css";
+import { auth, provider, signInWithPopup, GoogleAuthProvider } from "../firebase";
 
 export default function Navbar() {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const storedUser = JSON.parse(localStorage.getItem("user"));
+    if (storedUser) {
+      setUser(storedUser);
+    }
+  }, []);
+
+  const handleSignIn = async () => {
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        const credential = GoogleAuthProvider.credentialFromResult(result);
+        const token = credential.accessToken;
+        const user = result.user;
+        setUser(user);
+        localStorage.setItem("user", JSON.stringify(user)); // Store user in localStorage
+      })
+      .catch((error) => {
+        console.error("Sign-in error:", error);
+      });
+  };
+
+  const handleSignOut = () => {
+    auth.signOut().then(() => {
+      setUser(null);
+      localStorage.removeItem("user"); // Remove user from localStorage on sign out
+    }).catch((error) => {
+      console.error("Sign-out error:", error);
+    });
+  };
+
   return (
-    <div className={styles.navbarContainer}>  
+    <div className={styles.navbarContainer}>
       <div className={styles.brand}>
         <div className={styles.logo}>
           <img
@@ -18,20 +49,22 @@ export default function Navbar() {
             }}
           />
         </div>
-        <div className={styles.name}>
-          REZUME
-        </div>
+        <div className={styles.name}>{user ? user.displayName: "REZUME" }</div>
       </div>
 
       <div className={styles.right}>
-        <div className={styles.howItWorks}>
-          How it works
-        </div>
+        <div className={styles.howItWorks}>How it works</div>
 
         <div className={styles.auth}>
-          <div className={styles.login}>
-            Start Rezume
-          </div>
+          {user ? (
+            <div onClick={handleSignOut} className={styles.login}>
+              Sign Out
+            </div>
+          ) : (
+            <div onClick={handleSignIn} className={styles.login}>
+              Get Started
+            </div>
+          )}
         </div>
       </div>
     </div>