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>
@@ -15,8 +15,9 @@ description: "Learn how to configure Google SAML for Infisical SSO."
         In Infisical, head to your Organization Settings > Authentication > SAML SSO Configuration and select **Set up SAML 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)
         
@@ -41,7 +42,7 @@ description: "Learn how to configure Google SAML for Infisical SSO."
         Also, check the **Signed response** checkbox.
 
         ![Google SAML app config 2](../../../images/sso/google-saml/custom-saml-app-config-2.png)
-        
+
         2.6. In the **Attribute mapping** tab, configure the following map:
 
         - **First name** -> **firstName**
@@ -49,7 +50,7 @@ description: "Learn how to configure Google SAML for Infisical SSO."
         - **Primary email** -> **email**
 
         ![Google SAML attribute mapping](../../../images/sso/google-saml/attribute-mapping.png)
-        
+
         Click **Finish**.
     </Step>
     <Step title="Assign users in Google Workspace to the application">
@@ -57,11 +58,11 @@ description: "Learn how to configure Google SAML for Infisical SSO."
         and press on **User access**.
 
         ![Google SAML user access](../../../images/sso/google-saml/user-access.png)
-        
+
         To assign everyone in your organization to the application, click **On for everyone** or **Off for everyone** and then click **Save**.
-        
+
         You can also assign an organizational unit or set of users to an application; you can learn more about that [here](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).
-        
+
         ![Google SAML user access assignment](../../../images/sso/google-saml/user-access-assign.png)
     </Step>
     <Step title="Enable SAML SSO in Infisical">
@@ -75,21 +76,24 @@ description: "Learn how to configure Google SAML for Infisical SSO."
 
         To enforce SAML SSO, you're required to test out the SAML connection by successfully authenticating at least one Google user with Infisical;
         Once you've completed this requirement, you can toggle the **Enforce SAML SSO** button to enforce SAML SSO.
-        
+
         <Warning>
             We recommend ensuring that your account is provisioned the application in Google
             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).
+
+- 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 (
     <>