Article

Incorporating Sign in with Apple into Other Platforms

Add Sign in with Apple capabilities to apps that can’t directly access Sign in with Apple JS.

Overview

To add Sign in with Apple to apps that don’t have access to the Sign in with Apple JS framework, you must manually control the sign-in request.

Add a Custom “Sign in with Apple” Button

Download the "Sign in with Apple" button image from https://appleid.cdn-apple.com/appleid/button. Putting the download URL in a browser triggers the download of a PNG file that you can embed in your app. Customize the button image by adding query parameters to the URL. If you send invalid query parameters to the endpoint URL, the server returns a 404 Page Not Found error.

You can customize the following attributes:

height

The height of the button image. The minimum and maximum values are 30 and 64, respectively, and the default value is 30.

width

The width of the button image. The minimum and maximum values are 130 and 375, respectively, and the default value is 140.

color

The background color for the button image. The possible values are white and black (the default).

border

A Boolean value that determines whether the button image has a border. The default value is false.

type

The type of button image returned. The possible values are sign-in (the default) and continue.

border_radius

The corner radius for the button image. The minimum and maximum values are 0 and 50, respectively, and the default value is 15.

scale

The scale of the button image. The minimum and maximum values are 1 and 6, respectively, and the default value is 1.

locale

The language used for text on the button. The possible values are ar_SA, ca_ES, cs_CZ, da_DK, de_DE, el_GR, en_GB, en_US, es_ES, es_MX, fi_FI, fr_CA, fr_FR, hr_HR, hu_HU, id_ID, it_IT, iw_IL, ja_JP, ko_KR, ms_MY, nl_NL, no_NO, pl_PL, pt_BR, pt_PT, ro_RO, ru_RU, sk_SK, sv_SE, th_TH, tr_TR, uk_UA, vi_VI, zh_CN, zh_HK, and zh_TW.

When the user clicks the button, open a browser tab with the authorization URL and the authorization query parameters.

Send the Required Query Parameters

Direct the authorization request to the following URL: https://appleid.apple.com/auth/authorize. The URL contains the following parameters:

client_id

(Required) The developer’s client identifier, as provided by WWDR.

redirect_uri

(Required) The URI to which the authorization redirects.

response_type

(Required) The type of response requested. Valid values are code and id_token. You can request one or both. When requesting an id_token response type, response_mode must be either fragment or form_post.

scope

The amount of user information requested from Apple. Valid values are name and email. You can request one, both, or none.

response_mode

The type of response mode expected. Valid values are query, fragment, and form_post. If you requested any scopes, the value must be form_post.

state

The current state of the request.

nonce

A String value used to associate a client session with an ID token. This value is also used to mitigate replay attacks.

The following is an example authorization request URL:

https://appleid.apple.com/auth/authorize?client_id=[CLIENT_ID]&redirect_uri=[REDIRECT_URI]&response_type=[RESPONSE_TYPE]&scope=[SCOPES]&response_mode=[RESPONSE_MODE]&state=[STATE]

Handle the Response

When the Sign in with Apple UI appears in the opened browser tab, the user can sign in and accept any terms and conditions for your app. After Apple processes the authorization request, how the response is handled depends on the value in response_mode:

  • For the query value, the response parameters are added to the redirectURI value as query parameters, and the browser is redirected to the resulting value.

  • For the fragment value, the response parameters are added to the redirectURI value as a fragment, and the browser is redirected.

  • For the form_post value, an HTTP POST request containing the results of the authorization is sent to the redirectURI. The HTTP body contains the result parameters with application/x-www-form-urlencoded content type.

A successful response contains the following parameters:

code

A single-use authorization code that is valid for five minutes.

id_token

A JSON web token containing the user’s identity information.

state

The state contained in the Authorize URL.

user

A JSON string containing the data requested in the scope property. The returned data is in the following format: { "name": { "firstName": string, "lastName": string }, "email": string }

If an error occurs, the HTTP body contains the following parameters:

error

The returned error code.

state

The state contained in the Authorize URL.

Return Control to the App

At the end of the authorization flow, Apple performs a form_post to the redirect_uri value you provided. At this point, the authorization flow is complete and it’s your server’s responsibility to persist the data and return control to the app.

Platforms that support custom URL schemes—iOS 12.0 and earlier and Android—must handle the data resulting from the authorization flow by storing it on their app server in the logic of their redirect_uri endpoint. You must then redirect the custom URL scheme to give control back to the app.