Azure ADB2C: Custom Sign In with Apple Id button

If your app has been rejected because the button used for Sign in with Apple Id functionality did not conform to the layout requirements please take a look at the Apple Human Interface Guidelines beforehand.

But how would one implement this into your existing Azure Active Directory B2C authentication? Well the secret lies within the respective User flows and style overriding with CSS as known from plain old web design.

First you will need a layout as a starting point.

To start up this process you actually can use one of the basic templated already built into Azure ADB2C. You can either download the templates from Microsoft or use a prepared override based on the grey template for convenient downloading from GitHub.

Basically you only need the override.css and implement the link in your used pages after all other referenced stylesheets.

Thereafter this layout page set has to be hosted somewhere with CORS enabled. If you plan to host the static html on Azure Blob Storage please follow the official Microsoft Tutorial.

Finally your layout has to be set active within your user flow.

The design in the overrides.css uses the official apple logo and follows the design guides for this button.

The app got already past the Apple reviewing process and is already in the store.