Article

Configuring Your Webpage for Sign In with Apple

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

Overview

Use HTML and JavaScript to add Sign In with Apple to your webpage. Configure the authentication object and add a button that allows users to sign in to your webpage with their Apple ID.

Embed Sign In with Apple JS in Your Webpage

Use the script tag and link to Apple’s hosted version of Sign In with Apple JS:

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

Configure Sign In with Apple JS

To get started quickly, you can configure Sign In with Apple JS with a default markup setup. Alternatively, you can use JavaScript to configure the library, or use a combination of the two.

You can configure the library using only markup and display a Sign In with Apple button, as in the following 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>
    <body>
        <div id="appleid-signin" 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>

You can also configure the library using JavaScript and display a Sign In with Apple Button, as in the following example:

<html>
    <head>
    </head>
    <body>
        <button id="sign-in-with-apple-button"> Sign In with Apple </button>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : '[CLIENT_ID]',
                scope : '[SCOPES]',
                redirectURI: '[REDIRECT_URI]',
                state : '[STATE]'
            });

            const buttonElement = document.getElementById('sign-in-with-apple-button');
            buttonElement.addEventListener('click', () => {
                AppleID.auth.signIn();
            });
        </script>
    </body>
</html>

You can combine the two previous examples, as shown in the following 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>
    <body>
        <button id="sign-in-with-apple-button"> Sign In with Apple </button>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <script type="text/javascript">
            const buttonElement = document.getElementById('sign-in-with-apple-button');
            buttonElement.addEventListener('click', () => {
                AppleID.auth.signIn();
            });
        </script>
    </body>
</html>

Choose the configuration style that best suits your app’s needs.