I faced the same issue. When usePopup is true, the only way the pop-up will close after the user clicks "continue" is if redirectURI is set to the hostname, and hostname is listed in the Service ID "Return URLs" in the developer portal. I.e., if your login page is at https://www.example.com/user/login, you can set redirectURI to https://www.example.com (don't need the path after the hostname) and then add this to "Return URLs" in developer portal.
Two gotchas for development:
- Apple doesn't allow localhost Return URL.
- Apple doesn't allow non-https Return URL.
I ended up using ngrok to serve up a https endpoint that forwarded to my local environment (e.g., https://xxxxxxx.ngrok.io ---> http://localhost:3000) and during development, I added the https://xxxxxxx.ngrok.io endpoint as the Return URL in the developer portal. I then did all testing by visiting the https://xxxxxxx.ngrok.io endpoint, which served up my local code and I could debug.
Note that when usePopup is true, you need to use the JS listeners (or promise) to handle the data that results from the popup closing when the user clicks Continue. Here you'll redirect or POST to the page that can process the id_token and manage then user session.
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
// Handle successful response.
console.log(event.detail.data);
});
// Listen for authorization failures.
document.addEventListener('AppleIDSignInOnFailure', (event) => {
// Handle error.
console.log(event.detail.error);
});
If you have usePopup is false, then the user is fully sent to Apples https://appleid.apple.com/auth/authorize page and this page then does a POST back to your redirectURI after the user clicks Continue. In this case, the redirectURI does need to be the full path so Apple knows where to send the user back to. And also in the Developer portal, the services ID Return URL will need to have that full path Redirect URL.
I found Apple's documention unnecessairly complicated and missing this critical point about having redirectURI match the host of the page that opens the popup, when usePopup is true.
Excuse me, have you solved your problem?I have the same problem.
Excuse me, Did you solve this issue? I have faced the same problem.