fix(ui/auth): display correct Apple sign-in callback URL (#11439)

# Which Problems Are Solved

- Apple Sign-In uses a Form Post method to return the authorization
response, which ZITADEL handles at a specific endpoint ending in /form
for the login v1.
- The Console previously displayed the standard callback URL (without
`/form`), causing confusion and configuration errors..


# How the Problems Are Solved

- **Console**: Updated ProviderNextService to accept a suffix string . 
- **Console**: Updated ProviderAppleComponent to append the suffix to
the urls.


# Additional Changes
- Updated `docs/docs/guides/integrate/identity-providers/apple.mdx` to
explicitly state that the callback URL end with `/form`
- Updated `docs/docs/guides/integrate/login-ui/external-login.mdx` to
clarify the `/form` suffix requirement for Apple Sign-In in the hosted
login documentation.
# Additional Context
- fixes #11438

---------

Co-authored-by: Ramon <mail@conblem.me>
Co-authored-by: Florian Forster <florian@zitadel.com>
This commit is contained in:
Ali Youssef Kayed
2026-03-12 10:24:48 +00:00
committed by GitHub
co-authored by Ramon Florian Forster
parent 7cdee1703f
commit cbf05dbe16
5 changed files with 17 additions and 9 deletions
@@ -20,7 +20,13 @@ import TestSetup from './_test_setup.mdx';
Click on the ZITADEL Callback URL to copy it to your clipboard.
You will have to paste it in the Apple service later.
![](../../../../public/img/guides/zitadel_apple_create_provider.png)
<Callout>
For Apple with V1 hosted login, the callback URL ends with `/form` (e.g., `${CUSTOM_DOMAIN}/ui/login/login/externalidp/callback/form`) because Apple uses a Form Post to return the authorization response.
For V2, use the standard callback URL `${CUSTOM_DOMAIN}/idps/callback`, which already accepts POST requests.
</Callout>
![Apple Provider](../../../../public/img/guides/zitadel_apple_create_provider.png)
## Apple Configuration
@@ -44,7 +50,7 @@ You will have to paste it in the Apple service later.
- Example domain for `https://acme-gzoe4x.zitadel.cloud` would look like this: `acme-gzoe4x.zitadel.cloud`
8. [Paste the ZITADEL Callback URL you copied before](#open-the-apple-identity-provider-template) to the Return URLs
![](../../../../public/img/guides/apple_service_create.png)
![Apple Service](../../../../public/img/guides/apple_service_create.png)
### Register a new key
@@ -74,7 +80,7 @@ A useful default will be filled if you don't change anything.
<Activate components={props.components} />
![](../../../../public/img/guides/zitadel_activate_apple.png)
![Activate the Apple Provider](../../../../public/img/guides/zitadel_activate_apple.png)
### Ensure your Login Policy allows External IDPs
@@ -84,6 +90,6 @@ A useful default will be filled if you don't change anything.
<TestSetup components={props.components} loginscreen="your Apple login"/>
![](../../../../public/img/guides/zitadel_login_apple.png)
![Apple Button](../../../../public/img/guides/zitadel_login_apple.png)
![](../../../../public/img/guides/apple_login.png)
![Apple Login](../../../../public/img/guides/apple_login.png)
@@ -66,7 +66,9 @@ https://accounts.google.com/o/oauth2/v2/auth?client_id=Test&prompt=select_accoun
After the user has successfully authenticated, a redirect to the ZITADEL backend /idps/callback will automatically be performed.
<Callout type="warn">
Note that the redirect URL is `https://${CUSTOM_DOMAIN}/idps/callback` when using the new V2 hosted login compared to the V1 hosted login, which was `https://${CUSTOM_DOMAIN}/ui/login/login/externalidp/callback`.
The redirect URL differs between login versions. V2 uses `https://${CUSTOM_DOMAIN}/idps/callback`, while V1 uses `https://${CUSTOM_DOMAIN}/ui/login/login/externalidp/callback`.
For Form Post based callbacks, V1 requires a separate `/form`-suffixed URL (`https://${CUSTOM_DOMAIN}/ui/login/login/externalidp/callback/form`), whereas V2's standard callback URL handles Form Post callbacks natively, so no separate URL is needed.
</Callout>
## Get Provider Information
Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 66 KiB

@@ -72,7 +72,7 @@ export class ProviderAppleComponent {
this.service$,
);
public expandWhatNow$ = this.nextSvc.expandWhatNow(this.id$, this.activateLink$, this.justCreated$);
public copyUrls$ = this.nextSvc.callbackUrls();
public copyUrls$ = this.nextSvc.callbackUrls(true);
constructor(
private authService: GrpcAuthService,
@@ -80,12 +80,12 @@ export class ProviderNextService {
);
}
callbackUrls(): Observable<CopyUrl[]> {
callbackUrls(formPost: boolean = false): Observable<CopyUrl[]> {
return this.env.env.pipe(
map((env) => [
{
label: 'Login V1 Callback URL',
url: `${env.issuer}/ui/login/login/externalidp/callback`,
url: `${env.issuer}/ui/login/login/externalidp/callback${formPost ? '/form' : ''}`,
},
{
label: 'Login V2 Callback URL',