chore: support saml login (#244)

appflowy · web-flow · commit 05d6ec478cd0 · 2026-02-01T18:52:59.000+08:00
* chore: support saml login

* chore: support saml login
diff --git a/src/@types/translations/en.json b/src/@types/translations/en.json
@@ -3041,6 +3041,14 @@
     "continueWithGithub": "Continue with GitHub",
     "continueWithDiscord": "Continue with Discord",
     "continueWithApple": "Continue with Apple ",
+    "continueWithSaml": "Continue with SSO",
+    "continueWithSso": "Continue",
+    "ssoLogin": "SSO Login",
+    "ssoLoginDescription": "Enter your work email to sign in with your organization's identity provider.",
+    "emailPlaceholder": "Enter your work email",
+    "emailRequired": "Please enter your email address",
+    "invalidEmail": "Please enter a valid email address",
+    "signingIn": "Signing in...",
     "moreOptions": "More options",
     "collapse": "Collapse",
     "signInAgreement": "By clicking \"Continue\" above, you agreed to AppFlowy's",
diff --git a/src/application/services/js-services/http/gotrue.ts b/src/application/services/js-services/http/gotrue.ts
@@ -4,7 +4,7 @@ import { emit, EventType } from '@/application/session';
 import { afterAuth } from '@/application/session/sign_in';
 import { getTokenParsed, saveGoTrueAuth } from '@/application/session/token';
 
-import { parseGoTrueError } from './gotrue-error';
+import { GoTrueErrorCode, parseGoTrueError } from './gotrue-error';
 import { verifyToken } from './http_api';
 
 export * from './gotrue-error';
@@ -407,3 +407,49 @@ export function signInDiscord(authUrl: string) {
 
   window.open(url, '_current');
 }
+
+interface AxiosErrorLike {
+  response?: {
+    data?: { message?: string; msg?: string };
+    status?: number;
+  };
+  message?: string;
+}
+
+/**
+ * Initiates SAML SSO login flow
+ * @param authUrl - The callback URL after SSO completes
+ * @param domain - The email domain to identify the SSO provider (e.g., "company.com")
+ */
+export async function signInSaml(authUrl: string, domain: string): Promise<void> {
+  try {
+    // POST to /sso endpoint with skip_http_redirect to get IdP URL in JSON
+    // This avoids CORS issues from automatic redirect following
+    const response = await axiosInstance?.post<{ url: string }>('/sso', {
+      domain,
+      redirect_to: authUrl,
+      skip_http_redirect: true,
+    });
+
+    const idpUrl = response?.data?.url;
+
+    if (idpUrl) {
+      // Redirect to the Identity Provider login page
+      window.location.href = idpUrl;
+      return;
+    }
+
+    return Promise.reject({
+      code: GoTrueErrorCode.UNKNOWN,
+      message: 'No SSO redirect URL returned',
+    });
+  } catch (e: unknown) {
+    const err = e as AxiosErrorLike;
+    const errorMessage = err.response?.data?.message || err.response?.data?.msg || err.message || 'SSO login failed';
+
+    return Promise.reject({
+      code: err.response?.status || GoTrueErrorCode.UNKNOWN,
+      message: errorMessage,
+    });
+  }
+}
diff --git a/src/application/services/js-services/index.ts b/src/application/services/js-services/index.ts
@@ -357,6 +357,11 @@ export class AFClientService implements AFService {
     return APIService.signInDiscord(AUTH_CALLBACK_URL);
   }
 
+  @withSignIn()
+  async signInSaml({ domain }: { redirectTo: string; domain: string }): Promise<void> {
+    return APIService.signInSaml(AUTH_CALLBACK_URL, domain);
+  }
+
   async getAuthProviders() {
     return APIService.getAuthProviders();
   }
diff --git a/src/application/services/services.type.ts b/src/application/services/services.type.ts
@@ -144,6 +144,7 @@ export interface AppService {
   signInGithub: (params: { redirectTo: string }) => Promise<void>;
   signInDiscord: (params: { redirectTo: string }) => Promise<void>;
   signInApple: (params: { redirectTo: string }) => Promise<void>;
+  signInSaml: (params: { redirectTo: string; domain: string }) => Promise<void>;
   getAuthProviders: () => Promise<AuthProvider[]>;
   getWorkspaces: () => Promise<Workspace[]>;
   getWorkspaceFolder: (workspaceId: string) => Promise<FolderView>;
diff --git a/src/assets/login/saml.svg b/src/assets/login/saml.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+</svg>
diff --git a/src/components/login/LoginProvider.tsx b/src/components/login/LoginProvider.tsx
@@ -1,13 +1,15 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AuthProvider } from '@/application/types';
 import { ReactComponent as AppleSvg } from '@/assets/login/apple.svg';
 import { ReactComponent as DiscordSvg } from '@/assets/login/discord.svg';
 import { ReactComponent as GithubSvg } from '@/assets/login/github.svg';
 import { ReactComponent as GoogleSvg } from '@/assets/login/google.svg';
+import { ReactComponent as SamlSvg } from '@/assets/login/saml.svg';
 import { notify } from '@/components/_shared/notify';
+import SamlLoginDialog from '@/components/login/SamlLoginDialog';
 import { AFConfigContext } from '@/components/main/app.hooks';
 import { Button } from '@/components/ui/button';
 
@@ -43,6 +45,9 @@ function LoginProvider({
   const [expand, setExpand] = React.useState(false);
   const service = useContext(AFConfigContext)?.service;
 
+  // SAML SSO dialog state
+  const [samlDialogOpen, setSamlDialogOpen] = useState(false);
+
   const allOptions = useMemo(
     () => [
       {
@@ -65,6 +70,11 @@ function LoginProvider({
         value: AuthProvider.DISCORD,
         Icon: DiscordSvg,
       },
+      {
+        label: t('web.continueWithSaml'),
+        value: AuthProvider.SAML,
+        Icon: SamlSvg,
+      },
     ],
     [t]
   );
@@ -74,6 +84,14 @@ function LoginProvider({
     return allOptions.filter((option) => availableProviders.includes(option.value));
   }, [allOptions, availableProviders]);
 
+  // Handle SAML SSO login with email domain
+  const handleSamlSubmit = useCallback(
+    async (domain: string) => {
+      await service?.signInSaml({ redirectTo, domain });
+    },
+    [service, redirectTo]
+  );
+
   const handleClick = useCallback(
     async (option: AuthProvider) => {
       try {
@@ -90,6 +108,10 @@ function LoginProvider({
           case AuthProvider.DISCORD:
             await service?.signInDiscord({ redirectTo });
             break;
+          case AuthProvider.SAML:
+            // Open SAML dialog to get user's email for domain identification
+            setSamlDialogOpen(true);
+            return;
         }
       } catch (e) {
         notify.error(t('web.signInError'));
@@ -180,6 +202,12 @@ function LoginProvider({
           </motion.div>
         )}
       </AnimatePresence>
+
+      <SamlLoginDialog
+        open={samlDialogOpen}
+        onOpenChange={setSamlDialogOpen}
+        onSubmit={handleSamlSubmit}
+      />
     </div>
   );
 }
diff --git a/src/components/login/SamlLoginDialog.tsx b/src/components/login/SamlLoginDialog.tsx
@@ -0,0 +1,149 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+
+// Email validation regex - checks for valid email format
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface SamlLoginDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (domain: string) => Promise<void>;
+}
+
+function SamlLoginDialog({ open, onOpenChange, onSubmit }: SamlLoginDialogProps) {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const resetState = useCallback(() => {
+    setEmail('');
+    setError(null);
+    setLoading(false);
+  }, []);
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      onOpenChange(newOpen);
+
+      if (!newOpen) {
+        resetState();
+      }
+    },
+    [onOpenChange, resetState]
+  );
+
+  const validateEmail = useCallback(
+    (emailValue: string): string | null => {
+      if (!emailValue.trim()) {
+        return t('web.emailRequired');
+      }
+
+      if (!EMAIL_REGEX.test(emailValue)) {
+        return t('web.invalidEmail');
+      }
+
+      return null;
+    },
+    [t]
+  );
+
+  const handleSubmit = useCallback(async () => {
+    const validationError = validateEmail(email);
+
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    // Extract domain from email
+    const domain = email.split('@')[1];
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      await onSubmit(domain);
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+
+      setError(err?.message || t('web.signInError'));
+    } finally {
+      setLoading(false);
+    }
+  }, [email, validateEmail, onSubmit, t]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !loading) {
+        void handleSubmit();
+      }
+    },
+    [handleSubmit, loading]
+  );
+
+  const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    setError(null);
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('web.ssoLogin')}</DialogTitle>
+          <DialogDescription id="saml-dialog-description">
+            {t('web.ssoLoginDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 py-4">
+          <Input
+            type="email"
+            placeholder={t('web.emailPlaceholder')}
+            value={email}
+            onChange={handleEmailChange}
+            onKeyDown={handleKeyDown}
+            disabled={loading}
+            aria-label={t('web.emailPlaceholder')}
+            aria-describedby="saml-dialog-description"
+            aria-invalid={!!error}
+            autoFocus
+          />
+          {error && (
+            <p className="text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          )}
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={loading}
+          >
+            {t('button.cancel')}
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={loading || !email.trim()}
+          >
+            {loading ? t('web.signingIn') : t('web.continueWithSso')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default SamlLoginDialog;

Original file line number	Diff line number	Diff line change
`@@ -357,6 +357,11 @@ export class AFClientService implements AFService {`
`357`	`357`	`return APIService.signInDiscord(AUTH_CALLBACK_URL);`
`358`	`358`	`}`
`359`	`359`
	`360`	`+ @withSignIn()`
	`361`	`+ async signInSaml({ domain }: { redirectTo: string; domain: string }): Promise<void> {`
	`362`	`+ return APIService.signInSaml(AUTH_CALLBACK_URL, domain);`
	`363`	`+ }`
	`364`	`+`
`360`	`365`	`async getAuthProviders() {`
`361`	`366`	`return APIService.getAuthProviders();`
`362`	`367`	`}`