feat: verify email addresses on signup (#13632)

.prettierignore

@@ -16,3 +16,4 @@ storybook-static
 dist/
 node_modules/
 pnpm-lock.yaml
+posthog/templates/email/*

cypress/e2e/invites.cy.ts

@@ -55,7 +55,6 @@ describe('Invite Signup', () => {
         cy.get('.Popover button:first-child').click()
         cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
         cy.get('[data-attr=password-signup]').click()
-        cy.get('.Toastify__toast-body').should('contain', 'You have joined')
         cy.location('pathname').should('include', urls.projectHomepage())
     })
 
@@ -84,7 +83,6 @@ describe('Invite Signup', () => {
         cy.get('.Popover button:first-child').click()
         cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
         cy.get('[data-attr=password-signup]').click()
-        cy.get('.Toastify__toast-body').should('contain', 'You have joined')
         cy.location('pathname').should('include', urls.projectHomepage())
 
         // Log out, log in as main

ee/api/test/__snapshots__/test_organization_resource_access.ambr

@@ -12,12 +12,14 @@
          "posthog_user"."current_organization_id",
          "posthog_user"."current_team_id",
          "posthog_user"."email",
+         "posthog_user"."pending_email",
          "posthog_user"."temporary_token",
          "posthog_user"."distinct_id",
          "posthog_user"."email_opt_in",
          "posthog_user"."partial_notification_settings",
          "posthog_user"."anonymize_data",
          "posthog_user"."toolbar_mode",
+         "posthog_user"."is_email_verified",
          "posthog_user"."events_column_config"
   FROM "posthog_user"
   WHERE "posthog_user"."id" = 2
@@ -170,12 +172,14 @@
          "posthog_user"."current_organization_id",
          "posthog_user"."current_team_id",
          "posthog_user"."email",
+         "posthog_user"."pending_email",
          "posthog_user"."temporary_token",
          "posthog_user"."distinct_id",
          "posthog_user"."email_opt_in",
          "posthog_user"."partial_notification_settings",
          "posthog_user"."anonymize_data",
          "posthog_user"."toolbar_mode",
+         "posthog_user"."is_email_verified",
          "posthog_user"."events_column_config"
   FROM "posthog_user"
   WHERE "posthog_user"."id" = 2

ee/api/test/__snapshots__/test_time_to_see_data.ambr

@@ -17,7 +17,8 @@
           "user": {
               "distinct_id": "",
               "first_name": "",
-              "email": ""
+              "email": "",
+              "is_email_verified": false
           }
       },
       "children": [

frontend/src/layout/navigation/ProjectNotice.tsx

@@ -1,25 +1,29 @@
 import { useActions, useValues } from 'kea'
 import { Link } from 'lib/lemon-ui/Link'
-import { navigationLogic } from './navigationLogic'
+import { navigationLogic, ProjectNoticeVariant } from './navigationLogic'
 import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
 import { AlertMessage } from 'lib/lemon-ui/AlertMessage'
 import { IconPlus, IconSettings } from 'lib/lemon-ui/icons'
 import { AlertMessageAction } from 'lib/lemon-ui/AlertMessage/AlertMessage'
 import { userLogic } from 'scenes/userLogic'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { urls } from 'scenes/urls'
+import { verifyEmailLogic } from 'scenes/authentication/signup/verify-email/verifyEmailLogic'
 
 interface ProjectNoticeBlueprint {
     message: JSX.Element | string
     action?: AlertMessageAction
+    type?: 'info' | 'warning' | 'success' | 'error'
 }
 
 export function ProjectNotice(): JSX.Element | null {
     const { projectNoticeVariantWithClosability } = useValues(navigationLogic)
     const { currentOrganization } = useValues(organizationLogic)
     const { updateCurrentTeam } = useActions(userLogic)
+    const { user } = useValues(userLogic)
     const { closeProjectNotice } = useActions(navigationLogic)
     const { showInviteModal } = useActions(inviteLogic)
+    const { requestVerificationLink } = useActions(verifyEmailLogic)
 
     if (!projectNoticeVariantWithClosability) {
         return null
@@ -29,67 +33,75 @@ export function ProjectNotice(): JSX.Element | null {
 
     const altTeamForIngestion = currentOrganization?.teams?.find((team) => !team.is_demo && !team.ingested_event)
 
-    const NOTICES: Record<'demo_project' | 'real_project_with_no_events' | 'invite_teammates', ProjectNoticeBlueprint> =
-        {
-            demo_project: {
-                message: (
-                    <>
-                        This is a demo project with dummy data.
-                        {altTeamForIngestion && (
-                            <>
-                                {' '}
-                                When you're ready, head on over to the{' '}
-                                <Link
-                                    onClick={() => {
-                                        updateCurrentTeam(altTeamForIngestion?.id, urls.ingestion())
-                                    }}
-                                    data-attr="demo-project-alt-team-ingestion_link"
-                                >
-                                    ingestion wizard
-                                </Link>{' '}
-                                to get started with your own data.
-                            </>
-                        )}
-                    </>
-                ),
+    const NOTICES: Record<ProjectNoticeVariant, ProjectNoticeBlueprint> = {
+        demo_project: {
+            message: (
+                <>
+                    This is a demo project with dummy data.
+                    {altTeamForIngestion && (
+                        <>
+                            {' '}
+                            When you're ready, head on over to the{' '}
+                            <Link
+                                onClick={() => {
+                                    updateCurrentTeam(altTeamForIngestion?.id, urls.ingestion())
+                                }}
+                                data-attr="demo-project-alt-team-ingestion_link"
+                            >
+                                ingestion wizard
+                            </Link>{' '}
+                            to get started with your own data.
+                        </>
+                    )}
+                </>
+            ),
+        },
+        real_project_with_no_events: {
+            message: (
+                <>
+                    This project has no events yet. Go to the{' '}
+                    <Link to="/ingestion" data-attr="real_project_with_no_events-ingestion_link">
+                        ingestion wizard
+                    </Link>{' '}
+                    or grab your project API key/HTML snippet from{' '}
+                    <Link to="/project/settings" data-attr="real_project_with_no_events-settings">
+                        Project Settings
+                    </Link>{' '}
+                    to get things moving
+                </>
+            ),
+            action: {
+                to: '/ingestion',
+                'data-attr': 'demo-warning-cta',
+                icon: <IconSettings />,
+                children: 'Go to wizard',
             },
-            real_project_with_no_events: {
-                message: (
-                    <>
-                        This project has no events yet. Go to the{' '}
-                        <Link to="/ingestion" data-attr="real_project_with_no_events-ingestion_link">
-                            ingestion wizard
-                        </Link>{' '}
-                        or grab your project API key/HTML snippet from{' '}
-                        <Link to="/project/settings" data-attr="real_project_with_no_events-settings">
-                            Project Settings
-                        </Link>{' '}
-                        to get things moving
-                    </>
-                ),
-                action: {
-                    to: '/ingestion',
-                    'data-attr': 'demo-warning-cta',
-                    icon: <IconSettings />,
-                    children: 'Go to wizard',
-                },
+        },
+        invite_teammates: {
+            message: 'Get more out of PostHog by inviting your team for free',
+            action: {
+                'data-attr': 'invite-warning-cta',
+                onClick: showInviteModal,
+                icon: <IconPlus />,
+                children: 'Invite team members',
             },
-            invite_teammates: {
-                message: 'Get more out of PostHog by inviting your team for free',
-                action: {
-                    'data-attr': 'invite-warning-cta',
-                    onClick: showInviteModal,
-                    icon: <IconPlus />,
-                    children: 'Invite team members',
-                },
+        },
+        unverified_email: {
+            message: 'Please verify your email address.',
+            action: {
+                'data-attr': 'unverified-email-cta',
+                onClick: () => user && requestVerificationLink(user.uuid),
+                children: 'Send verification email',
             },
-        }
+            type: 'warning',
+        },
+    }
 
     const relevantNotice = NOTICES[projectNoticeVariant]
 
     return (
         <AlertMessage
-            type="info"
+            type={relevantNotice.type || 'info'}
             className="my-6"
             action={relevantNotice.action}
             onClose={isClosable ? () => closeProjectNotice(projectNoticeVariant) : undefined}

frontend/src/layout/navigation/navigationLogic.ts

@@ -10,13 +10,25 @@ import { VersionType } from '~/types'
 import type { navigationLogicType } from './navigationLogicType'
 import { membersLogic } from 'scenes/organization/Settings/membersLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 
-export type ProjectNoticeVariant = 'demo_project' | 'real_project_with_no_events' | 'invite_teammates'
+export type ProjectNoticeVariant =
+    | 'demo_project'
+    | 'real_project_with_no_events'
+    | 'invite_teammates'
+    | 'unverified_email'
 
 export const navigationLogic = kea<navigationLogicType>({
     path: ['layout', 'navigation', 'navigationLogic'],
     connect: {
-        values: [sceneLogic, ['sceneConfig'], membersLogic, ['members', 'membersLoading']],
+        values: [
+            sceneLogic,
+            ['sceneConfig'],
+            membersLogic,
+            ['members', 'membersLoading'],
+            featureFlagLogic,
+            ['featureFlags'],
+        ],
         actions: [eventUsageLogic, ['reportProjectNoticeDismissed']],
     },
     actions: {
@@ -182,17 +194,21 @@ export const navigationLogic = kea<navigationLogicType>({
                 organizationLogic.selectors.currentOrganization,
                 teamLogic.selectors.currentTeam,
                 preflightLogic.selectors.preflight,
+                userLogic.selectors.user,
                 s.members,
                 s.membersLoading,
                 s.projectNoticesAcknowledged,
+                s.featureFlags,
             ],
             (
                 organization,
                 currentTeam,
                 preflight,
+                user,
                 members,
                 membersLoading,
-                projectNoticesAcknowledged
+                projectNoticesAcknowledged,
+                featureFlags
             ): [ProjectNoticeVariant, boolean] | null => {
                 if (!organization) {
                     return null
@@ -203,6 +219,8 @@ export const navigationLogic = kea<navigationLogicType>({
                     // Don't show this project-level warning in the PostHog demo environemnt though,
                     // as then Announcement is shown instance-wide
                     return ['demo_project', false]
+                } else if (!user?.is_email_verified && featureFlags['require-email-verification'] === true) {
+                    return ['unverified_email', false]
                 } else if (
                     !projectNoticesAcknowledged['real_project_with_no_events'] &&
                     currentTeam &&

frontend/src/lib/api.mock.ts

@@ -119,6 +119,7 @@ export const MOCK_DEFAULT_USER: UserType = {
     has_password: true,
     is_staff: true,
     is_impersonated: false,
+    is_email_verified: true,
     is_2fa_enabled: false,
     team: MOCK_DEFAULT_TEAM,
     organization: MOCK_DEFAULT_ORGANIZATION,

frontend/src/lib/components/hedgehogs.tsx

@@ -22,6 +22,7 @@ import supportHeroHog from 'public/hedgehog/support-hero-hog.png'
 import xRayHog2 from 'public/hedgehog/x-ray-hogs-02.png'
 import laptopHog3 from 'public/hedgehog/laptop-hog-03.png'
 import detectiveHog from 'public/hedgehog/detective-hog.png'
+import mailHog from 'public/hedgehog/mail-hog.png'
 
 type HedgehogProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'>
 
@@ -100,3 +101,6 @@ export const SupportHeroHog = (props: HedgehogProps): JSX.Element => {
 export const DetectiveHog = (props: HedgehogProps): JSX.Element => {
     return <SquaredHedgehog src={detectiveHog} {...props} />
 }
+export const MailHog = (props: HedgehogProps): JSX.Element => {
+    return <SquaredHedgehog src={mailHog} {...props} />
+}

frontend/src/lib/constants.tsx

@@ -142,6 +142,7 @@ export const FEATURE_FLAGS = {
     RECORDING_DEBUGGING: 'recording-debugging', // owner #team-session-recordings
     FF_JSON_PAYLOADS: 'ff-json-payloads', // owner @EDsCODE
     PERSON_GROUPS_PROPERTY_DEFINITIONS: 'person-groups-property-definitions', // owner: @macobo
+    REQUIRE_EMAIL_VERIFICATION: 'require-email-verification', // owner: @raquelmsmith
     DATA_EXPLORATION_QUERIES_ON_DASHBOARDS: 'data-exploration-queries-on-dashboards', // owner: @pauldambra
     NEW_REFRESH_UX: 'new-refresh-ux', // owner: @yakkomajuri
     SAMPLING: 'sampling', // owner: @yakkomajuri

frontend/src/scenes/appScenes.ts

@@ -62,4 +62,5 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.IntegrationsRedirect]: () => import('./IntegrationsRedirect/IntegrationsRedirect'),
     [Scene.IngestionWarnings]: () => import('./data-management/ingestion-warnings/IngestionWarningsView'),
     [Scene.Query]: () => import('./query/QueryScene'),
+    [Scene.VerifyEmail]: () => import('./authentication/signup/verify-email/VerifyEmail'),
 }

frontend/src/scenes/authentication/inviteSignupLogic.ts

@@ -3,7 +3,6 @@ import { loaders } from 'kea-loaders'
 import { urlToAction } from 'kea-router'
 import { forms } from 'kea-forms'
 import api from 'lib/api'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
 import { PrevalidatedInvite } from '~/types'
 import type { inviteSignupLogicType } from './inviteSignupLogicType'
 
@@ -94,12 +93,8 @@ export const inviteSignupLogic = kea<inviteSignupLogicType>([
                 }
 
                 try {
-                    await api.create(`api/signup/${values.invite.id}/`, payload)
-                    lemonToast.success(
-                        `You have joined ${values.invite?.organization_name}! Taking you to PostHog now…`
-                    )
-                    await breakpoint(2000) // timeout for the user to read the toast
-                    window.location.href = '/' // hard refresh because the current_organization changed
+                    const res = await api.create(`api/signup/${values.invite.id}/`, payload)
+                    location.href = res.redirect_url || '/' // hard refresh because the current_organization changed
                 } catch (e) {
                     actions.setSignupManualErrors({
                         generic: {

frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/react'
+import { useEffect } from 'react'
+
+import { VerifyEmail } from './VerifyEmail'
+import { verifyEmailLogic } from './verifyEmailLogic'
+
+export default {
+    title: 'Scenes-Other/Verify Email',
+    parameters: {
+        layout: 'fullscreen',
+        options: { showPanel: false },
+        viewMode: 'story',
+    },
+} as Meta
+
+export const VerifyEmailPending = (): JSX.Element => {
+    useEffect(() => {
+        verifyEmailLogic.actions.setView('pending')
+        verifyEmailLogic.actions.setUuid('12345678')
+    }, [])
+    return <VerifyEmail />
+}
+export const VerifyingEmail = (): JSX.Element => {
+    useEffect(() => {
+        verifyEmailLogic.actions.setView('verify')
+    }, [])
+    return <VerifyEmail />
+}
+export const VerifyEmailSuccess = (): JSX.Element => {
+    useEffect(() => {
+        verifyEmailLogic.actions.setView('success')
+    }, [])
+    return <VerifyEmail />
+}
+export const VerifyEmailInvalid = (): JSX.Element => {
+    useEffect(() => {
+        verifyEmailLogic.actions.setView('invalid')
+        verifyEmailLogic.actions.setUuid('12345678')
+    }, [])
+    return <VerifyEmail />
+}