Sign in with apple js use popUp

Question

Created Feb ’20

Replies 16

Boosts 1

Views 20k

Participants 16

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 XXX’ 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!

Answered by in 408876022

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

Boost

Answer 1

kachi OP

Jan ’21

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}`)  
    }

0