Merge pull request #2264 from Infisical/misc/addressed-misleading-google-saml-setup

misc: addressed misleading docs and placeholder values for Google SAML

docs/documentation/platform/sso/google-saml.mdx

@@ -4,10 +4,10 @@ description: "Learn how to configure Google SAML for Infisical SSO."
 ---
 
 <Info>
-    Google SAML SSO feature is a paid feature.
+  Google SAML SSO feature is a paid feature. If you're using Infisical Cloud,
-   
+  then it is available under the **Pro Tier**. If you're self-hosting Infisical,
-    If you're using Infisical Cloud, then it is available under the **Pro Tier**. If you're self-hosting Infisical,
+  then you should contact [email protected] to purchase an enterprise license
-    then you should contact [email protected] to purchase an enterprise license to use it.
+  to use it.
 </Info>
 
 <Steps>
@@ -17,6 +17,7 @@ description: "Learn how to configure Google SAML for Infisical SSO."
         Next, note the **ACS URL** and **SP Entity ID** to use when configuring the Google SAML application.
 
         ![Google SAML initial configuration](../../../images/sso/google-saml/init-config.png)
+
    </Step>
    <Step title="Create a SAML application in Google">
         2.1. In your [Google Admin console](https://support.google.com/a/answer/182076), head to Menu > Apps > Web and mobile apps and
@@ -32,7 +33,7 @@ description: "Learn how to configure Google SAML for Infisical SSO."
         
         ![Google SAML custom app details](../../../images/sso/google-saml/custom-saml-app-config.png)
         
-        2.4. Back in Infisical, set **SSO URL**, **IdP Entity ID**, and **Certificate** to the corresponding items from step 2.3.
+        2.4. Back in Infisical, set **SSO URL** and **Certificate** to the corresponding items from step 2.3.
         
         ![Google SAML Infisical config](../../../images/sso/google-saml/infisical-config.png)
         
@@ -81,15 +82,18 @@ description: "Learn how to configure Google SAML for Infisical SSO."
             prior to enforcing SAML SSO to prevent any unintended issues.
         </Warning>
     </Step>
+
 </Steps>
 
 <Note>
-   If you're configuring SAML SSO on a self-hosted instance of Infisical, make sure to
+  If you're configuring SAML SSO on a self-hosted instance of Infisical, make
-   set the `AUTH_SECRET` and `SITE_URL` environment variable for it to work:
+  sure to set the `AUTH_SECRET` and `SITE_URL` environment variable for it to
-   
+  work: - `AUTH_SECRET`: A secret key used for signing and verifying JWT. This
-   - `AUTH_SECRET`: A secret key used for signing and verifying JWT. This can be a random 32-byte base64 string generated with `openssl rand -base64 32`.
+  can be a random 32-byte base64 string generated with `openssl rand -base64
-   - `SITE_URL`: The URL of your self-hosted instance of Infisical - should be an absolute URL including the protocol (e.g. https://app.infisical.com)
+  32`. - `SITE_URL`: The URL of your self-hosted instance of Infisical - should
+  be an absolute URL including the protocol (e.g. https://app.infisical.com)
 </Note>
 
 References:
+
 - Google's guide to [set up your own custom SAML app](https://support.google.com/a/answer/6087519?hl=en#add_custom_saml&turn_on&verify_sso&&zippy=%2Cstep-add-the-custom-saml-app%2Cstep-turn-on-your-saml-app%2Cstep-verify-that-sso-is-working-with-your-custom-app).

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -62,7 +62,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
   const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle();
   const { data } = useGetSSOConfig(currentOrg?.id ?? "");
 
-  const { control, handleSubmit, reset, watch } = useForm<AddSSOFormData>({
+  const { control, handleSubmit, reset, watch, setValue, getValues } = useForm<AddSSOFormData>({
     defaultValues: {
       authProvider: AuthProvider.OKTA_SAML
     },
@@ -188,8 +188,8 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
           entityId: "SP Entity ID",
           entryPoint: "SSO URL",
           entryPointPlaceholder: "https://accounts.google.com/o/saml2/idp?idpid=xxx",
-          issuer: "IdP Entity ID",
+          issuer: "Issuer",
-          issuerPlaceholder: "https://accounts.google.com/o/saml2/idp?idpid=xxx"
+          issuerPlaceholder: window.origin
         };
       default:
         return {
@@ -204,6 +204,11 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
   };
 
   const authProvider = watch("authProvider");
+  useEffect(() => {
+    if (authProvider === AuthProvider.GOOGLE_SAML && getValues("issuer") === "") {
+      setValue("issuer", window.origin);
+    }
+  }, [authProvider]);
 
   return (
     <>