Using Oauth2 to sign-in users with Apple using Java Script Library

Example project here

        h1 {
          text-align: center;

        #welcomePanel {
          display: none;
          text-align: center;

        #signInPanel h2 {
          text-align: center;
          border: 1px solid silver;

        #google-auth-button {
          -webkit-box-align: baseline;
          align-items: baseline;
          border-width: 0px;
          border-radius: 3px;
          box-sizing: border-box;
          display: inline-flex;
          font-size: inherit;
          font-style: normal;
          font-family: inherit;
          max-width: 100%;
          position: relative;
          text-align: center;
          text-decoration: none;
          transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
          white-space: nowrap;
          cursor: pointer;
          padding: 0px 10px;
          vertical-align: middle;
          width: 100%;
          -webkit-box-pack: center;
          justify-content: center;
          font-weight: bold;
          color: var(--ds-text,#42526E) !important;
          height: 40px !important;
          line-height: 40px !important;
          background: rgb(255, 255, 255) !important;
          box-shadow: rgb(0 0 0 / 20%) 1px 1px 5px 0px !important;
      <!-- First we have to include Apple Sign-in script -->

        function parseJwt (token) {
            var base64Url = token.split('.')[1];
            var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);

            return JSON.parse(jsonPayload);

         * This function will initialize the `AppleID.auth` object with parameter we pass in.
        const initApple = () => {
            clientId: "com.toni-develops.sign-in-with-apple-identifier", // This is the service ID we created.
            scope: "name email", // To tell apple we want the user name and emails fields in the response it sends us.
            redirectURI: "", // As registered along with our service ID
            state: "origin:web", // Any string of your choice that you may use for some logic. It's optional and you may omit it.
            usePopup: true, // Important if we want to capture the data apple sends on the client side.
         * This function is where the magic happens.
         * This is a simple example, ideally you'll have catch block as well to handle authentication failure.
        const singInApple = async () => {
          const response = await window.AppleID.auth.signIn();

          return response;

        function signInWithApple() {
          const userData = singInApple();

          userData.then( (data) => {
            console.dir(data, { depth: null });
            const result = parseJwt(data.authorization.id_token)
            console.dir(result, { depth: null });

            document.querySelector('#signInPanel').innerHTML = '<h2>Welcome ' + + '</h2>';
      <h1>Sign-In with Apple using Java Script library example</h1>
      <div id="signInPanel">
        <button id="google-auth-button" class="css-11s2kpt" type="button" tabindex="0" onclick="signInWithApple()">
          <span class="css-1ujqpe8">
            <img class="appleLogo" src="" alt="">
          <span class="css-19r5em7"><span>Continue with Apple</span>


Leave a Reply