# Microsoft Entra ID

{% embed url="<https://youtu.be/upcAmYq4JLY>" %}

## Declaring your Backend API

This step is important so that the access token issued by Entra ID are in JWT format and specificially crafter for for your backend API.

1. Go to [Microsoft Azure Portal](https://portal.azure.com/).
2. In the left panel, select **"Microsoft Entra ID"**.
3. Navigate to **"Manage > App Registrations"**.
4. Click **"New Registration"**.
5. Enter **"My App - API"** as the name, then click **Register**.
6. In the left menu, go to **"Manage > Expose API"**.
7. Click **"Add a scope"**.
8. Configure as follows, then click **"Add Scope"**:
   * **Application ID URI**: `api://my-app-api` (then save and continue)
   * **Scope name**: `access_as_user`
   * **Who can consent**: Admins and Users
   * **Admin Consent Display Name**: "View user basic profile"
   * **Admin Consent Description**: "Read permission on the basic user profile"
   * **User Consent Display Name**: "View your basic profile"
   * **User Consent Description**: "Allows the app to see your basic profile (e.g., name, picture, user name, email address)"
   * **State**: Enabled

{% hint style="info" %}
The **Application (client) ID** if this App Registration will be the audience claim (aud) that you will need to provide to your backend token validation API.
{% endhint %}

***

## Registering Your Application

1. Go to [Microsoft Azure Portal](https://portal.azure.com/).
2. In the left panel, select **"Microsoft Entra ID"**.
3. Navigate to **"Manage > App Registrations"**.
4. Click **"New Registration"**.
5. Enter **"My App"** as the display name (replace with your actual app name).
6. Click **Register**.
7. Click **"Add a Redirect URI"**.
8. Click **"Add Platform"** > **"Single-Page Application"**.
9. Set **Redirect URIs**: Add at least two
   * **Production**: `https://my-app.com/` (include trailing slash; adjust if hosted under a subpath, e.g., `https://my-app.com/dashboard/`)
   * **Local Development**: `http://localhost:5173/` (include trailing slash; adjust based on your dev server)
10. Click **Save**.
11. In the left panel, go to **"API Permissions"**.
12. Click **"Add a permission"**.
13. Click **"APIs My Organization Uses"**.
14. Select **"My App - API"**.
15. Check **"access\_as\_user"**, then click **"Add permission"**.
16. In the left panel, click **"Overview"** and write down somewhere:
    * `CLIENT_ID=<Application (client) ID>`&#x20;
    * `DIRECTORY_ID=<Directory (tenant) ID>`

These are required to configure `oidc-spa`.

***

## Providing the parameters to oidc-spa

{% tabs %}
{% tab title="Framwork Agnostic" %}
{% code title="src/oidc.ts" %}

```typescript
// Directory (tenant) ID:
const DIRECTORY_ID = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application (client) ID:
const CLIENT_ID = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application ID URI: (Of the API!)
const SCOPE_FOR_API= "api://my-app-api/access_as_user";

createOidc({
    issuerUri: `https://login.microsoftonline.com/${DIRECTORY_ID}/v2.0`,
    clientId: CLIENT_ID,
    scopes: ["profile", SCOPE_FOR_API],
    // ...
});
```

{% endcode %}
{% endtab %}

{% tab title="React" %}
{% code title="src/oidc.ts" %}

```typescript
// Directory (tenant) ID:
const DIRECTORY_ID = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application (client) ID:
const CLIENT_ID = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application ID URI: (Of the API!)
const SCOPE_FOR_API= "api://my-app-api/access_as_user";

bootstrapOidc({
    issuerUri: `https://login.microsoftonline.com/${DIRECTORY_ID}/v2.0`,
    clientId: CLIENT_ID,
    scopes: ["profile", SCOPE_FOR_API],
    // ...
});
```

{% endcode %}
{% endtab %}

{% tab title="Angular" %}
{% code title="src/app/app.config.ts" %}

```typescript
// Directory (tenant) ID:
const DIRECTORY_ID = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application (client) ID:
const CLIENT_ID = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application ID URI: (Of the API!)
const SCOPE_FOR_API= "api://my-app-api/access_as_user";

Oidc.provide({
    issuerUri: `https://login.microsoftonline.com/${DIRECTORY_ID}/v2.0`,
    clientId: CLIENT_ID,
    scopes: ["profile", SCOPE_FOR_API],
})
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# 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.oidc-spa.dev/providers-configuration/microsoft-entra-id.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.