sign_in_with_apple web: TypeError when the sign in flow completes in version 6.0.0, works in 5.0.0

[lukasnevosad]

I have implemented the sign in flow with version sign_in_with_apple 6.0.0 and on the Flutter web I am getting the following error after the last step in the Apple Sign dialog:

TypeError: Instance of '_TypeError': type '_TypeError' is not a subtype of type 'JSObject'

Having googled a bit, similar bug reports started to pop up in Firebase auth (e.g. this), attributed to js_interop migration. Having seen this migration has been recently carried out in this plugin, I tried downgrading to 5.0.0 and there the flow works flawlessly.

Stacktrace

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1385:3                         _failedAsCheck
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1363:3                         _generalAsCheckImplementation
packages/sign_in_with_apple_web/sign_in_with_apple_web.dart 61:28            getAppleIDCredential
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

Dependencies

  flutter_facebook_auth: ^6.1.1
  google_sign_in: ^6.2.1
  provider: ^6.1.2
  dio: ^5.4.1
  sign_in_with_apple: ^6.0.0

Flutter doctor

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.1 23B74 darwin-arm64, locale en-CZ)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.87.0)
[✓] Connected device (5 available)
! Error: Browsing on the local area network for Lukas’s Apple Watch. Ensure the device is unlocked and discoverable via Bluetooth. (code
-27)
[✓] Network resources

• No issues found!

[tp]

Interesting, that the Firebase bug predates our migration in #401 / #403.

I'll see that I get my test environment set up again to gauge if / how one could reproduce this.

But since we have upgraded all the minimum versions with this release, I was hoping we'd be on the same version and this worked for everyone.

@IchordeDionysos @marciofrayze Are either of you running 6.0.0 successfully in production yet?

[tp]

