feat: embedded social auth & one tap login

zimmerman-team · Nov 22, 2023 · de323d1 · de323d1
1 parent a355404
commit de323d1
Show file tree

Hide file tree

Showing 11 changed files with 257 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@turf/center": "^6.3.0",
     "@turf/helpers": "^6.3.0",
     "@types/": "rawgraphs/rawgraphs-charts",
+    "@types/auth0-js": "^9.21.5",
     "@types/d3-shape": "^3.0.2",
     "@types/detect-it": "^4.0.1",
     "@types/draft-js": "^0.11.9",
@@ -47,6 +48,7 @@
     "@types/react-csv": "^1.1.2",
     "@types/react-router-hash-link": "^2.4.0",
     "apexcharts": "^3.27.0",
+    "auth0-js": "^9.23.3",
     "axios": "^0.21.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "craco-plugin-react-hot-reload": "^0.1.0",
@@ -86,6 +88,7 @@
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.10",
     "react-google-drive-picker": "^1.2.2",
+    "react-google-one-tap-login": "^0.1.1",
     "react-grid-carousel": "^1.0.1",
     "react-hook-form": "^7.43.9",
     "react-indexed-db": "^1.0.12",

diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
@@ -2,16 +2,19 @@
 
 // base
 import React, { Suspense, lazy } from "react";
+import { socialAuth } from "app/utils/socialAuth";
 import { useScrollToTop } from "app/hooks/useScrollToTop";
 import { PageLoader } from "app/modules/common/page-loader";
 import { RouteWithAppBar } from "app/utils/RouteWithAppBar";
 import { Route, Switch, useHistory } from "react-router-dom";
 import { NoMatchPage } from "app/modules/common/no-match-page";
+import { useGoogleOneTapLogin } from "react-google-one-tap-login";
 import {
   AppState,
   Auth0Provider,
   User,
   WithAuthenticationRequiredOptions,
+  useAuth0,
   withAuthenticationRequired,
 } from "@auth0/auth0-react";
 
@@ -78,6 +81,37 @@ const Auth0ProviderWithRedirectCallback = (props: {
   );
 };
 
+const OneTapLoginComponent = () => {
+  const { isLoading, isAuthenticated } = useAuth0();
+  const loadRef = React.useRef<HTMLDivElement>(null);
+
+  useGoogleOneTapLogin({
+    disabled: isLoading || isAuthenticated,
+    onError: (error) => console.log(error),
+    onSuccess: (response) => socialAuth("google-oauth2", response.email),
+    googleAccountConfigs: {
+      client_id: process.env.REACT_APP_GOOGLE_API_CLIENT_ID!,
+      cancel_on_tap_outside: false,
+    },
+  });
+
+  const onBeforeUnload = () => {
+    if (loadRef.current) {
+      loadRef.current.style.display = "block";
+    }
+  };
+
+  React.useEffect(() => {
+    window.onbeforeunload = onBeforeUnload;
+  }, []);
+
+  return (
+    <div ref={loadRef} style={{ display: "none" }}>
+      <PageLoader />
+    </div>
+  );
+};
+
 export function MainRoutes() {
   useScrollToTop();
 
@@ -90,6 +124,7 @@ export function MainRoutes() {
         redirect_uri: `${window.location.origin}/callback`,
       }}
     >
+      <OneTapLoginComponent />
       <Suspense fallback={<PageLoader />}>
         <Switch>
           <Route exact path="/callback">

