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.html file 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!
