Hi everyone,
I'm developing a minimal Safari web extension for macOS and trying to implement "Sign in with Apple" directly from the extension popup, as per Apple's guidelines it's prohibited to open a new tab/window:
Guideline 4.0 - Design: The user is taken to a new Safari window or tab to sign in or register for an account, which provides a poor user experience.
What I've Done So Far
-
Created an App ID with "Sign in with Apple" enabled and configured.
-
Created a Service ID with the "Sign in" feature enabled.
-
Enabled "Sign in with Apple" for native targets in Xcode
-
Added the following JavaScript code in my
popup.htmlfile to initialize the Apple JS API and handle authentication via a popup:
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<script>
// have tried many different configurations here - nothing works!
AppleID.auth.init({
clientId: '<valid client ID>',
redirectURI: '<valid URL>',
usePopup: true,
});
document.getElementById('sign-in-button-apple')
.addEventListener('click', () => {
AppleID.auth.signIn().then((response) => {
console.log('Success', response)
}).catch((error) => {
console.error('Error', error)
});
});
</script>
- I also added event listeners for AppleID events:
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
console.log('Success', event);
});
document.addEventListener('AppleIDSignInOnFailure', (event) => {
console.log('Error', event);
});
Issue
When I click the "Sign in" button in the popup, a native macOS dialog appears for authorization. However, after confirming sign-in, the modal just closes and no response (success or error) is logged in the console.
Expected behavior
To receive a success message or an error in the console about the authorization process result.
Questions
-
Service ID Configuration: Since the popup's location URL is
safari-web-extension://<random-url>,I can't add it to the supported redirect URLs in the Service ID settings. Is there a way to work around this? -
Safari Web Extension Setup: Are there specific configurations required in Xcode to enable "Sign in with Apple" within a Safari web extension?
-
Sign-In Method: Am I correctly implementing the signIn method in the JavaScript code? Could there be any constraints or special considerations for running it within an extension popup?
I would greatly appreciate any guidance, examples, or documentation that can help resolve this issue.
Thank you in advance!