Sign in with apple js use popUp

Question

Hey,
as the requirement of my website needs to listen for the success of Apple Sign In, I need to use the popup function.
My initializations are

AppleID.auth.init({
  clientId : '[CLIENT_ID]',
  redirectURI : '[REDIRECT_URI]',
  usePopup : true 
});

however, when the pop up asks me "Do you want to continue using ‘Service ID for ***’ with your Apple ID, XXXX?", there isn't any response after I click Continue or Cancel button.
Do you guys know how to fix this? or is it a bug from Apple?
Thanks!

Sign in with Apple

8.9k

Posted by

almen.wong

Reply

Add a Comment

Answer 1

Hi

when "usePopup" set to true, we will only post the data back to the "redirectURI" provided in AppleID.auth.init (redirectURI)

For example if the app that invoked Sign in with Apple JS has url "https://www.example.com/test" then the redirectURI should be "https://www.example.com"

However if the app url is "https://www.example2.com/test" then the app will not get any data

Posted by

Natthakorn123

Add a Comment

Answer 2

If usePopup is giving you problems, a workaround is to bypass the Apple JS SDK and open the pop-up manually. When I did this, clicking on "Continue" after the user verified their credentials redirected the pop-up to my redirect uri, regardless of whether or not the popup and redirect uri were on different subdomains.

Here's the sample code that gets called whenever a user clicks on my "Sign In With Apple" button:

Code Block const handleClick = () => {
        const oauthUrl = `https://appleid.apple.com/auth/authorize?response_type=code&` +
        `client_id=${CLIENT_ID}&scope=name+email&response_mode=form_post&` +
        `state=${STATE}&redirect_uri=${REDIRECT_URI}&nonce=${secureRandomString(32)}`
        const windowWidth = 450
        const windowHeight = 600
        const left = window.screen.width / 2 - windowWidth / 2
        const top = window.screen.height / 2 - windowHeight / 2
        window.open(oauthUrl, 'Apple Sign-In',`menubar=no,location=no,scrollbars=no,status=` + `no,width=${windowWidth},height=${windowHeight},top=${top},left=${left}`)  
    }

Posted by

kachi

Add a Comment

Sign in with apple js use popUp

Accepted Reply

Replies