# Single-Page Applications

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 AD FS with a single-page application (SPA) so that users can authenticate through it and make requests to the WorkflowGen GraphQL API.

### Prerequisites <a href="#prerequisites-single-page-applications" id="prerequisites-single-page-applications"></a>

* Make sure to have a licensed copy of WorkflowGen installed and running on a server.
* Make sure to have administrative access to AD FS to be able to configure it properly.
* Make sure to have provisioned an existing Active Directory 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 AD FS on your WorkflowGen instance following the instructions in the [AD FS authentication](/tech/9.5/adfs-integration.md#ad-fs-authentication) section.

## AD FS configuration <a href="#ad-fs-configuration-single-page-applications" id="ad-fs-configuration-single-page-applications"></a>

Currently, AD FS only supports three types of applications: **Native**, **Server**, and **Web API**. As you can see, there's nothing for single-page applications in browsers or even regular web applications that renders pages on the server. However, you can use the supported types to get what you need. The **Native** application type enables you to retrieve a client ID and to specify a callback URI that can be used to perform an implicit grant flow with a single-page application; AD FS will answer as expected since it supports the OpenID Connect protocol.

This configuration is done in several steps. First, you have to register a new native application in AD FS. Then, you have to give the application the necessary permissions to access the WorkflowGen GraphQL API.

### Step 1: Register a new native application

1. In the **AD FS Management** window, navigate to the **Application Groups** folder, and double-click on the WorkflowGen group.
2. Click **Add application**.
3. Configure the application:
   1. **Name**: `My Single-Page App`
   2. Copy the client identifier, which you'll need in the application.
   3. **Redirect URI**: `https://mysinglepageapp.com/callback`&#x20;
4. Click **Add**, then click **Next**.
5. Review the configuration; once you've finished, click **Next** and then **Close**.

### Step 2: Grant access to the WorkflowGen GraphQL API

1. In the **AD FS Management** window, navigate to the **Application Groups** folder, and double-click on the WorkflowGen group.
2. Double-click on the WorkflowGen GraphQL API application.
3. On the **Client Permissions** tab, click the WorkflowGen Plus application, then click **Add**.
4. Select **My Single-Page App** in the application permissions list.
5. Make sure that the `openid`, `profile`, and `email` scopes are checked.
6. Click **OK**, then click **OK** in the WorkflowGen application group menu.

{% hint style="success" %}
You've now configured your single-page app within AD FS.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.workflowgen.com/tech/9.5/adfs-integration/single-page-applications.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.