[BUG] Sign in with Apple promise doesn't resolve

[tlhunter]

What happened?

I'm using await AppleID.auth.signIn() within a PWA of mine. When this code runs inside of mobile safari as a website the authentication works fine. However, when run within a PWA Builder built app, the promise never resolves.

How do we reproduce the behavior?

Working using Mobile Safari:

1. Visit https://app.radar.chat/settings
2. Click "Create Account or Login" at bottom of screen
3. Click "Sign in with Apple" button
4. Go through the iOS signin flow and you'll be logged in

Broken with App:

1. Install https://apps.apple.com/app/radar-chat-local-discovery/id15999752172.
2. Click the Gear symbol on bottom of screen
3. Click "Create Account or Login" at bottom of screen
4. Click "Sign in with Apple" button
5. Go through the iOS signin flow and after inputting your passcode nothing happens

What do you expect to happen?

I'm really not sure why the AppleID.auth.signIn() promise doesn't resolve/reject within PWA Builder. I've tried additional things like adding the "Sign in with Apple" capability in XCode.

I do know that the certs and URLs are all configured correctly as browsers work, and ironically the PWA Builder built app on Android works with Sign in with Apple.

What environment were you using?

Latest version of iOS and Mobile Safari.

Additional context

No response

[maraah1]

Hi thanks for submitting this inquiry. I think this would be better suited for our Discord community linked here. Our Discord community is broken down into three larger categories: getting started, building out your PWA, and packaging your PWA. There are plenty of really helpful community members and mods that will be able to help answer your questions and guide you through your PWABuiling journey :)

[tlhunter]

I ended up giving up on using the Sign in with Apple JavaScript and switched to the the redirect mode. The redirect mode works by first linking to the auth page instead of using JS to trigger a modal:

<a href="https://appleid.apple.com/auth/authorize?response_type=code&redirect_uri=${RETURN_URL}&client_id=${APPLE_CLIENT_ID}">Sign in with Apple</a>

In this case, RETURN_URL is a URL in your PWA that the web view will be brought back to. It'll have a ?code=FOO query parameter attached.

With redirects, you need to add the Apple identity server (appleid.apple.com) to the list of allowed web view URLs for the Xcode project. You also need to add it to the authOrigins array. I also went in and disabled the toolbar that was getting enabled since it wasn't truly dismiss-able, and clicking Done caused the view to break. These changes look like this:

Settings.swift

let authOrigins: [String] = ["appleid.apple.com"];

WebView.swift

                   let matchingAuthOrigin = authOrigins.first(where: { requestHost.range(of: $0) != nil })
                    //if (requestHost.range(of: authOrigin_1) != nil || requestHost.range(of: authOrigin_2) != nil || requestHost.range(of: authOrigin_3) != nil || requestHost.range(of: authOrigin_4) != nil) {
                    if (matchingAuthOrigin != nil) {
                        decisionHandler(.allow)
                        // Disabling for now since it doesn't make sense to close the toolbar
                        //if (toolbarView.isHidden) {
                        //    toolbarView.isHidden = false
                        //    webView.frame = calcWebviewFrame(webviewView: webviewView, toolbarView: toolbarView)
                        //}
                        return
                    }

It's not pretty, since the main web view context switching away from your app and back, but it seems to work. This works in my case, since I'm keeping all the important state in localStorage, but it might not work in your case as your application state is blown away.

From my testing, the OS still displays a popup window and has interesting OS integrations on device, so the experience still feels okay. In the simulator it seems to instead display the full page Apple auth windows. YMMV.