@stack-spot/auth-react 2.7.1 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.8.0](https://github.com/stack-spot/portal-auth-js/compare/auth-react@v2.7.1...auth-react@v2.8.0) (2025-04-28)
+
+
+### Features
+
+* two step login idp sso ([#98](https://github.com/stack-spot/portal-auth-js/issues/98)) ([1c6bd24](https://github.com/stack-spot/portal-auth-js/commit/1c6bd2429fd17bf869f834b8d813a1b5c4f332a2))
+
 ## [2.7.1](https://github.com/stack-spot/portal-auth-js/compare/auth-react@v2.7.0...auth-react@v2.7.1) (2025-04-25)
 
 

package/out/index.d.ts

@@ -1,31 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Session, ThirdPartyLoginParams, AuthConfig, ThirdPartyAuthType } from '@stack-spot/auth';
 
-type LoginType = 'sso' | 'idp';
-interface BaseData {
-    type: LoginType;
-}
-interface SSOData extends BaseData {
-    type: 'sso';
-    email: string;
-}
-interface IDPData extends BaseData {
-    type: 'idp';
-    provider: 'external-idp:github' | 'external-idp:google' | 'external-idp:microsoft';
-}
-type LoginData = SSOData | IDPData;
-type LoginProps = {
-    initialValue?: string;
-    onSubmit: (data: LoginData) => Promise<void>;
-    welcomeText?: string;
-    removeLoadingOnSuccess?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    banner?: React.ReactNode;
-    loginTypes?: LoginType[];
-};
-declare const Login: ({ onSubmit, initialValue, welcomeText, removeLoadingOnSuccess, className, style, banner, loginTypes }: LoginProps) => react_jsx_runtime.JSX.Element;
-
 interface SessionManagerConfig extends Pick<AuthConfig, 'accountUrl' | 'authUrl' | 'clientId' | 'defaultTenant' | 'retry' | 'retryDelay'> {
     /**
      * The URL to redirect to when the user logs out.
@@ -84,6 +59,30 @@ declare class SessionManager {
     getTrialEnabledProviders(): Promise<string[]>;
 }
 
+type LoginType = 'sso' | 'idp';
+interface BaseData {
+    type: LoginType;
+}
+interface SSOData extends BaseData {
+    type: 'sso';
+    email: string;
+}
+interface IDPData extends BaseData {
+    type: 'idp';
+    provider: 'external-idp:github' | 'external-idp:google' | 'external-idp:microsoft';
+}
+type LoginData = SSOData | IDPData;
+type LoginProps = {
+    initialValue?: string;
+    onSubmit: (data: LoginData) => Promise<void>;
+    welcomeText?: string;
+    removeLoadingOnSuccess?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    banner?: React.ReactNode;
+    loginTypes?: LoginType[];
+};
+
 type AuthStatus = 'unknown' | 'authenticated' | 'unauthenticated';
 interface Props {
     children: React.ReactElement;
@@ -97,4 +96,6 @@ declare const Authenticated: ({ children, onLogin, onSession, customLoginProps,
 
 declare function useSession(): Session | undefined;
 
+declare const Login: ({ onSubmit, initialValue, welcomeText, removeLoadingOnSuccess, className, style, banner, loginTypes }: LoginProps) => react_jsx_runtime.JSX.Element;
+
 export { Authenticated, Login, SessionManager, useSession };

package/out/index.js

@@ -8,9 +8,49 @@ require('@stack-spot/portal-theme/dist/theme.css');
 var portalTranslate = require('@stack-spot/portal-translate');
 var react = require('react');
 var ui = require('@citric/ui');
+var auth = require('@stack-spot/auth');
 var svg = require('@stack-spot/portal-components/svg');
 var styledComponents = require('styled-components');
-var auth = require('@stack-spot/auth');
+var lodash = require('lodash');
+require('@citric/icons');
+
+const dictionary = {
+  en: {
+    welcome: "Welcome to StackSpot",
+    loginWithEmail: "Log in with your email.",
+    loginWithSocialAccount: "Sign up or access your free trial with a social account",
+    label: "Corporate email",
+    placeholder: "email@company.com",
+    continue: "Continue",
+    or: "Or",
+    loginWith: "Sign in with $0",
+    emailNotAllowedTitle: "Your email is linked to an Enterprise account.",
+    emailNotAllowedSubtitle: "Please log in with your corporate email.",
+    socialLogin: "Login or register with a social account",
+    corporateLoginTitle: "Already have a StackSpot enterprise account?",
+    corporateLoginButton: "Login with enterprise account",
+    socialLoginTitle: "Do you want to access another way?",
+    emailNotFoundError: "We couldn't find an account for this email"
+  },
+  pt: {
+    welcome: "Boas vindas \xE0 StackSpot",
+    loginWithEmail: "Fa\xE7a login com seu e-mail.",
+    loginWithSocialAccount: "Cadastre-se ou acesse seu teste gratuito com uma conta social",
+    label: "Email corporativo",
+    placeholder: "email@empresa.com",
+    continue: "Continuar",
+    or: "Ou",
+    loginWith: "Entrar com $0",
+    emailNotAllowedTitle: '"Este e-mail est\xE1 vinculado a uma conta Enterprise.',
+    emailNotAllowedSubtitle: "Fa\xE7a login com seu email corporativo.",
+    socialLogin: "Entre ou cadastre-se com uma conta social",
+    corporateLoginTitle: "J\xE1 possui uma conta StackSpot Enterprise?",
+    corporateLoginButton: "Entrar na conta Enterprise",
+    socialLoginTitle: "Voc\xEA quer entrar de outro jeito?",
+    emailNotFoundError: "N\xE3o encontramos uma conta para este e-mail."
+  }
+};
+const useTranslation = () => portalTranslate.useTranslate(dictionary);
 
 const sessionKey$1 = `stk-session${portalComponents.getCookieDomain()}`;
 const sessionCookie = Object.freeze({
@@ -291,9 +331,14 @@ const useTrialProviders = ({ enabled = true }) => {
     (async () => {
       if (!SessionManager.instance || !enabled)
         return;
-      const providers = await SessionManager.instance.getTrialEnabledProviders();
-      setTrialProviders(providers);
-      setIsLoadingTrialProviders(false);
+      try {
+        const providers = await SessionManager.instance.getTrialEnabledProviders();
+        setTrialProviders(providers);
+        setIsLoadingTrialProviders(false);
+      } catch (error) {
+        console.error(error);
+        setIsLoadingTrialProviders(false);
+      }
     })();
   }, [SessionManager.instance]);
   return [trialProviders, isLoadingTrialProviders];
@@ -387,6 +432,73 @@ const Microsoft = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.js
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.8477 12.3994H19.8042V19.3559H12.8477V12.3994Z", fill: "#FFBA08" })
 ] })));
 
+const providerIcons = {
+  github: /* @__PURE__ */ jsxRuntime.jsx(Github, {}),
+  google: /* @__PURE__ */ jsxRuntime.jsx(Google, {}),
+  microsoft: /* @__PURE__ */ jsxRuntime.jsx(Microsoft, {})
+};
+const ButtonProvider = ({ provider, login, loading, disabled }) => {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    {
+      colorScheme: "light",
+      type: "button",
+      size: "md",
+      sx: { width: "100%" },
+      onClick: () => login("idp", provider),
+      disabled: loading || disabled,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingCircular, {}) : /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { alignItems: "center", style: { gap: "4px" }, children: [
+        providerIcons[provider],
+        portalTranslate.interpolate(t.loginWith, lodash.capitalize(provider))
+      ] })
+    }
+  ) });
+};
+const IDPLogin = ({ trialProviders, loading, loginProvider, onSubmit, onChangeMode }) => {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { flexDirection: "column", gap: true, children: trialProviders == null ? void 0 : trialProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonProvider,
+      {
+        provider,
+        login: onSubmit,
+        loading: loading && loginProvider === provider,
+        disabled: loading
+      },
+      provider
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "separator", children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "microtext1", colorScheme: "light.700", children: t.or }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { colorScheme: "light.700", align: "center", children: t.corporateLoginTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Button, { size: "md", disabled: loading, colorScheme: "light", onClick: () => onChangeMode("sso"), children: t.corporateLoginButton })
+  ] });
+};
+
+const lastLoginTypeKey = "lastLoginType";
+function getLastLoginType() {
+  const type = localStorage.getItem(lastLoginTypeKey);
+  if (type === "idp" || type === "sso")
+    return type;
+  return localStorage.getItem("guided-tour") ? "sso" : "idp";
+}
+function setLastLoginType(type) {
+  localStorage.setItem(lastLoginTypeKey, type);
+}
+
+const SSOLogin = ({ value, onChange, loading, disabled, hasProvider, onChangeMode }) => {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { flexDirection: "column", style: { gap: "4px", marginTop: "4px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Label, { htmlFor: "email", children: t.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Input, { id: "email", type: "email", name: "email", value, onChange: (e) => onChange(e.target.value), placeholder: t.placeholder }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { colorScheme: "primary", size: "md", style: { marginTop: "12px" }, disabled: disabled || loading, children: loading && !hasProvider ? /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingCircular, {}) : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: t.continue }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "separator", children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "microtext1", colorScheme: "light.700", children: t.or }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { colorScheme: "light.700", align: "center", children: t.socialLoginTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Button, { size: "md", disabled: loading, colorScheme: "light", onClick: () => onChangeMode("idp"), children: t.socialLogin })
+  ] });
+};
+
 const LoginBox = styledComponents.styled.form`
   display: flex;
   flex-direction: column;
@@ -422,39 +534,15 @@ const LoginBox = styledComponents.styled.form`
     line-height: 1.5rem;
   }
 `;
-const providerIcons = {
-  github: /* @__PURE__ */ jsxRuntime.jsx(Github, {}),
-  google: /* @__PURE__ */ jsxRuntime.jsx(Google, {}),
-  microsoft: /* @__PURE__ */ jsxRuntime.jsx(Microsoft, {})
-};
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-const ButtonProvider = ({ provider, login, loading }) => {
-  const t = portalTranslate.useTranslate(dictionary);
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { colorScheme: "light", type: "button", size: "md", sx: { width: "100%" }, onClick: () => login("idp", provider), disabled: loading, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingCircular, {}) : /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { alignItems: "center", style: { gap: "4px" }, children: [
-    providerIcons[provider],
-    portalTranslate.interpolate(t.loginWith, capitalize(provider))
-  ] }) }) });
-};
 const EmailNotAllowed = () => {
-  const t = portalTranslate.useTranslate(dictionary);
+  const t = useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { justifyContent: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "body2", children: t.emailNotAllowedTitle }),
     /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "body2", colorScheme: "light.700", children: t.emailNotAllowedSubtitle })
   ] }) });
 };
-const Login = ({
-  onSubmit,
-  initialValue = "",
-  welcomeText,
-  removeLoadingOnSuccess,
-  className,
-  style,
-  banner,
-  loginTypes = ["idp", "sso"]
-}) => {
-  const t = portalTranslate.useTranslate(dictionary);
+const Login = ({ onSubmit, initialValue = "", welcomeText, removeLoadingOnSuccess, className, style, banner, loginTypes = ["idp", "sso"] }) => {
+  const t = useTranslation();
   const [trialProviders, isLoadingTrialProviders] = useTrialProviders({ enabled: loginTypes.includes("idp") });
   const searchParams = new URLSearchParams(location.search);
   const [error, setError] = react.useState(searchParams.get("error_description") || searchParams.get("error") || "");
@@ -465,7 +553,10 @@ const Login = ({
   const [email, setEmail] = react.useState(initialValue || searchParams.get("email") || "");
   const disabled = !email.match(/\w+@\w+/);
   const idpLoginEnabled = loginTypes.includes("idp") && !!(trialProviders == null ? void 0 : trialProviders.length);
-  const ssoLoginEnabled = loginTypes.includes("sso");
+  const [mode, setMode] = react.useState();
+  react.useEffect(() => {
+    setMode(idpLoginEnabled ? getLastLoginType() : "sso");
+  }, [idpLoginEnabled]);
   react.useEffect(() => {
     if (!providerQueryParam)
       return;
@@ -480,13 +571,18 @@ const Login = ({
     provider !== loginProvider && setLoginProvider(provider);
     try {
       const data = type === "idp" && !!provider ? { type: "idp", provider: `external-idp:${provider}` } : { type: "sso", email };
+      setLastLoginType(data.type);
       await onSubmit(data);
       if (removeLoadingOnSuccess)
         setLoading(false);
     } catch (error2) {
       setLoading(false);
       setLoginProvider(void 0);
-      setError(error2.message || error2.toString());
+      if (error2 instanceof auth.AuthMethodUnavailable) {
+        setError(t.emailNotFoundError);
+      } else {
+        setError(error2.message || error2.toString());
+      }
     }
   }
   function submitForm(e) {
@@ -495,80 +591,47 @@ const Login = ({
       return;
     login("sso");
   }
+  if (isLoadingTrialProviders || !mode) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { alignContent: "center", justifyContent: "center", my: 5, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingCircular, {}),
+      " "
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(LoginBox, { onSubmit: submitForm, className, style, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(svg.MiniLogo, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { flexDirection: "column", alignItems: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "body1", weight: "medium", children: welcomeText || t.welcome }),
-          /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { appearance: "body2", colorScheme: "light.700", children: [
-            " ",
-            t.loginWithEmail
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "body2", colorScheme: "light.700", children: mode === "idp" ? t.loginWithSocialAccount : t.loginWithEmail })
         ] })
       ] }),
       errorCode && errorCode === "EMAIL_IS_NOT_ALLOWED" && /* @__PURE__ */ jsxRuntime.jsx(EmailNotAllowed, {}),
-      ssoLoginEnabled && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { flexDirection: "column", style: { gap: "4px", marginTop: "4px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Label, { htmlFor: "email", children: t.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Input, { type: "email", name: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: t.placeholder }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Button, { colorScheme: "primary", size: "md", style: { marginTop: "12px" }, disabled: disabled || loading, children: loading && !loginProvider ? /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingCircular, {}) : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: t.continue }) })
-      ] }) }),
-      isLoadingTrialProviders ? /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { alignContent: "center", justifyContent: "center", my: 5, children: [
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingCircular, {}),
-        " "
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        ssoLoginEnabled && idpLoginEnabled && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "separator", children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { appearance: "microtext1", colorScheme: "light.700", children: t.or }) }),
-        idpLoginEnabled && /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { flexDirection: "column", gap: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { colorScheme: "light.700", appearance: "body2", style: { textAlign: "center" }, mb: 4, children: t.trial }),
-          trialProviders == null ? void 0 : trialProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonProvider,
-            {
-              provider,
-              login,
-              loading: loading && loginProvider === provider
-            },
-            provider
-          ))
-        ] })
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { className: "error", children: [
-        t.error,
-        ": ",
-        error
-      ] })
+      mode === "sso" ? /* @__PURE__ */ jsxRuntime.jsx(
+        SSOLogin,
+        {
+          disabled,
+          loading,
+          hasProvider: !loginProvider,
+          value: email,
+          onChange: setEmail,
+          onChangeMode: setMode
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        IDPLogin,
+        {
+          loading,
+          loginProvider,
+          onSubmit: login,
+          trialProviders,
+          onChangeMode: setMode
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: "error", align: "center", children: error })
     ] }),
     banner ? /* @__PURE__ */ jsxRuntime.jsx(portalComponents.BannerWarning, { children: banner }) : null
   ] });
 };
-const dictionary = {
-  en: {
-    welcome: "Welcome to StackSpot",
-    loginWithEmail: "Log in with your email.",
-    label: "Corporate email",
-    placeholder: "email@company.com",
-    continue: "Continue",
-    or: "Or",
-    loginWith: "Sign in with $0",
-    error: "Error while attempting to login",
-    emailNotAllowedTitle: "Your email is linked to an Enterprise account.",
-    emailNotAllowedSubtitle: "Please log in with your corporate email.",
-    trial: "Access your trial account"
-  },
-  pt: {
-    welcome: "Bem vindo \xE0 StackSpot",
-    loginWithEmail: "Fa\xE7a login com seu e-mail.",
-    label: "Email corporativo",
-    placeholder: "email@empresa.com",
-    continue: "Continuar",
-    or: "Ou",
-    loginWith: "Entrar com $0",
-    error: "Erro ao fazer login",
-    emailNotAllowedTitle: '"Este e-mail est\xE1 vinculado a uma conta Enterprise.',
-    emailNotAllowedSubtitle: "Fa\xE7a login com seu email corporativo.",
-    trial: "Acesse sua conta de teste"
-  }
-};
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;