Added Google Authentication

package.json

@@ -14,11 +14,14 @@
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
         "bootstrap": "^5.1.3",
+        "firebase": "^9.6.11",
         "font-awesome": "^4.7.0",
         "react": "^17.0.2",
         "react-bootstrap": "^2.2.0",
         "react-dom": "^17.0.2",
+        "react-google-login": "^5.2.2",
         "react-helmet": "^6.1.0",
+        "react-icons": "^4.3.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "^5.0.1",

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from "react";
+import React, {useState, lazy, Suspense } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import { withRouter } from "react-router";
@@ -8,7 +8,8 @@ import NotFound from "./pages/404/NotFound";
 import "./index.scss";
 import Preloader from "./components/Preloader/Preloader";
 import Scroll from "./components/Scroll/Scroll";
-
+import { authentication } from "./firebase-config";
+import { Router } from "react-router-dom";
 const Home = lazy(() => import("./pages/Home/Home"));
 const Explore = lazy(() => import("./pages/Explore/Explore"));
 const DetailPage = lazy(() => import("./pages/DetailPage/DetailPage"));
@@ -19,31 +20,70 @@ const Reset = lazy(() => import("./pages/ResetPassword/Reset"));
 const Report = lazy(() => import("./pages/ReportaBug/Report"));
 const Signup = lazy(() => import("./pages/SignupPage/Signup"));
 function App({ location }) {
-  return (
-    <Suspense fallback={<Preloader />}>
+
+  const [userLoggedIn, setUserLoggedIn] = useState(true);
+
+ authentication.onAuthStateChanged((user)=> {
+   if(user){
+     return setUserLoggedIn(true);
+   }
+   setUserLoggedIn(false);
+
+ })
+
+  if(userLoggedIn === true){
+
+    return (
+
+      <Suspense fallback={<Preloader />}>
+        {location.pathname !== "/404" && (
+          <Header  currentRoute={location.pathname} />
+        )}
+        <Scroll showBelow={200} />
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route path="/contact" exact component={ContactUs} />
+          <Route path="/explore" exact component={Explore} />
+          <Route path="/e/:slug" exact component={DetailPage} />
+          <Route path="/jobs" exact component={ContactUs} />
+          <Route path="/feed" exact component={ContactUs} />
+          <Route path="/report" component={Report} />
+          <Route path="/404" exact component={NotFound} />
+          <Redirect to="/" component={Home} />
+        </Switch>
+        {location.pathname !== "/404" && <Footer fill={"#0D1017"} />}
+      </Suspense>
+    );
+  }else{
+    return (
+      <Suspense fallback={<Preloader />}>
       {location.pathname !== "/404" && (
         <Header currentRoute={location.pathname} />
       )}
       <Scroll showBelow={200} />
       <Switch>
         <Route path="/" exact component={Home} />
+        <Route path="/signin" exact component={Login} />
         <Route path="/contact" exact component={ContactUs} />
-        <Route path="/explore" exact component={Explore} />
         <Route path="/e/:slug" exact component={DetailPage} />
         <Route path="/jobs" exact component={ContactUs} />
         <Route path="/feed" exact component={ContactUs} />
-        <Route path="/signin" exact component={Login} />
         <Route path="/signup" exact component={Signup} />
         <Route path="/forget" component={Forget} />
         <Route path="/reset" component={Reset} />
-        <Route path="/report" component={Report} />
         <Route path="/404" exact component={NotFound} />
-
-        <Redirect to="/404" />
+        <Redirect to="/explore" />
       </Switch>
       {location.pathname !== "/404" && <Footer fill={"#0D1017"} />}
     </Suspense>
-  );
+
+    )
+
+  }
+
+
+
+
 }
 
 export default withRouter(App);

src/components/Header/Header.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import styles from "./header.module.scss";
 import Logo from "./../../assets/_logo/logo.png";
 import { AccountCircle, Add, ExitToApp, Settings } from "@material-ui/icons";
+import { authentication } from "../../firebase-config";
 import {
   IconButton,
   makeStyles,
@@ -14,6 +15,14 @@ import {
 } from "@material-ui/core";
 
 function Header(props) {
+
+
+
+
+
+
+
+
   const { currentRoute } = props;
   const header = useRef(null);
 
@@ -195,7 +204,7 @@ function Header(props) {
               to={"/signin"}
               onClick={() => setLoggedin(true)}
             >
-              Sign in
+              Signin
             </Link>
           )}
         </div>

src/firebase-config.js

@@ -0,0 +1,14 @@
+import { initializeApp } from 'firebase/app';
+import {getAuth} from "firebase/auth";
+const firebaseConfig = {
+    apiKey: "AIzaSyCdeEAJwqGNbVDGlWS6R3a9OEW_RVf8BKs",
+    authDomain: "cswala-g-signin.firebaseapp.com",
+    projectId: "cswala-g-signin",
+    storageBucket: "cswala-g-signin.appspot.com",
+    messagingSenderId: "711679399560",
+    appId: "1:711679399560:web:7cdfd64341d2bd2633b13d"
+
+};
+
+const app = initializeApp(firebaseConfig);
+export const authentication  = getAuth(app);

src/pages/Login/Login.jsx

@@ -2,8 +2,26 @@ import React from 'react';
 import 'font-awesome/css/font-awesome.min.css';
 import './login.css';
 import loginIllustartion from '../../assets/socialmedia/login.png';
-
+import { authentication } from '../../firebase-config';
+import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
+import {ImGoogle} from "react-icons/im"
+import {ImGithub} from "react-icons/im"
 export default function Login() {
+
+
+    const handleGoogleLogin = () => {
+        const provider = new GoogleAuthProvider();
+        signInWithPopup(authentication, provider)
+        .then((res) => {
+            console.log(res);
+        })
+        .catch((err)=>{
+            console.log(err);
+        })
+    }
+
+
+
     return (
         <div className="container-ctm-login container">
             <div className="illustration_img">
@@ -63,10 +81,15 @@ export default function Login() {
                         <a href="/signup"> Create your account! </a>
                     </div>
 
-                    <div className="icons">
-                        <a href="#" id="facebookIcon"></a>
-                        <a href="#" id="twitterIcon"></a>
-                        <a href="#" id="googleIcon"></a>
+                    <div className="authBtns">
+                        <button id="googlebutton" onClick={handleGoogleLogin}>
+                            <ImGoogle className='icon' /> 
+                            Continue with Google
+                        </button>
+                        <button id="githubbutton" >
+                            <ImGithub className='icon' /> 
+                            Continue with Github
+                        </button>
                     </div>
                 </form>
             </div>

src/pages/Login/login.css

@@ -248,3 +248,40 @@ a:hover {
         box-shadow: none;
     }
 }
+
+
+#googlebutton{
+    padding: 1em 2em;
+    border-radius: 100px;
+    border: none;
+    background-color: #24a0ed;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+}
+#githubbutton{
+    padding: 1em 2em;
+    border-radius: 100px;
+    border: none;
+    background-color: #24a0ed;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+}
+
+.authBtns{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    margin: 1em;
+}
+
+.icon{
+    transform: scale(1.2);
+}

src/pages/SignupPage/Signup.jsx

@@ -7,7 +7,7 @@ export default function Signup() {
     return (
         <div className="container-ctm-signup container">
             <div className="illustration_img">
-                <img src={signupIllustartion}></img>
+                {/* <img src={signupIllustartion}></img> */}
             </div>
             <div className="signup-content">
                 <form>