Google Sign in - Login (#11)

* fixes varios

* node fix, pagination and margins

* Google Sign in - Login added, minor changes

* Google auth added

Author: raulocba

src/.env renamed to .env

@@ -3,3 +3,4 @@ REACT_APP_API_KEY = fe7f525d019d7186e76683b4233c4a0c
 //b1e66cf7b4d8b4bb07238f7a3e8bfe15
 //bba2ad02b4ec7888859b671bb039179f
 //b290e192611b0edd8fef1d95bb9a17ae;
+REACT_APP_GOOGLE_CLIENT_ID=423678433872-li4489tkutnb0kk944olk1je7ramfdh9.apps.googleusercontent.com

Login.js

@@ -13,10 +13,12 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/material": "^5.8.2",
+    "@react-oauth/google": "^0.12.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "jwt-decode": "^4.0.0",
     "nvm": "^0.0.4",
     "react": "^18.1.0",
     "react-alice-carousel": "^2.6.1",

Logout.js

@@ -1,5 +1,5 @@
 import Container from "@material-ui/core/Container";
-import React from "react";
+import React, { useState } from "react";
 import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import ConsentDialog from "./components/ConsentDialog/ConsentDialog";
 import Header from "./components/Header/Header";
@@ -9,13 +9,27 @@ import Search from "./components/Pages/Search/Search";
 import Series from "./components/Pages/Series/Series";
 import Trending from "./components/Pages/Trending/Trending";
 import useGTM from "./hooks/useGTM";
+import Login from './components/Login';
+import Logout from './components/Logout';
 
 function App() {
   const { consentGiven, handleConsent } = useGTM();
+  const [user, setUser] = useState(null);
 
   return (
     <Router>
       <Header />
+       <div style={{ position: 'fixed', top: 15, right: 15, zIndex: 101, color: 'white' }}>
+        {user ? (
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <img src={user.picture} alt={user.name} style={{ borderRadius: '50%', width: '40px', marginRight: '10px' }} />
+            <span>Welcome, {user.name}</span>
+            <Logout setUser={setUser} />
+          </div>
+        ) : (
+          <Login setUser={setUser} />
+        )}
+      </div>
       <div className="app">
         <Container>
           <Switch>

package-lock.json

@@ -0,0 +1,30 @@
+import React from 'react';
+import { GoogleLogin } from '@react-oauth/google';
+import { jwtDecode } from 'jwt-decode';
+
+const Login = ({ setUser }) => {
+  const onSuccess = (res) => {
+    const userObject = jwtDecode(res.credential);
+    console.log('Login Success:', userObject);
+    setUser(userObject);
+    // Here, you would typically send the token (res.credential) to your backend
+    // to verify the user and create a session.
+  };
+
+  const onError = () => {
+    console.log('Login Failed');
+  };
+
+  return (
+    <div>
+      <GoogleLogin
+        onSuccess={onSuccess}
+        onError={onError}
+        useOneTap
+      />
+    </div>
+  );
+};
+
+export default Login;
+

package.json

@@ -0,0 +1,19 @@
+import React from 'react';
+import { googleLogout } from '@react-oauth/google';
+
+const Logout = ({ setUser }) => {
+    const handleLogout = () => {
+        googleLogout();
+        setUser(null);
+        console.log('Logout Successful');
+    };
+
+    return (
+        <button onClick={handleLogout} style={{ marginLeft: '10px' }}>
+            Logout
+        </button>
+    );
+};
+
+export default Logout;
+

src/App.js

@@ -2,4 +2,4 @@
     display: flex;
     margin: 15px 0;
     padding-top: 100px;
-}
+}

src/components/Login.js

@@ -27,6 +27,13 @@ const Search = () => {
         main: "#fff",
       },
     },
+    overrides: {
+      MuiFilledInput: {
+        input: {
+          color: "#5548ceff", // A light blue for better contrast
+        },
+      },
+    },
   });
 
   const fetchSearch = async () => {