Stuck in Sign in With Apple modal flow

Question

Created Mar ’20

Replies 5

Boosts 0

Views 5.9k

Participants 5

https://ksr.test/loginI am experiencing an issue when developing against Sign in With Apple locally.

I have configured a publicly accessible, HTTPS connection to my local machine via ngrok. I specified the domain in Apple's Service ID setting as the ngrok URL.

I am using the JS SDK to render the sign in with apple modal on my web page.

When going through the sign up modal flow, I am able to

1. enter my credentials

2. complete the 2FA step

3 choose to use a relay id email

However, as soon as I hit "Continue" on the relay email screen in the modal, I see a loader for a few seconds, and then the loader goes away and the modal does not close. I am able to hit the "Continue" button again, and the same thing happens (loader appears for a few secs, and then disappears, without closing the modal).

I am currently calling logging out the callback response in my web apps document listener:

```

document.addEventListener('AppleIDSignInOnSuccess', (data) => {

console.log(data)

});

```

and I don't see any data being logged, as the modal is still open.

Any ideas on what could be happening?

Boost

Answer 1

tibo9 OP

Mar ’20

Same problem here.

The "AppleIDSignInOnSuccess" event is never fired. When clicking on "Continue" or "Cancel", nothing is happening.

The "AppleIDSignInOnFailure" is only fired when the modal is closed by clicking the browser's close button.

0

Answer 2

sh_trr OP

Mar ’20

Did you try making sure that the redirect uri has "https://" in front of it? I was stuck with this same issue until I came across this post https://forums.developer.apple.com/thread/130197. Now, the popup is closing, and I'm getting the DOM events to fire. 😅

0

Answer 3

rdlowrey OP

Mar ’20

I had the same problem testing on localhost. Popup window wouldn't disappear when clicking either "Continue" or "Cancel" button and neither the AppleIDSignInOnSuccess nor AppleIDSignInOnFailure events would fire unless clicking the browser's close button.

I fixed it by using ngrok.com and updating all relevant URIs/domain names in the service ID upstream at apple and the redirect URI in my local scripts. The

redirect-uri

must specify the same fully qualified domain name (including subdomain) as the page where the popup is triggered from. Using something like ngrok.com and specifying the correct domain for the relevant service ID should solve it.

Would be nice if the Apple JS SDK didn't fail silently in this particular case.

0

Answer 4

tibo9 OP

Mar ’20

@rdlowrey is right ! Same domain and sub-domain for the redirect-uri works for me.

0

Answer 5

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