Singpass fallback - Disabling singpass send notification (#1349)

* feat: add Singpass as OIDC provider

* fix: adjust URL

* feat: add uuid column and generate JWKS script

* feat: place Singpass after email OTP login

* feat: add Singpass login step using Growthbook

* fix: reduce session TTL from 7 days to 12 hours (#1223)

* fix: adjust based on comments

* chore: fix types for userId

* chore: fix package-lock

* chore: completely remove SGID login functionality (#1209)

* chore: completely remove SGID login functionality

* chore: remove modalText

* feat: add frontend for Singpass authentication (#1213)

* feat: add frontend for Singpass authentication

* fix: adjust design based on chromatic feedback

* feat: update invitation email wording

* fix: update based on Copilot review

* chore: adjust based on comments

* chore: update based on comments

* chore: fix missing inviterName in mock data

* feat: add error handling for Singpass authentication (#1231)

* feat: add error handling for Singpass authentication

* chore: update from comments

* fix: rename getName to getUserProps

* chore: rename uuid to singpassUuid

* fix: update tests

* chore: update script to have extractable keys

* fix: remove Singpass error modal

* fix: force body-2 on button

* feat: add error infobox when not whitelisted

* chore: use form error message for blacklisted email

* fix: use switch statement and handle default for error

* chore: update wording and text size

* reduce TTL to 1 hour

* implement isSingpassEnabled function to streamline feature flag usage

* refactor: rename isSingpassEnabled to getIsSingpassEnabled and update usage in user router

* refactor: rename isSingpassEnabled to getIsSingpassEnabled for clarity and update usage in context

* remove

* add isAuthenticatedWithSingpass flag to session data and update session on successful authentication

* update default session TTL comment to reflect future change for Singpass launch

* refactor: simplify session TTL management by removing Singpass check and updating session configuration based on authentication status

* refactor: remove unused import of formatInTimeZone from email.router.ts

* feat: add mock feature flag for Singpass to enable testing

* update error msg

* add custom error message for Singpass authentication failure

* feat: add tooltip support to MenuItem component

* integrate Singpass status checks in user management modals and buttons

* add Singpass feature flag to user management modals for enhanced testing

* refactor: replace useIsSingpassEnabled with useIsSingpassEnabledForCriticalActions in user management components and hooks

* update mock feature flags for Singpass to include fallback value and clarify testing purpose

* fix test

* move back to original position

* make props required

* fix: do not reset TTL expiration

* fix

* remove unused props

* update session TTL configuration for VAPT environment

* add no-op updateConfig method for session in tests

* hardcode for vapt only

* remove unused improt

* refactor support url and email

* add getResourceStudioUrl function to generate resource-specific URLs

* add email templates

* implement email sending functions for publish alerts and update email template types

* remove unused import

* refactor email alert sending to use Promise.all for concurrent execution

* refactor: replace useIsSingpassEnabledForCriticalActions with useIsSingpassEnabled + introduce SingpassConditionalTooltip

* refactor: remove the need to pass in isSingpassEnabled

* refactor: remove the need to pass in isSingpassEnabled

* refactor: simplify Singpass feature check by removing deprecated function

* fix: remove conditional hook

* fix: add missing tooltip for Resend invite button

* fix: add backend validation to block resending of invites

* fix: add conditional isDisabled for isSingpassEnabled for button

* chore: rename getResourceStudioUrl to getStudioResourceUrl for clarity in email templates

* chore: return siteUrlPrefix instead of empty string

* fix: replace with getIsSingpassEnabled

* feat: add login alert email functionality and template

* fix: missing throw new Error("Invalid email format")

* enhance: move email sending out of DB TX

* refactor: only pass in isSingpassEnabled directly

* refactor: update Singpass feature flag usage in email router

* fix(test): breaking test from updating default singpass value

* test(auth.email): add tests for login alert email functionality

---------

Co-authored-by: dcshzj <[email protected]>

Author: adriangohjw

apps/studio/src/constants/misc.ts

@@ -1 +1,2 @@
-export const ISOMER_SUPPORT_LINK = "mailto:[email protected]"
+export const ISOMER_SUPPORT_EMAIL = "[email protected]"
+export const ISOMER_SUPPORT_LINK = `mailto:${ISOMER_SUPPORT_EMAIL}`

apps/studio/src/features/mail/service.ts

@@ -1,4 +1,9 @@
-import type { InvitationEmailTemplateData } from "./templates"
+import type {
+  InvitationEmailTemplateData,
+  LoginAlertEmailTemplateData,
+  PublishAlertContentPublisherEmailTemplateData,
+  PublishAlertSiteAdminEmailTemplateData,
+} from "./templates"
 import { createBaseLogger } from "~/lib/logger"
 import { isValidEmail } from "~/utils/email"
 import { sendMail } from "../../lib/mail"
@@ -34,3 +39,90 @@ export async function sendInvitation(
     throw error
   }
 }
+
+export async function sendLoginAlertEmail(
+  data: LoginAlertEmailTemplateData,
+): Promise<void> {
+  if (!isValidEmail(data.recipientEmail)) {
+    logger.error({
+      error: "Invalid email format",
+      email: data.recipientEmail,
+    })
+    throw new Error("Invalid email format")
+  }
+
+  const template = templates.loginAlert(data)
+
+  try {
+    await sendMail({
+      recipient: data.recipientEmail,
+      subject: template.subject,
+      body: template.body,
+    })
+  } catch (error) {
+    logger.error({
+      error: "Failed to send login alert email",
+      email: data.recipientEmail,
+      originalError: error,
+    })
+    throw error
+  }
+}
+
+export async function sendPublishAlertContentPublisherEmail(
+  data: PublishAlertContentPublisherEmailTemplateData,
+): Promise<void> {
+  if (!isValidEmail(data.recipientEmail)) {
+    logger.error({
+      error: "Invalid email format",
+      email: data.recipientEmail,
+    })
+    throw new Error("Invalid email format")
+  }
+
+  const template = templates.publishAlertContentPublisher(data)
+
+  try {
+    await sendMail({
+      recipient: data.recipientEmail,
+      subject: template.subject,
+      body: template.body,
+    })
+  } catch (error) {
+    logger.error({
+      error: "Failed to send publish alert content publisher email",
+      email: data.recipientEmail,
+      originalError: error,
+    })
+    throw error
+  }
+}
+
+export async function sendPublishAlertSiteAdminEmail(
+  data: PublishAlertSiteAdminEmailTemplateData,
+): Promise<void> {
+  if (!isValidEmail(data.recipientEmail)) {
+    logger.error({
+      error: "Invalid email format",
+      email: data.recipientEmail,
+    })
+    throw new Error("Invalid email format")
+  }
+
+  const template = templates.publishAlertSiteAdmin(data)
+
+  try {
+    await sendMail({
+      recipient: data.recipientEmail,
+      subject: template.subject,
+      body: template.body,
+    })
+  } catch (error) {
+    logger.error({
+      error: "Failed to send publish alert site admin email",
+      email: data.recipientEmail,
+      originalError: error,
+    })
+    throw error
+  }
+}

apps/studio/src/features/mail/templates/templates.ts

@@ -4,8 +4,13 @@ import type {
   BaseEmailTemplateData,
   EmailTemplate,
   InvitationEmailTemplateData,
+  LoginAlertEmailTemplateData,
+  PublishAlertContentPublisherEmailTemplateData,
+  PublishAlertSiteAdminEmailTemplateData,
 } from "./types"
+import { ISOMER_SUPPORT_EMAIL, ISOMER_SUPPORT_LINK } from "~/constants/misc"
 import { env } from "~/env.mjs"
+import { getStudioResourceUrl } from "~/utils/resources"
 
 export const invitationTemplate = (
   data: InvitationEmailTemplateData,
@@ -50,11 +55,65 @@ export const invitationTemplate = (
   }
 }
 
+// FYI: Currently, we only send this email to users when Singpass has been disabled.
+export const loginAlertTemplate = (
+  data: LoginAlertEmailTemplateData,
+): EmailTemplate => {
+  const { recipientEmail } = data
+  return {
+    subject: `[Isomer Studio] Successful Login to Your Account`,
+    body: `<p>Hi ${recipientEmail},</p>
+<p>We wanted to let you know that your account was accessed successfully.</p>
+<p>If this was you, no action is needed.</p>
+<p><strong>Note:</strong> You're receiving this notification because your account was logged into during a Singpass authentication outage. If you are not the one who logged in, please contact <a href="${ISOMER_SUPPORT_LINK}">${ISOMER_SUPPORT_EMAIL}</a> immediately.</p>
+<p>Best,</p>
+<p>Isomer team</p>`,
+  }
+}
+
+export const publishAlertContentPublisherTemplate = (
+  data: PublishAlertContentPublisherEmailTemplateData,
+): EmailTemplate => {
+  const { recipientEmail, siteName, resource } = data
+  const studioResourceUrl = getStudioResourceUrl(resource)
+
+  return {
+    subject: `[Isomer Studio] ${resource.title} has been published`,
+    body: `<p>Hi ${recipientEmail},</p>
+<p>You have successfully published "${resource.title}" on ${siteName}. You can access your published content on Isomer Studio at <a href="${studioResourceUrl}">${studioResourceUrl}</a>.</p>
+<p><strong>Note:</strong> You're receiving this notification because content was published during a Singpass authentication outage. If you didn't authorize this publication, please contact <a href="${ISOMER_SUPPORT_LINK}">${ISOMER_SUPPORT_EMAIL}</a> immediately.</p>
+<p>Best,</p>
+<p>Isomer team</p>`,
+  }
+}
+
+export const publishAlertSiteAdminTemplate = (
+  data: PublishAlertSiteAdminEmailTemplateData,
+): EmailTemplate => {
+  const { recipientEmail, publisherEmail, siteName, resource } = data
+  const studioResourceUrl = getStudioResourceUrl(resource)
+
+  return {
+    subject: `[Isomer Studio] ${resource.title} has been published`,
+    body: `<p>Hi ${recipientEmail},</p>
+<p>${publisherEmail} has published "${resource.title}" on ${siteName}. You can view the published content on Isomer Studio at <a href="${studioResourceUrl}">${studioResourceUrl}</a>.</p>
+<p><strong>Note:</strong> You're receiving this notification because content was published during a Singpass authentication outage. As a site admin, we want to keep you informed of all publishing activities. If you have any concerns, please contact <a href="${ISOMER_SUPPORT_LINK}">${ISOMER_SUPPORT_EMAIL}</a> immediately.</p>
+<p>Best,</p>
+<p>Isomer team</p>`,
+  }
+}
+
 type EmailTemplateFunction<
   T extends BaseEmailTemplateData = BaseEmailTemplateData,
 > = (data: T) => EmailTemplate
 
 export const templates = {
   invitation:
     invitationTemplate satisfies EmailTemplateFunction<InvitationEmailTemplateData>,
+  loginAlert:
+    loginAlertTemplate satisfies EmailTemplateFunction<LoginAlertEmailTemplateData>,
+  publishAlertContentPublisher:
+    publishAlertContentPublisherTemplate satisfies EmailTemplateFunction<PublishAlertContentPublisherEmailTemplateData>,
+  publishAlertSiteAdmin:
+    publishAlertSiteAdminTemplate satisfies EmailTemplateFunction<PublishAlertSiteAdminEmailTemplateData>,
 } as const

apps/studio/src/features/mail/templates/types.ts

@@ -1,3 +1,4 @@
+import type { Resource } from "~/server/modules/database"
 import type { RoleType } from "~prisma/generated/generatedEnums"
 
 export interface BaseEmailTemplateData {
@@ -11,6 +12,21 @@ export interface InvitationEmailTemplateData extends BaseEmailTemplateData {
   isSingpassEnabled?: boolean
 }
 
+export type LoginAlertEmailTemplateData = BaseEmailTemplateData
+
+export interface PublishAlertContentPublisherEmailTemplateData
+  extends BaseEmailTemplateData {
+  siteName: string
+  resource: Resource
+}
+
+export interface PublishAlertSiteAdminEmailTemplateData
+  extends BaseEmailTemplateData {
+  publisherEmail: string
+  siteName: string
+  resource: Resource
+}
+
 export interface EmailTemplate {
   subject: string
   body: string

apps/studio/src/features/sign-in/components/EmailLogin/EmailInput.tsx

@@ -11,6 +11,7 @@ import {
 } from "@opengovsg/design-system-react"
 
 import type { VfnStepData } from "../SignInContext"
+import { ISOMER_SUPPORT_LINK } from "~/constants/misc"
 import { useZodForm } from "~/lib/form"
 import { emailSignInSchema } from "~/schemas/auth/email/sign-in"
 import { trpc } from "~/utils/trpc"
@@ -23,7 +24,7 @@ const EmailInputErrorMessage = ({ type, message }: Partial<FieldError>) => {
         <Text>
           We are having trouble sending an OTP to this email address.{" "}
           <Link
-            href="mailto:[email protected]?subject=I can't receive OTP on Isomer Studio"
+            href={`${ISOMER_SUPPORT_LINK}?subject=I can't receive OTP on Isomer Studio`}
             color="utility.feedback.critical"
             _hover={{
               color: "unset",

apps/studio/src/pages/sites/[siteId]/admin.tsx

@@ -19,6 +19,7 @@ import { ResourceType } from "~prisma/generated/generatedEnums"
 import { z } from "zod"
 
 import { PermissionsBoundary } from "~/components/AuthWrappers"
+import { ISOMER_SUPPORT_EMAIL } from "~/constants/misc"
 import { BRIEF_TOAST_SETTINGS } from "~/constants/toast"
 import { UnsavedSettingModal } from "~/features/editing-experience/components/UnsavedSettingModal"
 import { useIsUserIsomerAdmin } from "~/hooks/useIsUserIsomerAdmin"
@@ -124,8 +125,7 @@ const SiteAdminPage: NextPageWithLayout = () => {
     onError: () => {
       toast({
         title: "Error saving site config!",
-        description:
-          "If this persists, please report this issue at [email protected]",
+        description: `If this persists, please report this issue at ${ISOMER_SUPPORT_EMAIL}`,
         status: "error",
         ...BRIEF_TOAST_SETTINGS,
       })

apps/studio/src/pages/sites/[siteId]/settings.tsx

@@ -20,6 +20,7 @@ import { ResourceType } from "~prisma/generated/generatedEnums"
 import { z } from "zod"
 
 import { PermissionsBoundary } from "~/components/AuthWrappers"
+import { ISOMER_SUPPORT_EMAIL } from "~/constants/misc"
 import { BRIEF_TOAST_SETTINGS } from "~/constants/toast"
 import { UnsavedSettingModal } from "~/features/editing-experience/components/UnsavedSettingModal"
 import { useQueryParse } from "~/hooks/useQueryParse"
@@ -53,8 +54,7 @@ const SiteSettingsPage: NextPageWithLayout = () => {
     onError: () => {
       toast({
         title: "Error saving site settings!",
-        description:
-          "If this persists, please report this issue at [email protected]",
+        description: `If this persists, please report this issue at ${ISOMER_SUPPORT_EMAIL}`,
         status: "error",
         ...BRIEF_TOAST_SETTINGS,
       })

apps/studio/src/server/modules/auth/email/__tests__/email.router.test.ts

@@ -5,9 +5,10 @@ import {
   createMockRequest,
 } from "tests/integration/helpers/iron-session"
 import { setupUser, setUpWhitelist } from "tests/integration/helpers/seed"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 
 import { env } from "~/env.mjs"
+import * as mailService from "~/features/mail/service"
 import * as growthbookLib from "~/lib/growthbook"
 import * as mailLib from "~/lib/mail"
 import { AuditLogEvent, db } from "~/server/modules/database"
@@ -249,6 +250,32 @@ describe("auth.email", () => {
           beforeLogin.getTime(),
         )
       })
+
+      it("should send login alert email", async () => {
+        // Arrange
+        const alertSpy = vi
+          .spyOn(mailService, "sendLoginAlertEmail")
+          .mockResolvedValue()
+        await setupUser({ email: TEST_VALID_EMAIL })
+        await prisma.verificationToken.create({
+          data: {
+            expires: new Date(Date.now() + env.OTP_EXPIRY * 1000),
+            identifier: TEST_OTP_FINGERPRINT,
+            token: VALID_TOKEN_HASH,
+          },
+        })
+
+        // Act
+        await caller.verifyOtp({
+          email: TEST_VALID_EMAIL,
+          token: VALID_OTP,
+        })
+
+        // Assert
+        expect(alertSpy).toHaveBeenCalledWith({
+          recipientEmail: TEST_VALID_EMAIL,
+        })
+      })
     })
 
     describe("when singpass is enabled", () => {
@@ -381,6 +408,31 @@ describe("auth.email", () => {
         })
         expect(user?.lastLoginAt).toBeNull()
       })
+
+      // Note: it's only sent in singpass downtime
+      it("should not send login alert email", async () => {
+        // Arrange
+        const alertSpy = vi
+          .spyOn(mailService, "sendLoginAlertEmail")
+          .mockResolvedValue()
+        await setupUser({ email: TEST_VALID_EMAIL })
+        await prisma.verificationToken.create({
+          data: {
+            expires: new Date(Date.now() + env.OTP_EXPIRY * 1000),
+            identifier: TEST_OTP_FINGERPRINT,
+            token: VALID_TOKEN_HASH,
+          },
+        })
+
+        // Act
+        await caller.verifyOtp({
+          email: TEST_VALID_EMAIL,
+          token: VALID_OTP,
+        })
+
+        // Assert
+        expect(alertSpy).not.toHaveBeenCalled()
+      })
     })
 
     it("should throw 400 if OTP is not found", async () => {

apps/studio/src/server/modules/auth/email/email.router.ts

@@ -5,6 +5,7 @@ import set from "lodash/set"
 import type { SessionData } from "~/lib/types/session"
 import type { GrowthbookAttributes } from "~/types/growthbook"
 import { env } from "~/env.mjs"
+import { sendLoginAlertEmail } from "~/features/mail/service"
 import { getIsSingpassEnabled } from "~/lib/growthbook"
 import { sendMail } from "~/lib/mail"
 import {
@@ -146,7 +147,7 @@ export const emailSessionRouter = router({
       const isSingpassEnabled = getIsSingpassEnabled({ gb: ctx.gb })
 
       if (!isSingpassEnabled) {
-        return db.transaction().execute(async (tx) => {
+        const user = await db.transaction().execute(async (tx) => {
           const user = await upsertUser({
             tx,
             email,
@@ -164,6 +165,10 @@ export const emailSessionRouter = router({
           await ctx.session.save()
           return pick(user, defaultUserSelect)
         })
+
+        await sendLoginAlertEmail({ recipientEmail: email })
+
+        return user
       }
 
       return db.transaction().execute(async (tx) => {