Apple Auth on Web

[BuffMcBigHuge]

Description

I understand that capacitor-oauth2 does not support Apple Auth on the web. This becomes a bit of a dealbreaker since users can signup via Apple on iOS, then would be unable to log in on the web.

For anyone who may be experiencing this issue, here is some code that may assist you:

<!-- Apple Auth -->
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

let appleIDSignOnSuccessListener;
let appleIDSignInOnFailureListener;

let oauthResponse = async (oauthResponse) => {
  // Process oauthResponse data
  console.log(oauthResponse);
}

const appleSignin = async () => {
  if (!Capacitor.isNativePlatform() && typeof window.AppleID !== 'undefined') {
    // Specifically for Apple Web, we must do this manually and not use @byteowls/capacitor-oauth2

    // Setup listeners
    appleIDSignOnSuccessListener = async (event) => {
      // Handle success
      await oauthResponse(event.detail.authorization);
    }
    document.addEventListener('AppleIDSignInOnSuccess', appleIDSignOnSuccessListener);

    appleIDSignInOnFailureListener = async (event) => {
      // Handle error
      console.log(event.detail);
    }
    document.addEventListener('AppleIDSignInOnFailure', appleIDSignInOnFailureListener);
    //

    // Init Apple
    window.AppleID.auth.init({
      clientId : config.clientId,
      scope : 'name email',
      redirectURI : config.redirectUrl,
      usePopup : true
    });

    // Call Sign In
    await window.AppleID.auth.signIn();
  } else {
    // Apple native iOS with @byteowls/capacitor-oauth2

    // Set popup placement
    const windowWidth = 600;
    const windowHeight = 600;
    const windowLeft = (window.screen.width / 2) - (windowWidth / 2);
    const windowTop = (window.screen.height / 2) - (windowHeight / 2);
    const windowOptions = `toolbar=no, menubar=no, width=${windowWidth}, height=${windowHeight}, top=${windowTop}, left=${windowLeft}`;
    //

    const scope = 'name email';

    let oauth2Options = {
      appId: config.clientId,
      authorizationBaseUrl: 'https://appleid.apple.com/auth/authorize',
      scope,
      web: {
        responseType: 'code',
        redirectUrl: config.redirectUrl,
        windowOptions,
        additionalParameters: {
          response_mode: 'form_post',
        },
      },
      ios: {
        siwaUseScope: true,
        scope,
      },
    };

    await OAuth2Client.authenticate(oauth2Options).then(async oauthResponse => {
      await oauthResponse(oauthResponse);
    });
}

Capacitor version:

  @capacitor/cli: 3.4.3
  @capacitor/core: 3.4.3
  @capacitor/android: 3.4.3
  @capacitor/ios: 3.4.3

Library version:

3.0.1

OAuth Provider:

Apple

Affected Platform(s):

• Web
  • Browser: Chrome, Safari

[alexcroox]

Appreciate you providing a workaround. It’s definitely an issue that you can login with Apple on mobile but not web.