> For the complete documentation index, see [llms.txt](https://docs.advantys.com/workflowgen-for-azure/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.advantys.com/workflowgen-for-azure/7.21.0-5/azure-active-directory-configuration-for-single-page-applications.md).

# Azure AD Configuration for Single-Page Applications

## Overview

JavaScript applications running in a browser are often hard to secure due to the open nature of the Web. Secure storage is nonexistent, and everything is in clear text (for HTTP version 1.1). Here's a quote from the Azure Active Directory team that summarizes the state of authentication with single-page applications:

> The OAuth2 implicit grant is notorious for being the grant with the longest list of security concerns in the OAuth2 specification. And yet, that is the approach implemented by ADAL JS and the one we recommend when writing SPA applications. What gives? It’s all a matter of tradeoffs: and as it turns out, the implicit grant is the best approach you can pursue for applications that consume a Web API via JavaScript from a browser.
>
> (Source: <https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant>)

It's therefore important that you make all of the necessary checks to verify the validity of your requests and the responses.

This section provides instructions on how to configure Azure AD 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 a server.<br>
* Make sure to have administrative access to Azure AD to be able to configure it properly.<br>
* Make sure to have provisioned an existing Azure AD user with which you can authenticate to WorkflowGen so that you can use the application afterwards.<br>
* Make sure to have successfully configured delegated authentication to Azure AD on your WorkflowGen instance following the instructions in the [Azure Active Directory authentication](/workflowgen-for-azure/7.21.0-5/azure-active-directory-authentication.md) section.

## Azure Active Directory configuration

### Step 1: Register a new web application

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

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

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

You should now be in your newly registered application's overview page.

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

1. Click **Authentication**.<br>
2. Go to the **Implicit Grant** subsection in the **Advanced settings** section.<br>
3. Check the **Access tokens** and **ID tokens** checkboxes.<br>
4. Click **Save**.

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

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

1. Click **API permissions**.<br>
2. In the **API permissions** section, click **Add a permission**.<br>
3. Click **My APIs**, then select the WorkflowGen Server application.<br>
4. Click **Delegated permissions**, then select **user\_impersonation**.<br>
5. Click **Add permissions**.

{% hint style="success" %}
You should now see the WorkflowGen server 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 %}