mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-27 01:32:15 +00:00
f4f43f5248
# 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]>
82 lines
3.2 KiB
Plaintext
82 lines
3.2 KiB
Plaintext
---
|
|
title: LinkedIn OAuth Identity Provider in ZITADEL
|
|
description: "Configure LinkedIn as an OAuth Identity Provider in ZITADEL to enable secure login with LinkedIn credentials"
|
|
sidebar_label: LinkedIn generic OAuth
|
|
id: linkedin-oauth
|
|
---
|
|
|
|
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 GenericOAuth from './_generic_oauth.mdx';
|
|
import Activate from './_activate.mdx';
|
|
import PrefillAction from './_prefill_action.mdx';
|
|
import TestSetup from './_test_setup.mdx';
|
|
|
|
<Intro components={props.components} provider="LinkedIn"/>
|
|
|
|
## LinkedIn Configuration
|
|
|
|
### Register a new client
|
|
|
|
1. Go to the LinkedIn Developer console and create a new App: https://www.linkedin.com/developers/apps/new
|
|
2. Add your App Name, your Company Page and a Logo
|
|
3. Add "Sign In with LinkedIn using OpenID Connect" by clicking "Request access"
|
|
4. Go to the Auth Settings of the App and add the following URL to the "Authorized redirect URLs"
|
|
- Login V1: `${CUSTOM_DOMAIN}/ui/login/login/externalidp/callback`
|
|
- Example redirect url for the domain `https://acme.zitadel.cloud` would look like this: `https://acme.zitadel.cloud/ui/login/login/externalidp/callback`
|
|
- Login V2: `${CUSTOM_DOMAIN}/idps/callback`
|
|
- In this case the url would look like this: `https://acme.zitadel.cloud/idps/callback`
|
|
5. Verify the app as your company
|
|
6. In the Auth - OAuth 2.0 scopes section you should see `openid`, `profile` and `email` listed
|
|
7. Save Client ID and Primary Client Secret from the Application credentials
|
|
|
|
|
|
|
|
## ZITADEL Setup
|
|
|
|
### Add custom login policy
|
|
|
|
<CustomLoginPolicy components={props.components} />
|
|
|
|
### Go to the IdP Providers Overview
|
|
|
|
<IDPsOverview components={props.components} templates="Generic OAuth"/>
|
|
|
|
### Create a new Generic OAuth Provider
|
|
|
|
<GenericOAuth components={props.components}
|
|
name=": e.g. LinkedIn"
|
|
authendpoint="https://www.linkedin.com/oauth/v2/authorization"
|
|
tokenendpoint="https://www.linkedin.com/oauth/v2/accessToken"
|
|
userendpoint="https://api.linkedin.com/v2/userinfo"
|
|
id="sub"
|
|
clientid=": Client id from the application previously created in your LinkedIn account"
|
|
clientsecret=": Client Secret from the application previously created in your LinkedIn account"
|
|
/>
|
|
|
|
<GeneralConfigDescription components={props.components} provider_account="LinkedIn account" />
|
|
|
|
|
|
|
|
### Activate IdP
|
|
|
|
<Activate components={props.components} />
|
|
|
|
|
|
|
|
## Test the setup
|
|
|
|
<TestSetup components={props.components} loginscreen="your LinkedIn login"/>
|
|
|
|
|
|
|
|
|
|
|
|
## Optional: Add ZITADEL action to autofill userdata
|
|
|
|
<PrefillAction components={props.components} fields="firstname, lastname, username, email and email verified" provider="LinkedIn"/>
|
|
|
|
<GithubCodeBlock url="https://github.com/zitadel/actions/blob/main/examples/linkedin_identity_provider.js" />
|