Added signin using firebase

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package.json

@@ -4,14 +4,15 @@
   "private": true,
   "dependencies": {
     "@types/node": "^18.15.11",
+    "firebase": "^9.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
     "react-scroll": "^1.8.4",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@types/react": "^18.0.33",
+    "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^3.1.0",

src/components/Navbar/Navbar.tsx

@@ -1,22 +1,31 @@
-import { useState } from 'react';
-import { StyledButton } from '@/components/styles/Button.styled';
+import { useState } from "react";
+import { auth, provider } from "../../config/firebase";
+import { signInWithPopup } from "firebase/auth";
+import { StyledButton } from "@/components/styles/Button.styled";
 import {
   Logo,
   StyledNavbar,
   Menu,
   NavLists,
   NavList,
   NavLink,
-} from '@/components/styles/Navbar.styled';
-import MobileNav from '@/components/Navbar/MobileNavigation';
+} from "@/components/styles/Navbar.styled";
+import MobileNav from "@/components/Navbar/MobileNavigation";
+import { sign } from "crypto";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [signIn, setSignIn] = useState(false);
 
   const toggleHandler = () => {
     setIsOpen(!isOpen);
   };
 
+  const signInHandler = async () => {
+    const res = await signInWithPopup(auth, provider);
+    setSignIn(true);
+  };
+
   return (
     <>
       <MobileNav isOpen={isOpen} toggleHandler={toggleHandler} />
@@ -26,7 +35,7 @@ const Navbar = () => {
         <NavLists>
           <NavList>
             <NavLink
-              to='/'
+              to="/"
               smooth={true}
               duration={650}
               delay={0}
@@ -37,7 +46,7 @@ const Navbar = () => {
           </NavList>
           <NavList>
             <NavLink
-              to='programs'
+              to="programs"
               smooth={true}
               duration={650}
               delay={0}
@@ -48,7 +57,7 @@ const Navbar = () => {
           </NavList>
           <NavList>
             <NavLink
-              to='about'
+              to="about"
               smooth={true}
               duration={650}
               delay={0}
@@ -59,7 +68,7 @@ const Navbar = () => {
           </NavList>
           <NavList>
             <NavLink
-              to='memberships'
+              to="memberships"
               smooth={true}
               duration={650}
               delay={0}
@@ -70,7 +79,7 @@ const Navbar = () => {
           </NavList>
           <NavList>
             <NavLink
-              to='testimonials'
+              to="testimonials"
               smooth={true}
               duration={650}
               delay={0}
@@ -79,7 +88,21 @@ const Navbar = () => {
               Testimonials
             </NavLink>
           </NavList>
-          <StyledButton primary={true}>Become a member</StyledButton>
+
+          <div
+            className="btn"
+            onClick={() => {
+              signInHandler();
+            }}
+          >
+            {signIn ? (
+              <StyledButton primary={true}>
+                Hey, {auth.currentUser?.displayName}
+              </StyledButton>
+            ) : (
+              <StyledButton primary={true}>Become a member</StyledButton>
+            )}
+          </div>
         </NavLists>
       </StyledNavbar>
     </>

src/config/firebase.js

@@ -0,0 +1,25 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+import { getAuth, GoogleAuthProvider } from "firebase/auth";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyCvlD8CIRlmDyQ3t7Cpzh9iu0NX8CbGTJg",
+  authDomain: "intrepide-5620a.firebaseapp.com",
+  projectId: "intrepide-5620a",
+  storageBucket: "intrepide-5620a.appspot.com",
+  messagingSenderId: "982853393680",
+  appId: "1:982853393680:web:2af1fd78c68b7f6b495995",
+  measurementId: "G-5Q1KKJ47XM",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider();