# Microsoft Entra ID Configuration for Single-Page Applications

{% hint style="warning" %}
Azure Active Directory (Azure AD) has been renamed to **Microsoft Entra ID** (**ME-ID**). While the WorkflowGen documentation has been updated to reflect this name change, the WorkflowGen application settings still refer to Azure AD (for example, `Azure AD SCIM v2` directory connector). 

Likewise, certain ME-ID configuration items in the Azure portal have been renamed and/or moved. The WorkflowGen documentation has been updated accordingly, but still might not be completely accurate in this regard. See the [Microsoft Entra ID](https://learn.microsoft.com/en-us/entra/identity/) documentation for more information.
{% endhint %}

## Overview

This section provides instructions on how to configure Microsoft Entra ID (ME-ID) with a single-page application (SPA) so that users can authenticate through it and make requests to the WorkflowGen GraphQL API. This configuration is done in three steps: registering your SPA, granting access to the API, and setting some redirect URLs.

## Prerequisites

* Make sure to have a licensed copy of WorkflowGen installed and running on an IIS web server in **HTTPS** secure connection mode.
* Make sure to have administrative access to ME-ID to be able to configure it properly.
* Make sure to have provisioned an existing ME-ID user with which you can authenticate to WorkflowGen so that you can use the application afterwards.
* Make sure to have successfully configured delegated authentication to ME-ID on your WorkflowGen instance following the instructions in the [Microsoft Entra ID Authentication](https://docs.workflowgen.com/azure/7.22/azure-active-directory-authentication) section with the `WorkflowGen GraphQL API` application registered as well.

## Microsoft Entra ID configuration

### Step 1: Register a new web application

1. In the Azure portal, click **App registrations** in the **Azure services** section.<br>

2. Click **New registration**, and fill in the properties:
   * **Name:** `My SPA name`&#x20;
   * **Supported account type:** `Accounts in this organizational directory only (Default Directory only - Single tenant)` \
     ✏️ **Note:** Depending on the context, you should choose the right option for your use case for the supported account type.
   * **Redirect URI:**
     * **Platform:** `Web`&#x20;
     * **Value:** `https://<my spa login url>`

3. Click **Register** at the bottom of the page.

You've now successfully registered your application in ME-ID.

### **Step 2: Authorize the implicit grant flow on the SPA application registration**

1. Click **Authentication**.<br>
2. Go to the **Implicit grant and hybrid flows** section.<br>
3. Check the **Access tokens** and **ID tokens** checkboxes.<br>
4. Click **Save**.

### **Step 3: Grant access to WorkflowGen GraphQL API**

Now that you've successfully registered your SPA, you need to grant it access to the `WorkflowGen GraphQL API` application, which should be already registered if you've met the prerequisites.

1. Click **API permissions**.<br>

2. In the **Configured permissions** section, click **Add a permission**.<br>

3. Click **My APIs**, then select the `WorkflowGen GraphQL API` application in the list.<br>

4. Click **Delegated permissions** and check `default` under the **Permission** column.

5. Click **Add permissions**.<br>

6. On the **API permissions** page, click **Grant admin consent for \<your tenant name>**, then click **Yes**.

{% hint style="success" %}
You should now see `WorkflowGen GraphQL API` in the list of your registered SPA's API permissions. Therefore, when requesting an access token to Azure, based on the audience, you should be able to obtain a correct token that you will send to your WorkflowGen instance's GraphQL API in addition to the request.
{% endhint %}

{% hint style="info" %}
For more information about the Azure **OAuth 2.0 Implicit grant flow** and additional examples, refer to the [Microsoft identity platform and implicit grant flow](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow) guide.
{% endhint %}