Use Google login in production

frontend/.env.example

@@ -1 +1,2 @@
-VITE_API_BASE_URL=""
+VITE_API_BASE_URL=""
+VITE_OAUTH_CLIENT_ID=""

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@primer/octicons-react": "^19.12.0",
     "@primer/react": "^37.5.0",
+    "@react-oauth/google": "^0.12.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontend/src/components/Login/Login.jsx

@@ -1,22 +1,39 @@
 import { Box, Button, PageLayout } from "@primer/react";
 import { useNavigate } from "react-router";
+import { GoogleLogin } from "@react-oauth/google";
 import TopNav from "../TopNav/TopNav";
 import { authenticationService } from "../../services/authentication";
+import { isProduction } from "../../constants";
+import { fetchUserProfile } from "../../services/google";
 
 function Login() {
   const navigate = useNavigate();
 
+  async function handleSuccess(response) {
+    const user = await fetchUserProfile(response);
+    authenticationService.setUser(user);
+    navigate("/");
+  }
+
   function loginHandler() {
-    authenticationService.setUser({ name: "test" });
+    authenticationService.setUser({
+      name: "Test",
+      given_name: "Test",
+      email: "[email protected]",
+    });
     navigate("/");
   }
+
+  const loginButton = isProduction() ? (
+    <GoogleLogin onSuccess={handleSuccess} onError={console.log} />
+  ) : (
+    <Button onClick={loginHandler}>Login</Button>
+  );
   return (
     <PageLayout padding={"none"} containerWidth="full">
       <TopNav />
       <PageLayout.Content width={"full"} padding={"normal"}>
-        <Box>
-          <Button onClick={loginHandler}>Login</Button>
-        </Box>
+        <Box>{loginButton}</Box>
       </PageLayout.Content>
     </PageLayout>
   );

frontend/src/components/TopNav/TopNav.jsx

@@ -1,7 +1,9 @@
-import { Box, Header, PageLayout } from "@primer/react";
+import { Header, PageLayout } from "@primer/react";
 import { HomeIcon } from "@primer/octicons-react";
 import { useNavigate } from "react-router";
+import { googleLogout } from "@react-oauth/google";
 import { authenticationService } from "../../services/authentication";
+import { isProduction } from "../../constants";
 
 function TopNav() {
   const navigate = useNavigate();
@@ -11,6 +13,9 @@ function TopNav() {
         as="div"
         onClick={() => {
           authenticationService.logout();
+          if (isProduction()) {
+            googleLogout();
+          }
           navigate("/login");
         }}
       >

frontend/src/constants.js

@@ -1,3 +1,11 @@
 export function getApiBaseUrl() {
   return import.meta.env.VITE_API_BASE_URL;
 }
+
+export function getOAuthClientId() {
+  return import.meta.env.VITE_OAUTH_CLIENT_ID;
+}
+
+export function isProduction() {
+  return import.meta.env.PROD;
+}

frontend/src/index.jsx

@@ -1,17 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { ThemeProvider, BaseStyles } from "@primer/react";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
+
 import Login from "./components/Login/Login";
 import Home from "./components/Home/Home";
 import homeLoader from "./components/Home/loader";
 import reportWebVitals from "./reportWebVitals";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import RecipeDetails from "./components/RecipeDetails/RecipeDetails";
 import recipeDetailsLoader from "./components/RecipeDetails/loader";
 import Plan from "./components/Plan/Plan";
 import planLoader from "./components/Plan/loader";
 import PrivateRoutes from "./components/PrivateRoutes/PrivateRoutes";
+import { getOAuthClientId } from "./constants";
 
 const router = createBrowserRouter([
   {
@@ -43,13 +46,15 @@ const router = createBrowserRouter([
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <ThemeProvider>
-    <BaseStyles>
-      <React.StrictMode>
-        <RouterProvider router={router} />
-      </React.StrictMode>
-    </BaseStyles>
-  </ThemeProvider>
+  <GoogleOAuthProvider>
+    <ThemeProvider>
+      <BaseStyles>
+        <React.StrictMode>
+          <RouterProvider router={router} />
+        </React.StrictMode>
+      </BaseStyles>
+    </ThemeProvider>
+  </GoogleOAuthProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function

frontend/src/services/google.js

@@ -0,0 +1,12 @@
+export async function fetchUserProfile(tokenResponse) {
+  const response = await fetch(
+    "https://www.googleapis.com/oauth2/v3/userinfo",
+    { headers: { Authorization: `Bearer ${tokenResponse.access_token}` } }
+  );
+
+  if (!response.ok) {
+    console.error(response);
+  }
+
+  return await response.json();
+}