auth: Show Google Oauth as a popup window

This way, the current page's state will remain the same, as the page won't be reloaded

src/components/client/auth/login/LoginForm.tsx

@@ -1,5 +1,5 @@
 import * as yup from 'yup'
-import { Button, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
 import { signIn } from 'next-auth/react'
@@ -11,10 +11,10 @@ import FormInput from 'components/common/form/FormInput'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import EmailField from 'components/common/form/EmailField'
-import Google from 'common/icons/Google'
 import PasswordField from 'components/common/form/PasswordField'
 import { email, loginPassword } from 'common/form/validation'
 import LinkButton from 'components/common/LinkButton'
+import GoogleSignInButton from 'components/common/GoogleSignInButton'
 
 export type LoginFormData = {
   email: string
@@ -63,7 +63,6 @@ export default function LoginForm({ initialValues = defaults }: LoginFormProps)
       setLoading(false)
     }
   }
-  const onGoogleLogin = () => signIn('google')
 
   return (
     <GenericForm
@@ -87,9 +86,7 @@ export default function LoginForm({ initialValues = defaults }: LoginFormProps)
           <SubmitButton fullWidth label="auth:cta.login" loading={loading} />
         </Grid>
         <Grid item xs={12}>
-          <Button variant="outlined" fullWidth onClick={onGoogleLogin}>
-            <Google /> {t('nav.login-with')} Google
-          </Button>
+          <GoogleSignInButton variant="outlined" fullWidth />
         </Grid>
       </Grid>
     </GenericForm>

src/components/client/auth/login/LoginPage.tsx

@@ -1,14 +1,23 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import { useTranslation } from 'next-i18next'
 import { Container } from '@mui/material'
 
 import Layout from 'components/client/layout/Layout'
 
 import LoginForm from './LoginForm'
+import { useSession } from 'next-auth/react'
 
 export default function LoginPage() {
   const { t } = useTranslation()
+  const session = useSession()
+
+  //As google login is now on popup, we need to reload the page manually
+  useEffect(() => {
+    if (session.status === 'authenticated') {
+      window.location.reload()
+    }
+  }, [session])
 
   return (
     <Layout title={t('auth:cta.login')} metaDescription={t('auth:cta.login')}>

src/components/client/one-time-donation/FormikStepper.tsx

@@ -67,7 +67,7 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
       }
       return false
     },
-    [step],
+    [step, session],
   )
   return (
     <Formik

src/components/client/one-time-donation/LoginForm.tsx

@@ -1,17 +1,15 @@
 import React, { useContext, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import { useFormikContext } from 'formik'
-import { Box, Button, CircularProgress, Grid, Typography } from '@mui/material'
+import { Button, CircularProgress, Grid, Typography } from '@mui/material'
 import theme from 'common/theme'
-import Google from 'common/icons/Google'
 import { OneTimeDonation } from 'gql/donations'
 import EmailField from 'components/common/form/EmailField'
 import { signIn } from 'next-auth/react'
 import { StepsContext } from './helpers/stepperContext'
 import { AlertStore } from 'stores/AlertStore'
 import PasswordField from 'components/common/form/PasswordField'
-
-const onGoogleLogin = () => signIn('google')
+import GoogleSignInButton from 'components/common/GoogleSignInButton'
 
 function LoginForm() {
   const { t } = useTranslation('one-time-donation')
@@ -71,17 +69,13 @@ function LoginForm() {
         onClick={onClick}>
         {loading ? <CircularProgress color="inherit" size="1.5rem" /> : t('second-step.btn-login')}
       </Button>
-      <Button
+      <GoogleSignInButton
         size="large"
         color="primary"
         variant="outlined"
         fullWidth
         sx={{ marginTop: theme.spacing(3) }}
-        onClick={onGoogleLogin}>
-        <Box display="inline-flex" alignItems="center" marginRight={theme.spacing(2)}>
-          <Google /> {t('common:nav.login-with')} Google
-        </Box>
-      </Button>
+      />
     </Grid>
   )
 }

src/components/common/GoogleSignInButton.tsx

@@ -0,0 +1,28 @@
+import Google from 'common/icons/Google'
+import { Button } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+
+const onGoogleLogin = () => {
+  const url = `/google-signin`
+  const POPUP_WIDTH = 500
+  const POPUP_HEIGHT = 550
+  const y = window.outerHeight / 2 + window.screenY - POPUP_HEIGHT / 2
+  const x = window.outerWidth / 2 + window.screenX - POPUP_WIDTH / 2
+
+  const newWindow = window.open(
+    url,
+    '_blank',
+    `width=${POPUP_WIDTH},height=${POPUP_HEIGHT} top=${y} left=${x} popup`,
+  )
+  newWindow?.focus()
+}
+
+export default function GoogleSignInButton({ ...props }) {
+  const { t } = useTranslation()
+
+  return (
+    <Button variant="outlined" fullWidth onClick={onGoogleLogin} {...props}>
+      <Google /> {t('nav.login-with')} Google
+    </Button>
+  )
+}

src/pages/google-signin.tsx

@@ -0,0 +1,15 @@
+import { signIn, useSession } from 'next-auth/react'
+import { useEffect } from 'react'
+
+const GoogleSignIn = () => {
+  const { data: session, status } = useSession()
+
+  useEffect(() => {
+    if (!session) signIn('google')
+    if (session) window.close()
+  }, [session, status])
+
+  return null
+}
+
+export default GoogleSignIn