diff --git a/src/app/modules/callback-module/index.tsx b/src/app/modules/callback-module/index.tsx
@@ -6,11 +6,13 @@ import { PageLoader } from "app/modules/common/page-loader";
 
 function AuthCallbackModule() {
   const history = useHistory();
-  const { error, isAuthenticated } = useAuth0();
+  const { error, isAuthenticated, getAccessTokenSilently } = useAuth0();
 
   React.useEffect(() => {
     if (isAuthenticated) {
       history.replace("/");
+    } else {
+      getAccessTokenSilently();
     }
   }, [isAuthenticated]);
 

diff --git a/src/app/modules/home-module/components/Loader/index.tsx b/src/app/modules/home-module/components/Loader/index.tsx
@@ -17,18 +17,18 @@ const ProcessingIcon = () => (
       cy="80"
       fill="transparent"
       stroke="#DADAF8"
-      stroke-width="8px"
+      strokeWidth="8px"
     ></circle>
     <circle
       r="70"
       cx="80"
       cy="80"
       fill="transparent"
       stroke="#6061E5"
-      stroke-linecap="round"
-      stroke-width="10px"
-      stroke-dasharray="239.6px"
-      stroke-dashoffset="109.9px"
+      strokeLinecap="round"
+      strokeWidth="10px"
+      strokeDasharray="239.6px"
+      strokeDashoffset="109.9px"
     ></circle>
   </svg>
 );

diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx
@@ -7,6 +7,7 @@ import { useRecoilState, useResetRecoilState } from "recoil";
 import { Box, Grid, Container, IconButton, Popover } from "@material-ui/core";
 /* project */
 import { Tab } from "app/components/Styled/tabs";
+import { socialAuth } from "app/utils/socialAuth";
 import HomeFooter from "app/modules/home-module/components/Footer";
 import ChartsGrid from "app/modules/home-module/components/Charts/chartsGrid";
 import ReportsGrid from "app/modules/home-module/components/Reports/reportsGrid";
@@ -43,7 +44,7 @@ import {
 export default function HomeModule() {
   useTitle("DX DataXplorer");
 
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
+  const { isAuthenticated } = useAuth0();
 
   // clear persisted states
   const clearPersistedReportState = useResetRecoilState(
@@ -131,10 +132,6 @@ export default function HomeModule() {
     setSortPopoverAnchorEl(null);
   };
 
-  const handleLogin = () => {
-    loginWithRedirect();
-  };
-
   const openSortPopover = Boolean(sortPopoverAnchorEl);
 
   React.useEffect(() => {
@@ -230,10 +227,10 @@ export default function HomeModule() {
                       }
                     `}
                   >
-                    <button onClick={handleLogin}>
+                    <button onClick={() => socialAuth("google-oauth2")}>
                       <GoogleIcon /> sign in for free
                     </button>
-                    <button onClick={handleLogin}>
+                    <button onClick={() => socialAuth("linkedin")}>
                       <LinkedInIcon /> sign in for free
                     </button>
                   </div>

diff --git a/src/app/modules/home-module/sub-modules/partners/components/bestDecisionBlock.tsx b/src/app/modules/home-module/sub-modules/partners/components/bestDecisionBlock.tsx
@@ -1,16 +1,15 @@
-import { Grid } from "@material-ui/core";
 import React from "react";
-import RightArr from "app/modules/home-module/assets/right-arr-icon.svg";
+import { Link } from "react-router-dom";
+import { Grid } from "@material-ui/core";
+import { useAuth0 } from "@auth0/auth0-react";
+import { socialAuth } from "app/utils/socialAuth";
 import { bestDecisioncss } from "app/modules/home-module/sub-modules/partners/style";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
-import { Link } from "react-router-dom";
-import { useAuth0 } from "@auth0/auth0-react";
+
 export default function BestDecisionBlock() {
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
-  const handleLogin = () => {
-    loginWithRedirect();
-  };
+  const { isAuthenticated } = useAuth0();
+
   return (
     <Grid css={bestDecisioncss}>
       <h4>Best decisions are based on data</h4>
@@ -71,10 +70,10 @@ export default function BestDecisionBlock() {
         >
           {!isAuthenticated && (
             <div id="auth-buttons">
-              <button onClick={handleLogin}>
+              <button onClick={() => socialAuth("google-oauth2")}>
                 <GoogleIcon /> sign in for free
               </button>
-              <button onClick={handleLogin}>
+              <button onClick={() => socialAuth("linkedin")}>
                 <LinkedInIcon /> sign in for free
               </button>
             </div>

diff --git a/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx b/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx
@@ -1,29 +1,27 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import Grid from "@material-ui/core/Grid";
+import { useAuth0 } from "@auth0/auth0-react";
+import { socialAuth } from "app/utils/socialAuth";
 import { HomePrimaryButton } from "app/components/Styled/button";
+import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as SmallEllipse } from "app/modules/home-module/assets/cases-sm-ellipse.svg";
+import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
 import { ReactComponent as TopRightEllipse } from "app/modules/home-module/assets/top-right-ellipse.svg";
 import { ReactComponent as BottomLeftEllipse } from "app/modules/home-module/assets/bottom-left-ellipse.svg";
 import { ReactComponent as BottomRightEllipse } from "app/modules/home-module/assets/bottom-right-ellipse.svg";
-import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
-import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
 import {
   empowercss,
   SmallEllipseCss,
   TopRightEllipseCss,
   BottomLeftEllipseCss,
   BottomRightEllipseCss,
 } from "app/modules/home-module/sub-modules/partners/style";
-import { Link } from "react-router-dom";
-import { useAuth0 } from "@auth0/auth0-react";
 
 export default function EmpowerBlock(props: {
   view?: "why-dx" | "contact" | "about" | "partners";
 }) {
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
-  const handleLogin = () => {
-    loginWithRedirect();
-  };
+  const { isAuthenticated } = useAuth0();
 
   let mainText = "";
   let subText = "";
@@ -100,10 +98,10 @@ export default function EmpowerBlock(props: {
             }
           `}
         >
-          <button onClick={handleLogin}>
+          <button onClick={() => socialAuth("google-oauth2")}>
             <GoogleIcon /> sign in for free
           </button>
-          <button onClick={handleLogin}>
+          <button onClick={() => socialAuth("linkedin")}>
             <LinkedInIcon /> sign in for free
           </button>
         </div>

diff --git a/src/app/modules/home-module/sub-modules/why-dx/components/tryUsBlock.tsx b/src/app/modules/home-module/sub-modules/why-dx/components/tryUsBlock.tsx
@@ -1,15 +1,14 @@
 import React from "react";
-import { ReactComponent as RightArr } from "app/modules/home-module/assets/right-arr-icon.svg";
 import { Link } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
+import { socialAuth } from "app/utils/socialAuth";
+import { ReactComponent as RightArr } from "app/modules/home-module/assets/right-arr-icon.svg";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
 
 export default function TryUsBlock() {
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
-  const handleLogin = () => {
-    loginWithRedirect();
-  };
+  const { isAuthenticated } = useAuth0();
+
   return (
     <>
       <p
@@ -158,10 +157,10 @@ export default function TryUsBlock() {
               }
             `}
           >
-            <button onClick={handleLogin}>
+            <button onClick={() => socialAuth("google-oauth2")}>
               <GoogleIcon /> sign in for free
             </button>
-            <button onClick={handleLogin}>
+            <button onClick={() => socialAuth("linkedin")}>
               <LinkedInIcon /> sign in for free
             </button>
           </div>

diff --git a/src/app/modules/onboarding-module/component/card/index.tsx b/src/app/modules/onboarding-module/component/card/index.tsx
@@ -1,23 +1,18 @@
 import React from "react";
-import { useAuth0 } from "@auth0/auth0-react";
 import Checkbox from "@material-ui/core/Checkbox";
+import { socialAuth } from "app/utils/socialAuth";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import { socialloginbuttoncss, termsOfServiceCss } from "./style";
 import { ReactComponent as GoogleIcon } from "../../asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "../../asset/linkedIn-img.svg";
 
 export default function AuthCard(props: { isLogin?: boolean }) {
-  const { loginWithRedirect } = useAuth0();
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(event.target.checked);
   };
 
-  const onButtonClick = () => {
-    loginWithRedirect();
-  };
-
   return (
     <div
       css={`
@@ -34,10 +29,18 @@ export default function AuthCard(props: { isLogin?: boolean }) {
         }
       `}
     >
-      <button type="button" css={socialloginbuttoncss} onClick={onButtonClick}>
+      <button
+        type="button"
+        css={socialloginbuttoncss}
+        onClick={() => socialAuth("google-oauth2")}
+      >
         <GoogleIcon /> {props.isLogin ? "Log in" : "Sign up"} with Google
       </button>
-      <button type="button" css={socialloginbuttoncss} onClick={onButtonClick}>
+      <button
+        type="button"
+        css={socialloginbuttoncss}
+        onClick={() => socialAuth("linkedin")}
+      >
         <LinkedInIcon />
         {props.isLogin ? "Log in" : "Sign up"} with LinkedIn
       </button>

diff --git a/src/app/utils/socialAuth.ts b/src/app/utils/socialAuth.ts
@@ -0,0 +1,19 @@
+import Auth0JS from "auth0-js";
+
+export function socialAuth(
+  connection: "google-oauth2" | "linkedin" | "github" | "windowslive",
+  login_hint?: string
+) {
+  const webAuth = new Auth0JS.WebAuth({
+    domain: process.env.REACT_APP_AUTH0_DOMAIN as string,
+    clientID: process.env.REACT_APP_AUTH0_CLIENT as string,
+    audience: process.env.REACT_APP_AUTH0_AUDIENCE as string,
+    redirectUri: `${window.location.origin}/callback`,
+  });
+
+  webAuth.authorize({
+    connection,
+    login_hint,
+    responseType: "token",
+  });
+}