Article

Displaying and Configuring Sign In with Apple Buttons

Use CSS styles and data attributes to display and configure Sign In with Apple buttons in browsers.

Overview

You can specify which button type to display for a Sign In with Apple button, and edit its appearance and size it to fit your webpage. For a description of the button types and usage information, see Sign In with Apple Buttons in Human Interface Guidelines.

Create a Wrapper Tag

Create a wrapper tag and set the id to “appleid-signin”; for example, <div id="appleid-signin"></div>.

Specify Property Values

Here’s an example of how to create and display a black Sign In with Apple button. A description of the properties you set follows the example.

<html>
    <head>
        <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
        <meta name="appleid-signin-scope" content="[SCOPES]">
        <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
        <meta name="appleid-signin-state" content="[STATE]">
    </head>
    <style>
        .signin-button {
            width: 210px;
            height: 40px;
        }
    </style>
    <body>
        <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    </body>
</html>

Control the size of the button by adding a class that contains the desired CSS width and height styles. The above example creates a button that’s 210 pixels wide and 40 pixels high.

Specify the type of Sign In with Apple button to draw by setting the data-type property to one of the following values:

  • sign in. (Default) For the Sign In with Apple button.

  • continue. For the Continue with Apple button.

Specify the background color of the Sign In with Apple button by setting the data-color property to one of the following values:

  • black. (Default) Sets the background of the button to black.

  • white. Sets the background of the button to white.

Specify the border for the Sign In with Apple button by setting the data-border property to one of the following values:

  • false. (Default) The button doesn’t have a border.

  • true. Draws a border around the button.

See Also

Essentials

Configuring Your Webpage for Sign In with Apple

Ensure your webpage is ready to authorize users through Sign In with Apple.

Communicating Using the Private Email Relay Service

Communicate with users who opted to use an anonymous email address with Sign in with Apple.