Steps to configure Azure AD SSO using SPA with Public Client

Step 1: Register an Application in the Azure AD Portal

1. Log into the Azure Portal.
2. Navigate to Azure Active Directory > App registrations > New registration.
3. Enter the following details to create an application:
4. Name: <Application name>
5. Account types: Select single/multi-tenant account types.
6. Redirect URI: Select the platform as SPA from the dropdown.
7. Click Register.

Step 2: Configure Application for PKCE with SPA

1. After the application is registered, note the Application’s Client Id and Directory (Tenant Id).
2. Click the Redirect URIs link to navigate to the platform configurations page.
3. Click Add a platform and select Single-page-application under the Web applications.
4. Enter the redirect URI of the application. Example:
5. https://developer.apisec.ai/azureSPA.html
6. Click Configure and save the platform configurations.

Step 3: Enter the Homepage URL

1. Click Branding and properties under the Manage section.
2. Enter the Homepage URL:
3. https://{environment}.apisec.ai/?cid=client_id&tid=tenant_id
4. Example: https://developer.apisec.ai/?cid=ff81da46-e7af-4fd0-8777-000000000000&tid=00000000-708d-4303-8cdc-385dce520000
5. Click Save.

Step 4: Generate a Client Secret (Optional for SPA)

1. Under the Manage section, click Certificates & secrets.
2. Click New client secret.
3. Enter description and expiry.
4. Click Add.
5. Copy the Client Secret value.
6. Note: Generating client secret code is optional for SPA

Step 5: Create and Assign App Roles

1. Click App roles under the Manage section.
2. Enter a display name such as “Admin”.
3. Select Users/Groups under Allowed member types.
4. Enter Value and Description.
5. Check the box Do you want to enable this role?.
6. Click Apply.

Step 6: Assign Users/Groups with the Enterprise Application

1. Navigate to the Enterprise Application from the home page.
2. Search and select the application registered in Step 1.
3. Click Assign users and groups link on the Overview page.
4. Click Add user/group.
5. Select the users.
6. Select Roles & click Assign.

Step 6.2: Create & Assign Groups with the Application

1. Go to the Home Overview page.
2. Under Manage, click Groups.
3. Click New group & fill in the details:
4. Select Group type as Security.
5. Enter Group name.
6. Enter Membership type as Assigned.
7. In Members under the Users list, select the users & click Select.
8. Click Create to successfully add members to that specific group.

Step 7: Assign permissions for the group's resource

    **To assign GroupMember.Read.All permissions**
     - Go to Application registrations page & select the registered app.

     - Under manage click API Permissions.
     - Click Add a permission.
     - Under Microsoft APIs click Microsoft Graph.

     - Click Delegated permissions & search for GroupMember under Select permissions search field.
     - Expand GroupMember & check the GroupMember.Read.All box.
     - Click on Add permissions.

Step 8: Publish Application

1. Click Properties under the Manage section.
2. Click the toggle to enable Visible to users?.
3. Click Apply changes.

Step 9: Configure SSO in APIsec

1. Login to the APIsec application.
2. Click on Configuration from the APIsec dashboard.
3. Click on SSO and select SSO type as Azure from the dropdown.
4. Enter the secret code copied from Step 4.
5. Enter the Client Id and Tenant Id copied from Step 2.
6. Click the toggle to Activate.
7. Click Save.

Step 10: Confirm Login with SSO using OAuth2.0 - SPA

1. Launch the URL https://myapps.microsoft.com/ and select the registered application which redirects the user to the APIsec application dashboard.
2. Alternatively, the users may use the redirect link for the SP-initiated flow.