add email code settings card

Author: brendan-kellam

packages/web/src/app/(app)/settings/security/actions.ts

@@ -71,6 +71,41 @@ export const setCredentialsLoginEnabled = async (enabled: boolean): Promise<{ su
     )
 );
 
+export const setEmailCodeLoginEnabled = async (enabled: boolean): Promise<{ success: boolean } | ServiceError> => sew(async () =>
+    withAuth(async ({ org, role, prisma }) =>
+        withMinimumOrgRole(role, OrgRole.OWNER, async () => {
+            if (env.AUTH_EMAIL_CODE_LOGIN_ENABLED !== undefined) {
+                return {
+                    statusCode: StatusCodes.BAD_REQUEST,
+                    errorCode: ErrorCode.EMAIL_CODE_LOGIN_CONTROLLED_BY_ENV,
+                    message: "Email code login is controlled by the AUTH_EMAIL_CODE_LOGIN_ENABLED environment variable and cannot be changed from the UI.",
+                } satisfies ServiceError;
+            }
+
+            const providers = await getProviders();
+            const hasAlternativeLoginMethod = providers.some((provider) => provider.type !== "nodemailer");
+
+            // Don't allow disabling email code login when it would leave no other way to sign in.
+            if (!enabled && !hasAlternativeLoginMethod) {
+                return {
+                    statusCode: StatusCodes.BAD_REQUEST,
+                    errorCode: ErrorCode.EMAIL_CODE_LOGIN_CANNOT_BE_DISABLED,
+                    message: "Email code login cannot be disabled because no other login method is configured.",
+                } satisfies ServiceError;
+            }
+
+            await prisma.org.update({
+                where: { id: org.id },
+                data: { isEmailCodeLoginEnabled: enabled },
+            });
+
+            return {
+                success: true,
+            };
+        })
+    )
+);
+
 export const setAnonymousAccessStatus = async (enabled: boolean): Promise<ServiceError | boolean> => sew(async () =>
     withAuth(async ({ org, role, prisma }) =>
         withMinimumOrgRole(role, OrgRole.OWNER, async () => {

packages/web/src/app/(app)/settings/security/components/emailCodeLoginEnabledSettingsCard.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { useState } from "react"
+import { Info } from "lucide-react"
+import { Switch } from "@/components/ui/switch"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { setEmailCodeLoginEnabled } from "@/app/(app)/settings/security/actions"
+import { isServiceError } from "@/lib/utils"
+import { useToast } from "@/components/hooks/use-toast"
+import { BasicSettingsCard } from "@/app/(app)/settings/components/settingsCard"
+
+interface EmailCodeLoginEnabledSettingsCardProps {
+    isEmailCodeLoginEnabled: boolean
+    isEmailServiceConfigured: boolean
+}
+
+export function EmailCodeLoginEnabledSettingsCard({
+    isEmailCodeLoginEnabled,
+    isEmailServiceConfigured,
+}: EmailCodeLoginEnabledSettingsCardProps) {
+    const [enabled, setEnabled] = useState(isEmailCodeLoginEnabled)
+    const [isLoading, setIsLoading] = useState(false)
+    const { toast } = useToast()
+
+    const handleToggle = async (checked: boolean) => {
+        setIsLoading(true)
+        try {
+            const result = await setEmailCodeLoginEnabled(checked)
+
+            if (isServiceError(result)) {
+                toast({
+                    title: "Error",
+                    description: result.message,
+                    variant: "destructive",
+                })
+                return
+            }
+
+            setEnabled(checked)
+        } catch (error) {
+            console.error("Error updating email code login setting:", error)
+            toast({
+                title: "Error",
+                description: "Failed to update email code login setting",
+                variant: "destructive",
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <BasicSettingsCard
+            name="Email code login"
+            description="When enabled, users can sign in with a one-time code sent to their email."
+            footer={!isEmailServiceConfigured && (
+                <Alert className="mt-4 items-center">
+                    <Info className="w-4 h-4 text-muted-foreground" />
+                    <AlertDescription>
+                        This setting requires transactional email to be configured.{" "}
+                        <a
+                            href="https://docs.sourcebot.dev/docs/configuration/transactional-emails"
+                            target="_blank"
+                            rel="noopener"
+                            className="underline text-primary hover:text-primary/80 transition-colors"
+                        >
+                            Learn more
+                        </a>
+                    </AlertDescription>
+                </Alert>
+            )}
+        >
+            <Switch
+                checked={enabled}
+                onCheckedChange={handleToggle}
+                disabled={isLoading || !isEmailServiceConfigured}
+            />
+        </BasicSettingsCard>
+    )
+}

packages/web/src/app/(app)/settings/security/page.tsx

@@ -2,11 +2,12 @@ import { AnonymousAccessEnabledSettingsCard } from "./components/anonymousAccess
 import { InviteLinkEnabledSettingsCard } from "./components/inviteLinkEnabledSettingsCard";
 import { MemberApprovalRequiredSettingsCard } from "./components/memberApprovalRequiredSettingsCard";
 import { CredentialsLoginEnabledSettingsCard } from "./components/credentialsLoginEnabledSettingsCard";
+import { EmailCodeLoginEnabledSettingsCard } from "./components/emailCodeLoginEnabledSettingsCard";
 import { isAnonymousAccessEnabled } from "@/lib/entitlements";
 import { createInviteLink } from "@/lib/utils";
 import { authenticatedPage } from "@/middleware/authenticatedPage";
 import { OrgRole } from "@sourcebot/db";
-import { env, isCredentialsLoginEnabled, isMemberApprovalRequired } from "@sourcebot/shared";
+import { env, getSMTPConnectionURL, isCredentialsLoginEnabled, isEmailCodeLoginEnabled, isMemberApprovalRequired } from "@sourcebot/shared";
 import { SettingsCardGroup } from "../components/settingsCard";
 
 export default authenticatedPage(async ({ org }) => {
@@ -50,6 +51,10 @@ export default authenticatedPage(async ({ org }) => {
                     <CredentialsLoginEnabledSettingsCard
                         isCredentialsLoginEnabled={isCredentialsLoginEnabled(org)}
                     />
+                    <EmailCodeLoginEnabledSettingsCard
+                        isEmailCodeLoginEnabled={isEmailCodeLoginEnabled(org)}
+                        isEmailServiceConfigured={!!getSMTPConnectionURL() && !!env.EMAIL_FROM_ADDRESS}
+                    />
                 </SettingsCardGroup>
             </div>
         </div>

packages/web/src/lib/errorCodes.ts

@@ -40,6 +40,8 @@ export enum ErrorCode {
     LIGHTHOUSE_UNREACHABLE = 'LIGHTHOUSE_UNREACHABLE',
     EMAIL_LOGIN_CONTROLLED_BY_ENV = 'EMAIL_LOGIN_CONTROLLED_BY_ENV',
     EMAIL_LOGIN_CANNOT_BE_DISABLED = 'EMAIL_LOGIN_CANNOT_BE_DISABLED',
+    EMAIL_CODE_LOGIN_CONTROLLED_BY_ENV = 'EMAIL_CODE_LOGIN_CONTROLLED_BY_ENV',
+    EMAIL_CODE_LOGIN_CANNOT_BE_DISABLED = 'EMAIL_CODE_LOGIN_CANNOT_BE_DISABLED',
     MEMBER_APPROVAL_CONTROLLED_BY_ENV = 'MEMBER_APPROVAL_CONTROLLED_BY_ENV',
     ANONYMOUS_ACCESS_CONTROLLED_BY_ENV = 'ANONYMOUS_ACCESS_CONTROLLED_BY_ENV',
 }