Files
zitadel/apps/docs/content/guides/integrate/identity-providers/azure-ad-saml.mdx
T
f4f43f5248 docs: fix broken GitHub code-reference blocks after fumadocs migration (#12213)
# Which Problems Are Solved

Pages in `apps/docs` that embed source from GitHub via the Docusaurus
convention

````
```js reference

https://github.com/zitadel/actions/blob/main/examples/org_metadata_claim.js
```
````

stopped working after the migration from Docusaurus to fumadocs. The old
`docusaurus-theme-github-codeblock` plugin used to fetch the file and
render it; fumadocs has no support for that meta, so the page rendered
the raw URL as plain code-block text. Visible at
`/docs/apis/actions/code-examples` and 16 other pages.

# How the Problems Are Solved

- Converted every ```` ```<lang> reference\n<URL>\n``` ```` block (46
total across 17 `.mdx` files) to the native fumadocs JSX form:
`<GithubCodeBlock url="<URL>" />`. The existing `<details>`/`<summary>`
collapsibles around blocks are kept — they're an authoring choice, not
part of the rendering bug.
- Updated `apps/docs/components/github-code-block.tsx` to render via
`DynamicCodeBlock` from `fumadocs-ui/components/dynamic-codeblock`
(proper shiki highlighting) instead of raw `CodeBlock` + `Pre` (which
produced unhighlighted output). Also fixed language detection so a URL
hash like `#L10-L20` no longer pollutes the language token.
- Registered `GithubCodeBlock` globally in
`apps/docs/mdx-components.tsx`, matching how every other shared
component (`APIPage`, `Callout`, `Tab/Tabs`, `Step/Steps`, `Admonition`,
`TerminologyUpdate`) is exposed. MDX files no longer need a local
`import`.

# Additional Changes

- Normalized the two MDX files that were already using the JSX form
(`examples/secure-api/python-django.mdx`,
`examples/secure-api/java-spring.mdx`): removed their now-redundant
local `import { GithubCodeBlock }` and rewrote 9 long-form
`<GithubCodeBlock url="..."></GithubCodeBlock>` tags to self-closing for
consistency.

# Additional Context

Verified locally with `pnpm --filter @zitadel/docs dev`:

- `/docs/apis/actions/code-examples` — 20 shiki-highlighted code blocks
rendered inside the `<details>` collapsibles (was 0).
- `/docs/apis/openidoauth/claims` — line-range hashes (`#L9-L11`)
honored.
- `/docs/examples/login/flutter` — mixed languages (xml/dart/html)
detected and highlighted.
- `/docs/guides/integrate/external-audit-log` — edge case of fenced
reference indented inside a numbered list also converted and rendered.

Greps:
- `^[ \t]*\`\`\`[a-zA-Z0-9]+ reference` in `apps/docs/content/**/*.mdx`
→ 0 matches.
- `<GithubCodeBlock url="` in `apps/docs/content/**/*.mdx` → 55 matches.
- `from '@/components/github-code-block'` in
`apps/docs/content/**/*.mdx` → 0 matches.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
2026-05-28 11:02:44 -07:00

129 lines
4.8 KiB
Plaintext

---
title: Set up Entra ID as a SAML Service Provider in ZITADEL
description: "Configure Entra ID as a SAML Service Provider in ZITADEL for secure authentication with custom attribute mapping"
sidebar_label: Entra ID SAML
---
import GeneralConfigDescription from './_general_config_description.mdx';
import Intro from './_intro.mdx';
import CustomLoginPolicy from './_custom_login_policy.mdx';
import IDPsOverview from './_idps_overview.mdx';
import Activate from './_activate.mdx';
import PrefillAction from './_prefill_action.mdx';
<Intro components={props.components} provider="Entra ID (former Azure Active Directory)"/>
## Entra ID SAML Configuration
You need to have access to an Entra ID Tenant. If you do not yet have one follow [this guide from Microsoft](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-create-new-tenant) to create one for free.
### Register a new enterprise application in Entra
We start setting up the enterprise application.
1. Browse to the [Enterprise App registration menu](https://entra.microsoft.com/#view/Microsoft_AAD_IAM/AppGalleryBladeV2).
2. Search for "SAML Toolkit" and click on the "Microsoft Entra SAML Toolkit" card.
3. Change the name if wanted and click "Create"
![](../../../../public/img/guides/azure_saml_app_create.png)
### Disable required assignment
To allow all users to sign in using ZITADEL we need to manually disable required assignment:
1. Go to Manage > Properties
2. Set "Assignment required?" to No
3. Hit Save
![](../../../../public/img/guides/azure_disable_assignment_required.png)
### Setup SAML
Configure the sign-on method of the app.
1. Go to Manage > Single sign-on
2. Select SAML
3. You will be redirected to the Single Sign-On details page
4. Copy the URL of SAML Certificates > App Federation Metadata Url to your clipboard
![](../../../../public/img/guides/azure_saml_overview.png)
## ZITADEL Setup
### Go to the IdP Providers Overview
<IDPsOverview components={props.components} templates="SAML"/>
### Create a new SAML Service Provider (SP)
Now we configure the identity provider on ZITADEL.
1. Set a name like "Microsoft Entra"
2. Paste the previously copied URL into the "Metadata URL"-field. The metadata will automatically be fetched from the provided URL after creation.
3. Select the "SAML_POST_BINDING" as binding
4. Ensure that the "Signed Request"-box is ticked
5. Change the options if needed. Microsoft Entra works out of the box using the pre configured options.
6. Click Create
<GeneralConfigDescription components={props.components} provider_account="Microsoft account" />
![](../../../../public/img/guides/zitadel_azure_saml_provider.png)
## Configure Basic SAML Configuration
After you created the SAML provider in ZITADEL, you can copy the URLs you need to configure in your Entra ID application.
![](../../../../public/img/guides/zitadel_azure_saml_provider_urls.png)
1. Go to Microsoft Entra > Manage > Single sign-on
2. Edit the "Basic SAML Configuration"
3. **Identifier (Entity ID)**: Paste the *ZITADEL Metadata URL*.
4. **Reply URL (Assertion Consumer Service URL)**: Paste the *ZITADEL ACS Login Form URL*
5. **Sign on URL**: Paste the *ZITADEL ACS Login Form URL*
6. **Logout URL**: Paste the *ZITADEL Single Logout URL*
7. Optionally, you can enable the "Federated Logout", which will log out the user from Entra ID once they terminate their session in ZITADEL using the OIDC End Session Endpoint.
8. Click Save
<Callout>
You can ignore the ZITADEL ACS Intent API URL for now.
This is relevant if you want to [programmatically sign users in at ZITADEL via a SAML Service Provider](/guides/integrate/login-ui/external-login).
</Callout>
![](../../../../public/img/guides/azure_saml_overview2.png)
## Enable the Microsoft Entra Button in ZITADELs Login Page
Go back to ZITADEL and activate the IdP.
### Activate IdP
<Activate components={props.components} />
![](../../../../public/img/guides/zitadel_activate_azure_saml.png)
### Ensure your Login Policy allows External IDPs
<CustomLoginPolicy components={props.components} />
## Test the setup
<p>
To test the setup, use incognito mode and browse to your login page.
You see a new button which redirects you to Microsoft Entra screen.
</p>
By default, ZITADEL shows what you define in the default settings.
If you overwrite the default settings for an organization, you need to send the organization scope in your auth request.
![](../../../../public/img/guides/zitadel_login_azure_saml.png)
Click **Microsoft Entra**
![](../../../../public/img/guides/microsoft_login.png)
### Add Action to map user attributes
<PrefillAction components={props.components} fields="username, firstname, lastname, displayname, email and email verified" provider="Entra"/>
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/entra_id_saml_prefil_register_form.js" />