Apple Login not working on Safari in my Angular App

Question

I'm using apple login in my web app and passing the redirect URI to apple URL. It's working fine on all browsers except Safari. On Safari instead of opening the URL in a new tab it's showing the finger touch enabled login popup. Which is causing the issue and my redirect URI is not getting passed and I'm not able to receive the code and other details from apple.

Can anyone please help me resolve this issue.

Angular Code: const openNewWindow = window.open( 'https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&scope=name%20email&state=W4cL2JgRJq&client_id=CLIENT_ID&redirect_uri='+ this.AppleURL',"_blank" );
try {
  openNewWindow.opener = window;
  window.addEventListener('message', event => { 
    this.signInWithApple(JSON.parse(event.data)); 
  });
  window.addEventListener('message', event => { 
    this.signInWithApple(JSON.parse(event.data)); }); } catch (error) { 
    console.log("error",error);
  }

Redirect URI js code:

<script>
function proceedPostToken() {
  var data = { "code": '{{apple_code}}', "firstName": '{{first_name}}', "lastName": '{{last_name}}'};
  if (window.ReactNativeWebView) { 
    window.ReactNativeWebView.postMessage(JSON.stringify(data));
  }
  if (window.opener) {
    window.opener.postMessage(JSON.stringify(data), '*'); window.close();
  }
}
proceedPostToken();
</script>

I've tried to make changes with the script and used different option to open the apple URL in a new tab but then the script is unable to close the tab

Answer 1

We have resolved the issue by modifying the redirect URL. The new redirect URL includes query parameters in the return URI, which enables us to manage the login process more effectively. Users will now be redirected to the homepage upon successful login. If anyone has a better standard alternative solution, please share it here. Thank you!