feat: add Google OAuth login feature

Nerdware-LLC · Mar 24, 2024 · fc028ff · fc028ff
1 parent 7786f3d
commit fc028ff
Show file tree

Hide file tree

Showing 16 changed files with 947 additions and 61 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -28,6 +28,7 @@ jobs:
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_SENTRY_CI_RELEASE_NAME: ${{ github.event.release.name }}
           VITE_STRIPE_PUBLISHABLE_KEY: ${{ secrets.STRIPE_TEST_PUBLISHABLE_KEY }}
+          VITE_GOOGLE_OAUTH_CLIENT_ID: ${{ secrets.GOOGLE_OAUTH_CLIENT_ID }}
         run: |
           if [ "${{ github.event.release.prerelease }}" == 'true' ]; then
             npm run build:staging

diff --git a/.storybook/decorators/globalDecorators.tsx b/.storybook/decorators/globalDecorators.tsx
@@ -2,6 +2,7 @@ import { DecoratorHelpers } from "@storybook/addon-themes";
 import CssBaseline from "@mui/material/CssBaseline";
 import MuiThemeProvider from "@mui/material/styles/ThemeProvider";
 import { GlobalStyles } from "@/app/GlobalStyles";
+import { GoogleOAuthContextProvider } from "@/app/GoogleOAuthContext";
 import { PageLayoutContextProvider } from "@/app/PageLayoutContext";
 import { THEMES, THEME_NAMES, type ThemeName } from "@/app/ThemeProvider/themes";
 import { useAppThemeObject } from "@/app/ThemeProvider/useAppThemeObject";
@@ -30,8 +31,12 @@ const withCustomThemeProvider = (): DecoratorFunction<ReactRenderer> => {
     const themeFromGlobals = globals?.theme;
     const themeOverrideFromParameters = parameters?.themes?.themeOverride;
 
-    const selectedTheme = themeOverrideFromParameters || themeFromGlobals || DEFAULT_THEME;
+    let selectedTheme = themeOverrideFromParameters || themeFromGlobals || DEFAULT_THEME;
 
+    // Ensure selectedTheme is either DARK or LIGHT:
+    if (selectedTheme !== THEME_NAMES.LIGHT) selectedTheme = THEME_NAMES.DARK;
+
+    // Get the Mui theme object for the selected theme:
     const theme = useAppThemeObject(selectedTheme);
 
     return (
@@ -51,14 +56,23 @@ const withCustomThemeProvider = (): DecoratorFunction<ReactRenderer> => {
  *   but counter-intuitively, _higher_ index decorators wrap _lower_ index decorators.
  */
 export const globalDecorators: Array<DecoratorFunction<ReactRenderer>> = [
+  // ThemeProvider
+  withCustomThemeProvider(),
+
+  // GoogleOAuthContextProvider
+  (Story) => (
+    <GoogleOAuthContextProvider>
+      <Story />
+    </GoogleOAuthContextProvider>
+  ),
+
   // DateTimeLocalizationProvider
   (Story) => (
     <DateTimeLocalizationProvider>
       <Story />
     </DateTimeLocalizationProvider>
   ),
-  // ThemeProvider
-  withCustomThemeProvider(),
+
   // PageLayoutContextProvider
   (Story) => (
     <PageLayoutContextProvider>

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,8 +1,10 @@
+<!-- FONT STYLESHEET -->
 <link
   rel="stylesheet"
   href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
   type="text/css"
 />
+
 <style>
   /* FONT FIXES: VERTICAL ALIGNMENT
     This style block is a copy of the CSS returned from fonts.googleapis.com (excludes
@@ -60,3 +62,9 @@
       U+FFFD;
   }
 </style>
+
+<!-- STRIPE SCRIPT REQUIRED FOR PCI COMPLIANCE -->
+<script src="https://js.stripe.com/v3/"></script>
+
+<!-- GOOGLE OAUTH CLIENT LIB -->
+<script src="https://accounts.google.com/gsi/client" async></script>
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#F78103" />
+    <title>Fixit</title>
     <meta
       name="Keywords"
       content="Work Orders, Invoicing, Payment Processing, Digital Payments, Business, Tools, Utilities, Operations, B2B, B2C, eCommerce, Stripe, Web App, SPA, Website"
@@ -13,13 +14,15 @@
       name="Description"
       content="Fixit is a SaaS application which integrates work order and invoice management with in-app payment processing."
     />
+
     <!-- DOMPurify for TRUSTED TYPES DEFAULT POLICY (IF UPDATED, SHA MUST BE UPDATED AS WELL IN CSP 'script-src') -->
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.9/purify.min.js"
       integrity="sha512-9+ilAOeXY8qy2bw/h51MmliNNHvdyhTpLIlqDmVpD26z8VjVJsUJtk5rhbDIUvYiD+EpGoAu0xTa7MhZohFQjA=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
+
     <!-- TRUSTED TYPES DEFAULT POLICY -->
     <script>
       // Feature detection for TrustedTypes
@@ -38,17 +41,20 @@
         });
       }
     </script>
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="/manifest.json" />
+
     <!-- FONT STYLESHEET -->
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
       type="text/css"
     />
+
     <style>
       /* FONT FIXES: VERTICAL ALIGNMENT
         This style block is a copy of the CSS returned from fonts.googleapis.com (excludes
@@ -109,14 +115,15 @@
           U+FEFF, U+FFFD;
       }
     </style>
+
     <!-- APPLE TOUCH ICON -->
     <link rel="apple-touch-icon" href="/logo192.webp" />
-    <title>Fixit</title>
+
+    <!-- STRIPE SCRIPT REQUIRED FOR PCI COMPLIANCE -->
     <script src="https://js.stripe.com/v3/"></script>
-    <!--
-      The above Stripe script is required for PCI compliance.
-      https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements&element=card#set-up-stripe-elements
-    -->
+
+    <!-- GOOGLE OAUTH CLIENT LIB -->
+    <script src="https://accounts.google.com/gsi/client" async></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -5,6 +5,7 @@ import { RootAppRouter } from "@/routes/RootAppRouter";
 import { ApolloProvider } from "./ApolloProvider";
 import { FetchStateContextProvider } from "./FetchStateContext";
 import { GlobalStyles } from "./GlobalStyles";
+import { GoogleOAuthContextProvider } from "./GoogleOAuthContext";
 import { PageLayoutContextProvider } from "./PageLayoutContext";
 import { ThemeProvider } from "./ThemeProvider";
 import { DateTimeLocalizationProvider } from "./localization";
@@ -24,14 +25,16 @@ export const App = () => (
     <ErrorBoundary>
       <PageLayoutContextProvider>
         <DateTimeLocalizationProvider>
-          <ThemeProvider>
-            <CssBaseline />
-            <GlobalStyles />
-            <ToastContainer />
-            <FetchStateContextProvider>
-              <RootAppRouter />
-            </FetchStateContextProvider>
-          </ThemeProvider>
+          <GoogleOAuthContextProvider>
+            <ThemeProvider>
+              <CssBaseline />
+              <GlobalStyles />
+              <ToastContainer />
+              <FetchStateContextProvider>
+                <RootAppRouter />
+              </FetchStateContextProvider>
+            </ThemeProvider>
+          </GoogleOAuthContextProvider>
         </DateTimeLocalizationProvider>
       </PageLayoutContextProvider>
     </ErrorBoundary>