Optimize SAML SSO configuration flow, add docs for Azure AD SAML

backend/src/ee/models/ssoConfig.ts

@@ -1,7 +1,8 @@
 import { Schema, Types, model } from "mongoose";
 
 export enum AuthProvider {
-    OKTA_SAML = "okta-saml"
+    OKTA_SAML = "okta-saml",
+    AZURE_SAML = "azure-saml"
 }
 
 export interface ISSOConfig {

backend/src/ee/services/EELicenseService.ts

@@ -66,7 +66,7 @@ class EELicenseService {
         customRateLimits: true,
         customAlerts: true,
         auditLogs: false,
-        samlSSO: true,
+        samlSSO: false,
         status: null,
         trial_end: null,
         has_used_trial: true

docs/documentation/platform/sso/azure.mdx

@@ -4,56 +4,81 @@ description: "Configure Azure SAML for Infisical SSO"
 ---
 
 1. In Infisical, head over to your organization Settings > Authentication > SAML SSO Configuration and select **Set up SAML SSO**.
-Next, copy the **ACS URL** and **Entity ID** to use when configuring the Okta SAML 2.0 application.
+   Next, copy the **Reply URL (Assertion Consumer Service URL)** and **Identifier (Entity ID)** to use when configuring the Azure SAML application.
 
-2. In the Azure Portal, navigate to the Azure Active Directory and select Enterprise applications. On this screen, select
-   the **+ New application** button.
+![Azure SAML initial configuration](../../../images/sso/azure/init-config.png)
 
-TODO: insert image.
+2. In the Azure Portal, navigate to the Azure Active Directory and select **Enterprise applications**. On this screen, select
+   **+ New application**.
+
+![Azure SAML enterprise applications](../../../images/sso/azure/enterprise-applications.png)
+
+![Azure SAML new application](../../../images/sso/azure/new-application.png)
 
 2. On the next screen, press the **+ Create your own application** button.
    Give the application a unique, Infisical-specific name; choose the "Integrate any other application you don't find in the gallery (Non-gallery)"
    option and hit the **Create** button.
 
-TODO: insert image
+![Azure SAML create own application](../../../images/sso/azure/create-own-application.png)
 
 3. On the application overview screen, select **Single sign-on** from the left sidebar. From there,
    select the **SAML** single sign-on method.
 
-4. Next, press the **Edit** button in the **Basic SAML Configuration** section and configure the following fields:
+![Azure SAML sign on method](../../../images/sso/azure/sso-method.png)
 
-- Identifier (Entity ID): https://app.infisical.com
-- Reply URL (Assertion Consumer Service URL): `https://app.infisical.com/api/v1/sso/saml2/:identifier`
+4. Next, select **Edit** in the **Basic SAML Configuration** section and add/set the **Identifier (Entity ID)**
+   to **Entity ID** and add/set the **Reply URL (Assertion Consumer Service URL)** to **ACS URL** from step 1.
+
+![Azure SAML edit basic configuration](../../../images/sso/azure/edit-basic-config.png)
+
+![Azure SAML edit basic configuration 2](../../../images/sso/azure/edit-basic-config-2.png)
 
 <Note>
   If you're self-hosting Infisical, then you will want to replace
   `https://app.infisical.com` with your own domain.
 </Note>
 
-5. Next, press the **Edit** button in the **Attributes & Claims** section.
-
-In the **Attributes && Claims** section, configure the following claims to map:
+5. Back in the **Set up Single Sign-On with SAML** screen, select **Edit** in the **Attributes & Claims** section and configure the following map:
 
 - `email -> user.userprinciplename`
 - `firstName -> user.firstName`
 - `lastName -> user.lastName`
 
-Once you've done that, head back to the **Set up Single Sign-On with SAML** screen.
+![Azure SAML edit attributes and claims](../../../images/sso/azure/edit-attributes-claims.png)
 
-6. Get IdP values:
+![Azure SAML edit attributes and claims 2](../../../images/sso/azure/edit-attributes-claims-2.png)
 
-Back in Infisical > Organization settings > Authentication, select **Set up SAML SSO** and paste your Infisical SAML SSO configuration details
-with the following map from the **Set up Single Sign-On with SAML** screen in Azure:
+6. Back in the **Set up Single Sign-On with SAML** screen, select **Edit** in the **SAML Certificates** section and set the **Signing Option** field to **Sign SAML response and assertion**.
 
-- `Audience -> Azure `
-- `Entrypoint -> X`
-- `Issuer -> X`
-- `Certificate -> X.509 Certificate from Azure`
+![Azure SAML edit certificate](../../../images/sso/azure/edit-saml-certificate.png)
+
+![Azure SAML edit certificate signing option](../../../images/sso/azure/edit-saml-certificate-2.png)
+
+7. Get IdP values:
+
+Back in the **Set up Single Sign-On with SAML** screen, copy the **Login URL**, **Azure AD Identifier** and **SAML Certificate** to use when finishing configuring Azure SAML in Infisical.
+
+Back in Infisical, set **Login URL** and **Azure AD Identifier** from above. Once you've done that, press **Update** to complete the required configuration.
+
+![Azure SAML identity provider values](../../../images/sso/azure/idp-values.png)
+![Azure SAML paste identity provider values](../../../images/sso/azure/idp-values-2.png)
+
+<Note>
+When pasting the certificate into Infisical, you'll want to retain `-----BEGIN
+  CERTIFICATE-----` and `-----END CERTIFICATE-----` at the first and last line
+  of the text area respectively.
+
+Having trouble?, try copying the X509 certificate information from the Federation Metadata XML file in Azure.
+
+</Note>
 
 7. Assignments
 
-Finally, navigate to the **Users and groups** tab and select the + button to assign access to the login with SSO application on a user or group-level.
+Finally, navigate to the **Users and groups** tab and select **+ Add user/group** to assign access to the login with SSO application on a user or group-level.
+![Azure SAML assignment](../../../images/sso/azure/assignment.png)
 
 8. Return to Infisical and enable SAML SSO.
 
 Enabling SAML SSO enforces all members in your organization to only be able to log into Infisical via Azure.
+
+![SAML Okta assignment](../../../images/sso/azure/enable-saml.png)

docs/documentation/platform/sso/jumpcloud.mdx

@@ -2,3 +2,5 @@
 title: "JumpCloud SAML"
 description: "Configure JumpCloud SAML for Infisical SSO"
 ---
+
+Coming soon.

docs/documentation/platform/sso/okta.mdx

@@ -4,32 +4,31 @@ description: "Configure Okta SAML 2.0 for Infisical SSO"
 ---
 
 Prerequisites:
+
 - Okta Developer Account with access to create custom application integrations.
 
-
 1. In Infisical, head over to your organization Settings > Authentication > SAML SSO Configuration and select **Set up SAML SSO**.
-Next, copy the **ACS URL** and **Entity ID** to use when configuring the Okta SAML 2.0 application.
+   Next, copy the **Single sign-on URL** and **Audience URI (SP Entity ID)** to use when configuring the Okta SAML 2.0 application.
 
-![SAML Okta Infisical initial configuration](../../../images/sso-okta-0.png)
+![Okta SAML initial configuration](../../../images/sso/okta/init-config.png)
 
 2. In the Okta Admin Portal, select Applications > Applications from the
    navigation. On the Applications screen, select the **Create App Integration**
    button.
 
-![SAML Okta create app integration](../../../images/sso-okta-1.png)
+![SAML Okta create app integration](../../../images/sso/okta/create-app-integration.png)
 
 3. In the Create a New Application Integration dialog, select the **SAML 2.0** radio button:
 
-![SAML Okta create SAML 2.0 integration](../../../images/sso-okta-2.png)
+![SAML Okta create SAML 2.0 integration](../../../images/sso/okta/create-saml-app.png)
 
 4. On the General Settings screen, give the application a unique name like Infisical and select **Next**.
 
-![SAML Okta create SAML 2.0 integration](../../../images/sso-okta-3.png)
+![SAML Okta create SAML 2.0 integration](../../../images/sso/okta/general-settings.png)
 
-5. On the Configure SAML screen, set the **Single sign-on URL** to **ACS URL** and **Audience URI (SP Entity ID)** to
-**Entity ID** from step 1.
+5. On the Configure SAML screen, set the **Single sign-on URL** and **Audience URI (SP Entity ID)** from step 1.
 
-![SAML Okta configure IdP fields](../../../images/sso-okta-4.png)
+![SAML Okta configure IdP fields](../../../images/sso/okta/configure-saml.png)
 
 <Note>
   If you're self-hosting Infisical, then you will want to replace
@@ -43,30 +42,30 @@ Next, copy the **ACS URL** and **Entity ID** to use when configuring the Okta SA
 - `firstName -> user.firstName`
 - `lastName -> user.lastName`
 
-![SAML Okta attribute statements](../../../images/sso-okta-5.png)
+![SAML Okta attribute statements](../../../images/sso/okta/attribute-statements.png)
 
-Once configured, select the **Next** button to proceed to the Feedback screen and select **Finish**.
+Once configured, select **Next** to proceed to the Feedback screen and select **Finish**.
 
 7. Get IdP values
 
 Once your application is created, select the **Sign On** tab for the app and select the **View Setup Instructions** button located on the right side of the screen:
 
-![SAML Okta view setup instructions](../../../images/sso-okta-6.png)
+![SAML Okta view setup instructions](../../../images/sso/okta/view-setup-instructions.png)
 
-Copy the **Identity Provider Single Sign-On URL**, the **Identity Provider Issuer**, and the **X.509 Certificate** to use when finishing configuring the Okta SAML in Infisical.
+Copy the **Identity Provider Single Sign-On URL**, the **Identity Provider Issuer**, and the **X.509 Certificate** to use when finishing configuring Okta SAML in Infisical.
 
-![SAML Okta IdP values](../../../images/sso-okta-7.png)
+![SAML Okta IdP values](../../../images/sso/okta/idp-values.png)
 
-Back in Infisical, set **Entrypoint** to **Identity Provider Single Sign-On URL**, **Issuer** to **Identity Provider Issuer**,
-and **Certificate** to **X.509 Certificate** from above. Once you've done that, press **Add** to complete the required configuration.
+Back in Infisical, set **Identity Provider Single Sign-On URL**, **Identity Provider Issuer**,
+and **Certificate** to **X.509 Certificate** from above. Once you've done that, press **Update** to complete the required configuration.
 
-![SAML Okta paste values into Infisical](../../../images/sso-okta-8.png)
+![SAML Okta paste values into Infisical](../../../images/sso/okta/idp-values-2.png)
 
 8. Finally, navigate to the **Assignments** tab and select **Assign**
 
 You can assign access to the application on a user-by-user basis using the Assign to People option, or in-bulk using the Assign to Groups option.
 
-![SAML Okta assignment](../../../images/sso-okta-9.png)
+![SAML Okta assignment](../../../images/sso/okta/assignment.png)
 
 At this point, you have configured everything you need within the context of the Okta Admin Portal.
 
@@ -74,4 +73,4 @@ At this point, you have configured everything you need within the context of the
 
 Enabling SAML SSO enforces all members in your organization to only be able to log into Infisical via Okta.
 
-![SAML Okta assignment](../../../images/sso-okta-10.png)
+![SAML Okta assignment](../../../images/sso/okta/enable-saml.png)

docs/documentation/platform/sso/overview.mdx

@@ -4,13 +4,15 @@ description: "Log in to Infisical via SSO protocols"
 ---
 
 <Warning>
-  Infisical currently only supports SAML SSO authentication with [Okta as the
-  identity provider (IdP)](https://www.okta.com/). We're expanding support for
-  other IdPs in the coming months, so stay tuned with this issue
-  [here](https://github.com/Infisical/infisical/issues/442).
+  Infisical currently only supports SAML SSO authentication with Okta and Azure
+  AD. We're expanding support for other IdPs in the coming months, so stay tuned
+  with this issue [here](https://github.com/Infisical/infisical/issues/442).
 </Warning>
 
 You can configure your organization in Infisical to have members authenticate with the platform via protocols like [SAML 2.0](https://en.wikipedia.org/wiki/SAML_2.0).
 
 To note, configuring SSO retains the end-to-end encrypted architecture of Infisical because we decouple the **authentication** and **decryption** steps. In all login with SSO implementations,
-your IdP cannot and will not have access to the decryption key needed to decrypt your secrets.
+your IdP cannot and will not have access to the decryption key needed to decrypt your secrets.
+
+- [Okta SAML](/documentation/platform/sso/okta)
+- [Azure SAML](/documentation/platform/sso/azure)

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

@@ -14,7 +14,8 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { SSOModal } from "./SSOModal";
 
 const ssoAuthProviderMap: { [key: string]: string } = {
-    "okta-saml": "Okta SAML 2.0"
+    "okta-saml": "Okta SAML",
+    "azure-saml": "Azure SAML"
 }
 
 export const OrgSSOSection = (): JSX.Element => {
@@ -77,8 +78,6 @@ export const OrgSSOSection = (): JSX.Element => {
         }
     }
     
-    console.log("getSSOConfig: ", data);
-    
     return (
         <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
             <div className="flex items-center mb-8">

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

@@ -20,15 +20,21 @@ import {
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+enum AuthProvider {
+    OKTA_SAML = "okta-saml",
+    AZURE_SAML = "azure-saml"
+}
+
 const ssoAuthProviders = [
-    { label: "Okta SAML 2.0", value: "okta-saml" }
+    { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
+    { label: "Azure SAML", value: AuthProvider.AZURE_SAML }
 ];
 
 const schema = yup.object({
     authProvider: yup.string().required("SSO Type is required"),
-    entryPoint: yup.string().required("IDP entrypoint is required"),
+    entryPoint: yup.string().required("IdP entrypoint is required"),
     issuer: yup.string().required("Issuer string is required"),
-    cert: yup.string().required("IDP's public signing certificate is required")
+    cert: yup.string().required("IdP's public signing certificate is required")
 }).required();
 
 export type AddSSOFormData = yup.InferType<typeof schema>;
@@ -57,7 +63,7 @@ export const SSOModal = ({
         watch,
     } = useForm<AddSSOFormData>({
         defaultValues: {
-            authProvider: "okta-saml"
+            authProvider: AuthProvider.OKTA_SAML
         },
         resolver: yupResolver(schema)
     });
@@ -117,6 +123,38 @@ export const SSOModal = ({
         }
     }
 
+    const renderLabels = (authProvider: string) => {
+        switch (authProvider){
+            case AuthProvider.OKTA_SAML:
+                return ({
+                    acsUrl: "Single sign-on URL",
+                    entityId: "Audience URI (SP Entity ID)",
+                    entryPoint: "Identity Provider Single Sign-On URL",
+                    entryPointPlaceholder: "https://your-domain.okta.com/app/app-name/xxx/sso/saml",
+                    issuer: "Identity Provider Issuer",
+                    issuerPlaceholder: "http://www.okta.com/xxx"
+                });
+            case AuthProvider.AZURE_SAML:
+                return ({
+                    acsUrl: "Reply URL (Assertion Consumer Service URL)",
+                    entityId: "Identifier (Entity ID)",
+                    entryPoint: "Login URL",
+                    entryPointPlaceholder: "https://login.microsoftonline.com/xxx/saml2",
+                    issuer: "Azure AD Identifier",
+                    issuerPlaceholder: "https://sts.windows.net/xxx/"
+                });
+            default:
+                return ({
+                    acsUrl: "ACS URL",
+                    entityId: "Entity ID",
+                    entryPoint: "Entrypoint",
+                    entryPointPlaceholder: "Enter entrypoint...",
+                    issuer: "Issuer",
+                    issuerPlaceholder: "Enter placeholder..."
+                });
+        }
+    }
+    
     const authProvider = watch("authProvider");
 
     return (
@@ -154,14 +192,14 @@ export const SSOModal = ({
                             </FormControl>
                         )}
                     />
-                    {authProvider && authProvider === "okta-saml" && data && (
+                    {authProvider && data && (
                         <>
                             <div className="mb-4">
-                                <h3 className="text-mineshaft-400 text-sm">ACS URL</h3>
+                                <h3 className="text-mineshaft-400 text-sm">{renderLabels(authProvider).acsUrl}</h3>
                                 <p className="text-gray-400 text-md break-all">{`${window.origin}/api/v1/sso/saml2/${data._id}`}</p>
                             </div>
                             <div className="mb-4">
-                                <h3 className="text-mineshaft-400 text-sm">Entity ID</h3>
+                                <h3 className="text-mineshaft-400 text-sm">{renderLabels(authProvider).entityId}</h3>
                                 <p className="text-gray-400 text-md">{window.origin}</p>
                             </div>
                             <Controller
@@ -169,13 +207,13 @@ export const SSOModal = ({
                                 name="entryPoint"
                                 render={({ field, fieldState: { error } }) => (
                                     <FormControl
-                                        label="Entrypoint"
+                                        label={renderLabels(authProvider).entryPoint}
                                         errorText={error?.message}
                                         isError={Boolean(error)}
                                     >
                                         <Input 
                                             {...field} 
-                                            placeholder="https://your-domain.okta.com/app/app-name/xxx/sso/saml"
+                                            placeholder={renderLabels(authProvider).entryPointPlaceholder}
                                         />
                                     </FormControl>
                                 )}
@@ -185,13 +223,13 @@ export const SSOModal = ({
                                 name="issuer"
                                 render={({ field, fieldState: { error } }) => (
                                     <FormControl
-                                        label="Issuer"
+                                        label={renderLabels(authProvider).issuer}
                                         errorText={error?.message}
                                         isError={Boolean(error)}
                                     >
                                         <Input 
                                             {...field} 
-                                            placeholder="http://www.okta.com/xxx"
+                                            placeholder={renderLabels(authProvider).issuerPlaceholder}
                                         />
                                     </FormControl>
                                 )}