docs: SSO images

packages/noco-docs/docs/140.account-settings/040.authentication/030.SAML-SSO/010.okta.md

@@ -7,33 +7,47 @@ keywords: ['SSO', 'Okta', 'SAML', 'Authentication', 'Identity Provider']
 
 This article briefs about the steps to configure Okta as Identity service provider for NocoDB
 
-1. Enable `SAML SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `SAML` toggle button
-2. Retrieve `Redirect URI` & `Audience URI` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`  
-    - Note down `Redirect URI` & `Audience URI`; these information will be required to be configured later with the Identity Provider
-3. Sign in to your [Okta account](https://www.okta.com/) and navigate to the "Get started with Okta" page. 
+### NocoDB, Retrieve `SAML SSO` Configuration details
+1. Go to `Account Settings` 
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL` & `Audience / Entity ID`; these information will be required to be configured later with the Identity Provider  
+  
+![SAML SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-2.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-3.png)
+
+
+### Okta, Configure NocoDB as an Application
+1. Sign in to your [Okta account](https://www.okta.com/) and navigate to the "Get started with Okta" page. 
    - Click on `Add App` for the Single Sign-On option.
    - On the `Browse App Integration Catalog` page, select `Create New App`
-4. In the pop-up with title `Create a new app integration` choose `SAML 2.0` as the Sign-in method
-5. On the `Create SAML Integration` page, in the General settings - provide a name for your app
-6. In the `Configure SAML` section:
+2. In the pop-up with title `Create a new app integration` choose `SAML 2.0` as the Sign-in method
+3. On the `Create SAML Integration` page, in the General settings - provide a name for your app
+4. In the `Configure SAML` section:
    - Enter the Redirect URL in the Single sign-on URL field.
    - Add the Audience URI in the Audience URI (Entity ID) field.
    - Choose `Email Address` from the Name ID format options.
    - Select `Email` from the Application user-name options.
-7. Complete any additional information in the final step (*Optional*) and click `Finish`
-8. On your application's homepage, 
+5. Complete any additional information in the final step (*Optional*) and click `Finish`
+6. On your application's homepage, 
    - Navigate to the `Sign-on` tab 
    - Copy the `Metadata URL` from the SAML 2.0 section
-9. Go to the `Assignments` tab and click `Assign` to assign people or groups to this application.
-10. Configure `Metadata URL` in NocoDB
-   - Go to `Account Settings` > `Authentication` > `SAML`
-   - Insert `Metadata URL` retrieved in step (8) above; alternatively you can configure XML directly as well
-   - `Save`
+7. Go to the `Assignments` tab and click `Assign` to assign people or groups to this application.
+
+
+### NocoDB, Configure Okta as an Identity Provider
+1. Go to `Account Settings` > `Authentication (SSO)` > `SAML`
+2. On the "Register SAML Identity Provider" modal, insert `Metadata URL` retrieved in step above; alternatively you can configure XML directly as well
+3. `Save`  
+  
+![SAML SSO Configuration](/img/v2/account-settings/SAML-4.png)
+
+For Sign-in's, user should be able to now see `Sign in with <SSO>` option.  
+  
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
 
-For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option

packages/noco-docs/docs/140.account-settings/040.authentication/030.SAML-SSO/020.auth0.md

@@ -7,31 +7,44 @@ keywords: ['SSO', 'Auth0', 'SAML', 'Authentication', 'Identity Provider']
 
 This article briefs about the steps to configure Auth0 as Identity service provider for NocoDB
 
-1. Enable `SAML SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `SAML` toggle button
-2. Retrieve `Redirect URI` & `Audience URI` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`
-    - Note down `Redirect URI` & `Audience URI`; these information will be required to be configured later with the Identity Provider
-3. Access your [Auth0 account](https://auth0.com/)  
+### NocoDB, Retrieve `SAML SSO` Configuration details
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL` & `Audience / Entity ID`; these information will be required to be configured later with the Identity Provider
+
+![SAML SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-2.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-3.png)
+
+
+### Auth0, Configure NocoDB as an Application
+1. Access your [Auth0 account](https://auth0.com/)  
     - navigate to `Applications` > `Create Application`.
-4. In the `Create Application` modal, 
+2. In the `Create Application` modal, 
     - choose `Regular Web Application` 
     - click `Create`
-5. Upon successful creation, you will be directed to the `Quick Start` screen. 
+3. Upon successful creation, you will be directed to the `Quick Start` screen. 
     - Go to the `Settings` tab.
-    - Paste `Redirect URI` copied in step (2) above into `Allowed Callback URLs` field
+    - Paste `Redirect URI` copied in step above into `Allowed Callback URLs` field
     - `Save`
-6. Still on the `Settings` tab, 
+4. Still on the `Settings` tab, 
     - move to `Advanced Settings` > `Endpoints` > `SAML` section, 
     - copy the SAML `Metadata URL` 
-7. Configure `Metadata URL` in NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`
-    - Insert `Metadata URL` retrieved in step (6) above; alternatively you can configure XML directly as well
-    - `Save`
+
+
+### NocoDB, Configure Auth0 as an Identity Provider
+1. Go to `Account Settings` > `Authentication` > `SAML`
+2. Insert `Metadata URL` retrieved in step above; alternatively you can configure XML directly as well
+3. `Save`
+
+![SAML SSO Configuration](/img/v2/account-settings/SAML-4.png)
 
 For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option
 :::

packages/noco-docs/docs/140.account-settings/040.authentication/030.SAML-SSO/030.ping-identity.md

@@ -7,40 +7,53 @@ keywords: ['SSO', 'Ping Identity', 'SAML', 'Authentication', 'Identity Provider'
 
 This article briefs about the steps to configure Auth0 as Identity service provider for NocoDB
 
-1. Enable `SAML SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `SAML` toggle button
-2. Retrieve `Redirect URI` & `Audience URI` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`
-    - Note down `Redirect URI` & `Audience URI`; these information will be required to be configured later with the Identity Provider
-3. Access your [PingOne account](https://www.pingidentity.com/en/account/sign-on.html) and navigate to the homepage.
-4. Click on `Add Environment` from the top right corner.
-5. On the `Create Environment` screen, 
+### NocoDB, Retrieve `SAML SSO` Configuration details
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL` & `Audience / Entity ID`; these information will be required to be configured later with the Identity Provider
+
+![SAML SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-2.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-3.png)
+
+
+### Ping Identity, Configure NocoDB as an Application
+1. Access your [PingOne account](https://www.pingidentity.com/en/account/sign-on.html) and navigate to the homepage.
+2. Click on `Add Environment` from the top right corner.
+3. On the `Create Environment` screen, 
    - Opt for `Build your own solution`
    - In the `Select solution(s) for your Environment` section, select `PingOne SSO` from `Cloud Services` 
    - Click `Next`
    - Provide a name and description for the environment, 
    - Click `Next`
-6. Access the newly created environment and go to `Connections` > `Applications` from the sidebar.
-7. Within the Applications homepage, initiate the creation of a new application by clicking the "+" icon.
-8. On the "Add Application" panel:
+4. Access the newly created environment and go to `Connections` > `Applications` from the sidebar.
+5. Within the Applications homepage, initiate the creation of a new application by clicking the "+" icon.
+6. On the "Add Application" panel:
    - Input the application name and description.
    - Choose "SAML Application" as the Application Type and click "Configure."
    - Within the SAML Configuration panel, opt for "Manually Enter."
    - Populate the `ACS URLs` field with the `Redirect URL` retrieved from step (2) above
    - Insert the `Audience URI` retrieved above in step (2) in the `Entity ID` field
    - `Save`
-9. In your application, 
+7. In your application, 
    - Navigate to the `Configurations` tab
    - Copy the `IDP Metadata URL`
-10. On your application panel, activate user access to the application by toggling the switch in the top right corner.
-11. Configure `Metadata URL` in NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`
-    - Insert `Metadata URL` retrieved in step (9) above; alternatively you can configure XML directly as well
-    - `Save`
+8. On your application panel, activate user access to the application by toggling the switch in the top right corner.
+
+
+### NocoDB, Configure Ping Identity as an Identity Provider
+1. Go to `Account Settings` > `Authentication` > `SAML`
+2. Insert `Metadata URL` retrieved in step above; alternatively you can configure XML directly as well
+3. `Save`
+
+![SAML SSO Configuration](/img/v2/account-settings/SAML-4.png)
 
 For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option
 :::

packages/noco-docs/docs/140.account-settings/040.authentication/030.SAML-SSO/040.azure-ad.md

@@ -7,25 +7,32 @@ keywords: ['SSO', 'Active Directory', 'SAML', 'Authentication', 'Identity Provid
 
 This article briefs about the steps to configure Active Directory as Identity service provider for NocoDB
 
-1. Enable `SAML SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `SAML` toggle button
-2. Retrieve `Redirect URI` & `Audience URI` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`
-    - Note down `Redirect URI` & `Audience URI`; these information will be required to be configured later with the Identity Provider
-3. Sign in to your [Azure account](https://portal.azure.com/#allservices) and navigate to `Azure Active Directory` under `Azure Services`.
-4. Access `Manage Tenants` from the navigation bar, select your directory, and click `Switch`.
-5. On your directory's homepage, click `+ Add` > `Enterprise Application` from the navigation bar.
-6. On the `Browse AD Azure Gallery` page, select `Create your own application` from the navigation bar.
+### NocoDB, Retrieve `SAML SSO` Configuration details
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL` & `Audience / Entity ID`; these information will be required to be configured later with the Identity Provider
+
+![SAML SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-2.png)
+![SAML SSO Configuration](/img/v2/account-settings/SAML-3.png)
+
+
+### Azure AD, Configure NocoDB as an Application
+1. Sign in to your [Azure account](https://portal.azure.com/#allservices) and navigate to `Azure Active Directory` under `Azure Services`.
+2. Access `Manage Tenants` from the navigation bar, select your directory, and click `Switch`.
+3. On your directory's homepage, click `+ Add` > `Enterprise Application` from the navigation bar.
+4. On the `Browse AD Azure Gallery` page, select `Create your own application` from the navigation bar.
    a. Provide your application's name.
    b. Choose `Integrate any other application you don't find in the gallery (Non-gallery)` from the `What are you looking to do with your application?` options.
    c. `Create`
-7. In your Application's Overview page, navigate to `Set up single sign-on` > `SAML`
-8. In the SAML-based Sign-on page, go to the `Basic SAML Configuration` section under `Set up Single Sign-On with SAML` and click `Edit`
+5. In your Application's Overview page, navigate to `Set up single sign-on` > `SAML`
+6. In the SAML-based Sign-on page, go to the `Basic SAML Configuration` section under `Set up Single Sign-On with SAML` and click `Edit`
    a. Add the `Audience URI` under `Identifier (Entity ID)`.
    b. Add the `Redirect URL` under `Replay URL (Assertion Consumer Service URL)`.
    c. `Save`
-9. In the `Attributes & Claims` section, click `Edit`
+7. In the `Attributes & Claims` section, click `Edit`
    a. Edit the Unique User Identifier (Name ID) claim:
         - Select `Email address` from the `Name identifier format` dropdown
         - Choose `Attribute` as the `Source`
@@ -35,17 +42,23 @@ This article briefs about the steps to configure Active Directory as Identity se
         - Click Add new claim, provide details, and save.
         - Ensure the claim is visible in the Additional claims section.
         - Copy the claim name for later use in NocoDB SAML configurations.
-10. Go to the `SAML Certificates` section and copy the `App Federation Metadata URL`
-11. on the Application's Overview page, 
+8. Go to the `SAML Certificates` section and copy the `App Federation Metadata URL`
+9. on the Application's Overview page, 
     - Click `Assign users and groups`, 
     - Add the necessary users or groups to the application.
-12. Configure `Metadata URL` in NocoDB
-    - Go to `Account Settings` > `Authentication` > `SAML`
-    - Insert `Metadata URL` retrieved in step (10) above as `App Federation Metadata URL`; alternatively you can configure XML directly as well
-    - `Save`
+
+
+### NocoDB, Configure Azure AD as an Identity Provider
+1. Go to `Account Settings` > `Authentication` > `SAML`
+2. Insert `Metadata URL` retrieved in step above; alternatively you can configure XML directly as well
+3. `Save`
+
+![SAML SSO Configuration](/img/v2/account-settings/SAML-4.png)
 
 For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option
 :::

packages/noco-docs/docs/140.account-settings/040.authentication/040.OIDC-SSO/010.okta.md

@@ -7,33 +7,41 @@ keywords: ['SSO', 'Okta', 'OIDC', 'Authentication', 'Identity Provider']
 
 This article briefs about the steps to configure Okta as Identity service provider for NocoDB
 
-1. Enable `OIDC SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `OIDC` toggle button
-2. Retrieve `Redirect URL` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `OIDC`
-    - Note down `Redirect URL` ; these information will be required to be configured later with the Identity Provider
-3. Sign in to your [Okta account](https://www.okta.com/) and navigate to the "Get started with Okta" page.
+### NocoDB, Retrieve `Redirect URL` 
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL`; this information will be required to be configured later with the Identity Provider  
+  
+![OIDC SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-2.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-3.png)
+
+### Okta, Configure NocoDB as an Application
+1. Sign in to your [Okta account](https://www.okta.com/) and navigate to the "Get started with Okta" page.
     - Click on `Add App` for the Single Sign-On option.
     - On the `Browse App Integration Catalog` page, select `Create New App`
-4. In the pop-up with title `Create a new app integration` 
+2. In the pop-up with title `Create a new app integration` 
     - Choose `OIDC - OpenID Connect` as the Sign-in method
     - Choose `Web Application` as the Application type
-5. Go to `General Settings` on the `New Web App Integration` page
+3. Go to `General Settings` on the `New Web App Integration` page
     - Provide your application's name.
     - From the Options in the `Grant type allowed` section, select `Authorization Code` and `Refresh Token`
     - Add the `Redirect URL` under `Sign-in redirect URIs`.
     - From the `Assignments section`, select an option from `Controlled access` to set up the desired accessibility configuration for this application.
     - `Save` 
-6. On your new application,
+4. On your new application,
     - Go to the `General` tab
     - Copy the `Client ID` and `Client Secret` from the `Client Credentials` section.
-7. From `Account` dropdown in navigation bar
+5. From `Account` dropdown in navigation bar
     - Copy `Okta Domain`
-8. Append "./well-known/openid-configuration" to the `Okta Domain` URL & access it
+6. Append "./well-known/openid-configuration" to the `Okta Domain` URL & access it
     - Example: https://dev-123456.okta.com/.well-known/openid-configuration
     - Copy `authorization_endpoint`, `token_endpoint`, `userinfo_endpoint` & `jwks_uri` from the JSON response
-9. In NocoDB, open `Account Settings` > `Authentication` > `OIDC`
+
+### NocoDB, Configure Okta as an Identity Provider
+In NocoDB, open `Account Settings` > `Authentication` > `OIDC`. On the "Register OIDC Identity Provider" modal, insert the following information:
     - Insert `Client ID` retrieved in step (6) above as `Client ID`
     - Insert `Client Secret` retrieved in step (6) above as `Client Secret`
     - Insert `authorization_endpoint` retrieved in step (8) above as `Authorization URL`
@@ -41,10 +49,13 @@ This article briefs about the steps to configure Okta as Identity service provid
     - Insert `userinfo_endpoint` retrieved in step (8) above as `Userinfo URL`
     - Insert `jwks_uri` retrieved in step (8) above as `JWK Set URL`
     - Set `Scope` as `openid` `profile` `email` `offline_access`
-10. In the Username Attribute field, indicate the name of the claim that represents the user's email. The default value is set to "email."
+    - In the Username Attribute field, indicate the name of the claim that represents the user's email. The default value is set to "email."
 
 For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
+
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option
 :::

packages/noco-docs/docs/140.account-settings/040.authentication/040.OIDC-SSO/020.auth0.md

@@ -7,25 +7,34 @@ keywords: ['SSO', 'Auth0', 'OIDC', 'Authentication', 'Identity Provider']
 
 This article briefs about the steps to configure Auth0 as Identity service provider for NocoDB
 
-1. Enable `OIDC SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `OIDC` toggle button
-2. Retrieve `Redirect URL` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `OIDC`
-    - Note down `Redirect URL` ; these information will be required to be configured later with the Identity Provider
-3. Access your [Auth0 account](https://auth0.com/)
+### NocoDB, Retrieve `Redirect URL`
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL`; this information will be required to be configured later with the Identity Provider
+
+![OIDC SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-2.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-3.png)
+
+
+### Auth0, Configure NocoDB as an Application
+1. Access your [Auth0 account](https://auth0.com/)
     - navigate to `Applications` > `Create Application`.
-4. In the `Create Application` modal,
+2. In the `Create Application` modal,
     - choose `Regular Web Application`
     - click `Create`
-5. On Quick start screen, go to `Settings` tab
+3. On Quick start screen, go to `Settings` tab
     - Copy the `Client ID` and `Client Secret` from the `Basic Information` section.
-6. Goto `Application URIs` section
+4. Goto `Application URIs` section
     - Add the `Redirect URL` copied from step(2) under `Allowed Callback URLs`.
     - `Save Changes`
-7. On the `Settings` tab, go to the `Advanced Settings` section and click on the `Endpoints` tab.
+5. On the `Settings` tab, go to the `Advanced Settings` section and click on the `Endpoints` tab.
     - Copy the `OAuth Authorization URL`, `OAuth Token URL`, `OAuth User Info URL` & `JSON Web Key Set URL`
-8. In NocoDB, open `Account Settings` > `Authentication` > `OIDC`
+
+### NocoDB, Configure Auth0 as an Identity Provider
+1. In NocoDB, open `Account Settings` > `Authentication` > `OIDC`. On the "Register OIDC Identity Provider" modal, insert the following information:
     - Insert `Client ID` retrieved in step (5) above as `Client ID`
     - Insert `Client Secret` retrieved in step (5) above as `Client Secret`
     - Insert `OAuth Authorization URL` retrieved in step (7) above as `Authorization URL`
@@ -33,10 +42,13 @@ This article briefs about the steps to configure Auth0 as Identity service provi
     - Insert `OAuth User Info URL` retrieved in step (7) above as `Userinfo URL`
     - Insert `JSON Web Key Set URL` retrieved in step (7) above as `JWK Set URL`
     - Set `Scope` as `openid` `profile` `email` `offline_access`
-9. In the Username Attribute field, indicate the name of the claim that represents the user's email. The default value is set to "email."
+    - In the Username Attribute field, indicate the name of the claim that represents the user's email. The default value is set to "email."
 
 For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
+
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option
 :::

packages/noco-docs/docs/140.account-settings/040.authentication/040.OIDC-SSO/030.ping-identity.md

@@ -7,37 +7,47 @@ keywords: ['SSO', 'Ping Identity', 'OIDC', 'Authentication', 'Identity Provider'
 
 This article briefs about the steps to configure Ping Identity as Identity service provider for NocoDB
 
-1. Enable `OIDC SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `OIDC` toggle button
-2. Retrieve `Redirect URL` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `OIDC`
-    - Note down `Redirect URL` ; these information will be required to be configured later with the Identity Provider
-3. Access your [PingOne account](https://www.pingidentity.com/en/account/sign-on.html) and navigate to the homepage.
-4. Click on `Add Environment` from the top right corner.
-5. On the `Create Environment` screen,
+### NocoDB, Retrieve `Redirect URL`
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL`; this information will be required to be configured later with the Identity Provider
+
+![OIDC SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-2.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-3.png)
+
+
+### Ping Identity, Configure NocoDB as an Application
+1. Access your [PingOne account](https://www.pingidentity.com/en/account/sign-on.html) and navigate to the homepage.
+2. Click on `Add Environment` from the top right corner.
+3. On the `Create Environment` screen,
     - Opt for `Build your own solution`
     - In the `Select solution(s) for your Environment` section, select `PingOne SSO` from `Cloud Services`
     - Click `Next`
     - Provide a name and description for the environment,
     - Click `Next`
-6. Access the newly created environment and go to `Connections` > `Applications` from the sidebar.
-7. Within the Applications homepage, initiate the creation of a new application by clicking the "+" icon.
-8. On the "Add Application" panel:
+4. Access the newly created environment and go to `Connections` > `Applications` from the sidebar.
+5. Within the Applications homepage, initiate the creation of a new application by clicking the "+" icon.
+6. On the "Add Application" panel:
     - Input the application name and description.
     - Choose "OIDC Web App" as the Application Type and click "Configure"
-9. From your application, 
+7. From your application, 
     - Go to `Configurations` tab
     - Click on `Edit` button
     - Check `Refresh Token` option
     - Copy `Authorization URL`, `Token URL`, `Userinfo URL` & `JWK Set URL` from the `Endpoints` section
     - From `Generals` dropdown, copy `Client ID` & `Client Secret`
     - `Save`
-10. From `Resources` tab, 
+8. From `Resources` tab, 
     - Click `Edit`
     - Select `openid` `profile` `email` from `Scopes`
-11. Switch toggle button in the top right corner to `On` to activate the application. 
-12. In NocoDB, open `Account Settings` > `Authentication` > `OIDC`
+9. Switch toggle button in the top right corner to `On` to activate the application.
+
+
+### NocoDB, Configure Ping Identity as an Identity Provider
+1. In NocoDB, open `Account Settings` > `Authentication` > `OIDC`. On the "Register OIDC Identity Provider" modal, insert the following information:
     - Insert `Client ID` retrieved in step (9) above as `Client ID`
     - Insert `Client Secret` retrieved in step (9) above as `Client Secret`
     - Insert `Authorization URL` retrieved in step (9) above as `Authorization URL`
@@ -45,10 +55,13 @@ This article briefs about the steps to configure Ping Identity as Identity servi
     - Insert `Userinfo URL` retrieved in step (9) above as `Userinfo URL`
     - Insert `JWK Set URL` retrieved in step (9) above as `JWK Set URL`
     - Set `Scope` as `openid` `profile` `email` `offline_access`
-13. In the Username Attribute field, indicate the name of the claim that represents the user's email. The default value is set to "email."
+    - In the Username Attribute field, indicate the name of the claim that represents the user's email. The default value is set to "email."
 
 For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
 
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
+
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option
 :::

packages/noco-docs/docs/140.account-settings/040.authentication/040.OIDC-SSO/040.azure-ad.md

@@ -7,22 +7,29 @@ keywords: ['SSO', 'Azure AD', 'OIDC', 'Authentication', 'Identity Provider']
 
 This article briefs about the steps to configure Azure AD as Identity service provider for NocoDB
 
-1. Enable `OIDC SSO` on NocoDB
-    - Go to `Account Settings` > `Authentication`
-    - Activate `OIDC` toggle button
-2. Retrieve `Redirect URL` from NocoDB
-    - Go to `Account Settings` > `Authentication` > `OIDC`
-    - Note down `Redirect URL` ; these information will be required to be configured later with the Identity Provider
-3. Sign in to your [Azure account](https://portal.azure.com/#allservices) and navigate to `Azure Active Directory` under `Azure Services`.
-4. Access `Manage Tenants` from the navigation bar, select your directory, and click `Switch`.
-5. On your directory's homepage, click `+ Add` > `App Registration` from the navigation bar.
-6. On the `Register an application` page,
+### NocoDB, Retrieve `Redirect URL`
+1. Go to `Account Settings`
+2. Select `Authentication (SSO)`
+3. Click on `New Provider` button
+4. On the Popup modal, Specify a `Display name` for the provider; note that, this name will be used to display the provider on the login page
+5. Retrieve `Redirect URL`; this information will be required to be configured later with the Identity Provider
+
+![OIDC SSO Configuration](/img/v2/account-settings/SSO-1.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-2.png)
+![OIDC SSO Configuration](/img/v2/account-settings/OIDC-3.png)
+
+
+### Azure AD, Configure NocoDB as an Application
+1. Sign in to your [Azure account](https://portal.azure.com/#allservices) and navigate to `Azure Active Directory` under `Azure Services`.
+2. Access `Manage Tenants` from the navigation bar, select your directory, and click `Switch`.
+3. On your directory's homepage, click `+ Add` > `App Registration` from the navigation bar.
+4. On the `Register an application` page,
     - Provide your application's name.
     - Set `Accounts in this organizational directory only` as the `Supported account types`.
     - Choose `Web` as the Application type
     - Add the `Redirect URL` under `Redirect URIs`.
     - `Register`
-7. On your application's homepage, 
+5. On your application's homepage, 
     - Copy the `Application (client) ID`
     - Click `Add a certificate or secret` under `Client credentials` section
     - On `Certificates & secrets` page, go to `Client secrets` section
@@ -32,10 +39,10 @@ This article briefs about the steps to configure Azure AD as Identity service pr
         - Set expiration as required
         - `Add`
     - Copy the `Value` of the newly created secret
-8. On your application's homepage, 
+6. On your application's homepage, 
     - Go to `Endpoints` tab
     - Open `OpenID Connect metadata document` URL & copy `authorization_endpoint`, `token_endpoint`, `userinfo_endpoint` & `jwks_uri` from the JSON response
-9. Configuring scopes
+7. Configuring scopes
     - Go to `API permissions` tab
     - Click `Add a permission`
     - On `Request API permissions` page, 
@@ -45,7 +52,10 @@ This article briefs about the steps to configure Azure AD as Identity service pr
         - From `Users` dropdown, select `User.Read`
         - `Add permissions`
     - Click `Grant admin consent for this directory` from the `API permissions` page
-10. On NocoDB, open `Account Settings` > `Authentication` > `OIDC`
+
+
+### NocoDB, Configure Azure AD as an Identity Provider
+On NocoDB, open `Account Settings` > `Authentication` > `OIDC`. On the "Register OIDC Identity Provider" modal, insert the following information:
     - Insert `Application (client) ID` retrieved in step (7) above as `Client ID`
     - Insert `Value` of the newly created secret retrieved in step (7) above as `Client Secret`
     - Insert `authorization_endpoint` retrieved in step (8) above as `Authorization URL`
@@ -54,7 +64,10 @@ This article briefs about the steps to configure Azure AD as Identity service pr
     - Insert `jwks_uri` retrieved in step (8) above as `JWK Set URL`
     - Set `Scope` as `openid` `profile` `email` `offline_access`
 
-- For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
+For Sign-in's, user should be able to now see `Sign in with <SSO>` option.
+
+![SAML SSO Configuration](/img/v2/account-settings/SSO-SignIn.png)
+
 
 :::note
 Post sign-out, refresh page (for the first time) if you do not see `Sign in with <SSO>` option