glenngillen/verify flow

src/components/Auth/index.tsx

@@ -26,6 +26,7 @@ const Auth0 = new Auth0Client({
   domain: publicRuntimeConfig.auth0.issuerBaseHost as string,
   clientId: publicRuntimeConfig.auth0.clientId as string,
   authorizationParams: {
+    scope: 'openid',
     redirect_uri: `${publicRuntimeConfig.auth0.baseUrl}/auth/callback`,
   },
 });
@@ -38,6 +39,7 @@ const currentUser = async (): Promise<User | void> => {
     const userId = window.sessionStorage.getItem('userId') as string | '';
     const token = await Auth0.getTokenSilently({
       authorizationParams: {
+        scope: 'openid',
         audience,
       },
     });
@@ -128,6 +130,7 @@ const Auth: FunctionComponent<Props> = ({
   const signin = useCallback(async (): Promise<void> => {
     await Auth0.loginWithRedirect({
       authorizationParams: {
+        scope: 'openid',
         audience,
         source: 'ockam-website',
       },
@@ -137,6 +140,7 @@ const Auth: FunctionComponent<Props> = ({
   const signup = useCallback(async (): Promise<void> => {
     await Auth0.loginWithRedirect({
       authorizationParams: {
+        scope: 'openid',
         audience,
         screen_hint: 'signup',
         source: 'ockam-website',

src/components/Signup/SignupFlowManager.tsx

@@ -20,6 +20,7 @@ import MarketplaceSetup from './MarketplaceSetup';
 import Notice from './Notice';
 import UserDetails from './UserDetails';
 import { TIERS } from '../Packaging/tiers';
+import VerifyEmailModal from './VerifyEmail';
 
 type Props = {
   install: MDXRemoteSerializeResult;
@@ -63,6 +64,7 @@ const SignupFlowManager: FC<Props> = ({ install, terms }): ReactElement => {
   const [marketplaceFulfilment, setMarketplacceFulfilment] = useState<boolean>(false);
   const [returningDelegate, setReturningDelegate] = useState<boolean>(false);
   const [completedDelegate, setCompletedDelegate] = useState<boolean>(false);
+  const [verifyEmail, setVerifyEmail] = useState<boolean>(false);
 
   const [transitioning, setTransitioning] = useState(false);
   // const [nextHidden, setNextHidden] = useState(false);
@@ -427,11 +429,13 @@ const SignupFlowManager: FC<Props> = ({ install, terms }): ReactElement => {
         setIsLoaded(true);
       }
     } catch (error) {
+      setVerifyEmail(true);
       if (error instanceof UnverifiedEmailError) {
-        setMessage('📨 Check your inbox! Verify your email address and then refresh this page');
-        setTimeout(() => {
-          router.reload();
-        }, 5000);
+        setVerifyEmail(true);
+        // setMessage('📨 Check your inbox! Verify your email address and then refresh this page');
+        // setTimeout(() => {
+        //   router.reload();
+        // }, 5000);
       } else {
         console.error(error);
       }
@@ -456,6 +460,7 @@ const SignupFlowManager: FC<Props> = ({ install, terms }): ReactElement => {
   return (
     <Flex mx="auto" pb="32" p={8} direction={{ base: 'row' }} w="100%">
       {message && <Notice message={message} />}
+      <VerifyEmailModal open={verifyEmail} />
       <Box style={{ transition: '200ms ease-in opacity', opacity: returningDelegate ? '0' : '1' }}>
         <Steps
           variant="circles"

src/components/Signup/VerifyEmail.tsx

@@ -0,0 +1,59 @@
+import { FC, useEffect } from 'react';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+
+type Props = {
+  open: boolean;
+};
+const VerifyEmailModal: FC<Props> = ({ open }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const router = useRouter();
+
+  const close = () => {
+    onClose();
+    router.reload();
+  };
+
+  useEffect(() => {
+    if (open) {
+      onOpen();
+    }
+  }, [open]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={close}>
+      <ModalOverlay />
+      <ModalContent backgroundColor="brand.200">
+        <ModalHeader textAlign="center" fontSize={42}>
+          📬
+        </ModalHeader>
+        <ModalHeader textAlign="center" fontSize={32} letterSpacing="-1px">
+          Check your inbox!
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          Before you can proceed we need to confirm your email address. We&apos;ve already sent you
+          an email, just click the link in it and then come back here.
+        </ModalBody>
+
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={close}>
+            I&apos;ve verified
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default VerifyEmailModal;