Google Sign in - Login

src/.env → .env

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

package.json

@@ -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",

src/App.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>

src/components/Login.js

@@ -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;
+

src/components/Logout.js

@@ -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/components/Pages/Search/Search.css

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

src/components/Pages/Search/Search.js

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

src/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import './index.css';
 import App from './App';
 
 
 ReactDOM.render(
   <React.StrictMode>
-    <App/>
-  </React.StrictMode>,document.getElementById("root")
+    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
+      <App />
+    </GoogleOAuthProvider>
+  </React.StrictMode>,
+  document.getElementById('root'),
 );

yarn.lock

@@ -2468,6 +2468,11 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@react-oauth/google@^0.12.2":
+  version "0.12.2"
+  resolved "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.2.tgz"
+  integrity sha512-d1GVm2uD4E44EJft2RbKtp8Z1fp/gK8Lb6KHgs3pHlM0PxCXGLaq8LLYQYENnN4xPWO1gkL4apBtlPKzpLvZwg==
+
 "@remix-run/router@1.16.1":
   version "1.16.1"
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz"
@@ -8905,6 +8910,11 @@ jwt-decode@^3.1.2:
   resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz"
   integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
 
+jwt-decode@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz"
+  integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
+
 keyv@^4.0.0, keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"