Interesting how they switched to using JSString for everything (https://github.com/firebase/flutterfire/pull/12239/files#diff-811041fe9978b04d29e1eb514ca3c229e4bd605683a9623c7cd9b39a5d016e75).

Likewise the docs start out with String and then switch to JSString for later examples 🤔 https://dart.dev/interop/js-interop/usage

I was definitely able to read the data with the current setup in debug, but maybe release deployments affect this as well here, which seems what firebase/flutterfire#12237 (comment) is hinting at.

I'll see that I debug this shortly.

[tp]

I just checked the example web app in release mode with flutter run -d chrome --release (on Flutter 3.19.1), and after the sign in I get the desired AuthorizationCredentialAppleID(…) success result.

Then I tried with version 3.19.3 in release mode, also with success.

As a last check I built the app and started a server with

flutter build web

cd build/web 

# Optionally:
# flutter pub global activate dhttpd


# Docs at https://docs.flutter.dev/platform-integration/web/wasm suggest passing `'--headers=Cross-Origin-Embedder-Policy=credentialless;Cross-Origin-Opener-Policy=same-origin'`, but then it would not work for me
dhttpd

# then start the SSL test server as described in the docs

This also lead to success with the credential results being printed in the browser (as per our example app).

[bruco1987]

I am trying to use your apple login package with a web application. I have not been able to use it, I even downgraded to version 5.0.0.

Errore durante il login con Apple: SignInWithAppleCredentialsException(Authentication failed with UNKNOWN_SIWA_ERROR)

StackTrace: dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3       throw_
packages/sign_in_with_apple_web/sign_in_with_apple_web.dart 64:7                  getAppleIDCredential
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5                _async
packages/sign_in_with_apple_web/sign_in_with_apple_web.dart 25:62                 getAppleIDCredential
packages/sign_in_with_apple/src/sign_in_with_apple.dart 74:45                     getAppleIDCredential
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5                _async
packages/sign_in_with_apple/src/sign_in_with_apple.dart 54:69                     getAppleIDCredential
packages/parco/login_page.dart 85:53                                              signInWithApple
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5                _async
packages/parco/login_page.dart 79:23                                              signInWithApple
packages/flutter/src/material/ink_well.dart 1183:21                               handleTap
packages/flutter/src/gestures/recognizer.dart 315:24                              invokeCallback
packages/flutter/src/gestures/tap.dart 652:11                                     handleTapUp
packages/flutter/src/gestures/tap.dart 309:5                                      [_checkUp]
packages/flutter/src/gestures/tap.dart 242:7                                      handlePrimaryPointer
packages/flutter/src/gestures/recognizer.dart 670:9                               handleEvent
packages/flutter/src/gestures/pointer_router.dart 98:7                            [_dispatch]
packages/flutter/src/gestures/pointer_router.dart 143:9                           <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/linked_hash_map.dart 21:7           forEach
packages/flutter/src/gestures/pointer_router.dart 141:17                          [_dispatchEventToRoutes]
packages/flutter/src/gestures/pointer_router.dart 127:7                           route
packages/flutter/src/gestures/binding.dart 495:5                                  handleEvent
packages/flutter/src/gestures/binding.dart 475:14                                 dispatchEvent
packages/flutter/src/rendering/binding.dart 430:11                                dispatchEvent
packages/flutter/src/gestures/binding.dart 420:7                                  [_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 383:5                                  handlePointerEvent
packages/flutter/src/gestures/binding.dart 330:7                                  [_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 299:9                                  [_handlePointerDataPacket]
lib/_engine/engine/platform_dispatcher.dart 1361:5                                invoke1
lib/_engine/engine/platform_dispatcher.dart 286:5                                 invokeOnPointerDataPacket
lib/_engine/engine/pointer_binding.dart 398:30                                    [_sendToFramework]
lib/_engine/engine/pointer_binding.dart 224:7                                     onPointerData
lib/_engine/engine/pointer_binding.dart 1001:20                                   <fn>
lib/_engine/engine/pointer_binding.dart 930:7                                     <fn>
lib/_engine/engine/pointer_binding.dart 531:9                                     loggedHandler
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 550:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 555:39  dcall

dependencies:

flutter:
  sdk: flutter
firebase_auth: ^4.17.5
firebase_core: ^2.25.4
firebase_storage: ^11.6.6
google_sign_in: ^6.2.1
sign_in_with_apple: ^6.1.0
build_runner: ^2.4.8
build_web_compilers: ^4.0.9
cloud_firestore: ^4.15.5
vector_math: ^2.1.4
image_picker: ^1.0.7
email_validator: ^2.1.17
image_cropper: ^5.0.1
js: ^0.6.7
url_launcher: ^6.2.6

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
firebase_analytics: ^10.8.6

Flutter doctor
[√] Flutter (Channel stable, 3.19.1, on Microsoft Windows [Versione 10.0.22621.1413], locale it-IT)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.1)
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.88.0)
[√] Connected device (3 available)
[√] Network resources

• No issues found!

I premise that I added
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

this is my function in login_page.dart

  void signInWithApple() async {
    setState(() {
      isSigningIn = true;
    });

    try {
      final appleCredential = await SignInWithApple.getAppleIDCredential(
        scopes: [AppleIDAuthorizationScopes.email, AppleIDAuthorizationScopes.fullName],
        webAuthenticationOptions: WebAuthenticationOptions(
          clientId: 'com.yessey.parco.parco-service',  // Sostituisci con il tuo client ID registrato
          redirectUri: Uri.parse(
              'https://parco-a98f3.firebaseapp.com/__/auth/handler'  // Sostituisci con il tuo URL di reindirizzamento configurato
          ),
        ),
      );

      final oauthCredential = OAuthProvider("apple.com").credential(
        idToken: appleCredential.identityToken,
        accessToken: appleCredential.authorizationCode,
      );

      final userCredential = await _auth.signInWithCredential(oauthCredential);
      if (userCredential.user != null) {
        print("Login con Apple riuscito: ${userCredential.user!.uid}");
        checkUserDetailsAndNavigate();
      }
    } catch (e, stackTrace) {
      print('Errore durante il login con Apple: $e');
      print('StackTrace: $stackTrace');
      // Qui potresti voler analizzare l'errore e magari riprovare o mostrare un messaggio specifico
    } finally {
      setState(() {
        isSigningIn = false;
      });
    }
  }

[bruco1987]

update:

by updating all dependencies to the latest version I was able to get the apple login popup to appear correctly. I ccorrectly received the code for two-factor authentication but once I clicked confirm, this error appears in the console:
POST https://appleid.apple.com/appleauth/auth/oauth/authorize 403 (Forbidden)

would you know how to suggest why?

in the specidfic click on the login button with apple, the popup opens correctly and if I click the first time on continue after it authenticated me correctly, the popup does not close and nothing happens(even the error does not appear) if I then reclick a second time on continue, then the error appears in console

thank you very much

[tp]

@bruco1987 I think that's usually the redirect domains not being properly configured (so the pop-up won't close / post the code to the parent).

And then the error on second click happens (I think) because the login is already "used" (and thus it fails before even checking the other things).

[alexrafuse]

@bruco1987 were you able to resolve the 403 issue? I'm running into the same problem

[nerder]

It seems to be a PR related to this issue here: #432

[tp]

@lukasnevosad Could it be that you also used Sign in with Apple on the web and did not make use of the state parameter or were not requesting the user's email via scopes?

In that case, this was fixed in #432 and released with https://pub.dev/packages/sign_in_with_apple/versions/6.1.2.