Sign In With Apple Button stretches to occupy entire window

Question

Created Sep ’23

Replies 5

Boosts 1

Views 1.5k

Participants 5

Hi all!

When building with macOS 14 SDK in macOS 14 RC, the Sign In With Apple button(SignInWithAppleButton) stretches its background to occupy the entire window content view. We expect it to be in the area with a red stroke(see the screenshot)

Here's the code:

struct ContentView: View {
    var body: some View {
		SignInWithAppleButton(.signIn, onRequest: { $0.requestedScopes = [.fullName, .email] }, onCompletion: { _ in })
			.signInWithAppleButtonStyle(.black)
			.border(Color.red, width: 3)
			.padding(80)
    }
}

And screenshot: Screenshot 2023-09-14 at 8.51.21 PM.png

One important addition: the button works, and its hit area remains within that red rectangle.

Any help is highly appreciated.

Thank you!

Boost

Answer 1

derby OP

Sep ’23

Seeing same issue in a AppKit app, so unrelated to SwiftUI. Seems the view is correctly positioned, but there is a sublayer of the control that is completely messed up, filling the entire window. Clicking in the place that the button should be does actually sign you in, but the visuals are completely off. Has to be a bug on Apple's side I would guess.

0

Answer 2

mekentosj OP

Sep ’23

We're seeing the same thing, pretty bad this made it into the RC of Sonoma. Is there already a radar you have filed, and/or even better, a workaround or hack you found that puts that layer in check?

1

Answer 3

reddavis OP

Sep ’23

We're seeing the same, no workarounds yet. Reported: FB13214392

1

Answer 4

li-xinyang OP

Sep ’23

Experiencing the exact same issue.

1

Answer 5

reddavis OP

Oct ’23

Found a simple workaround with SwiftUI:

Applying a clipShape appears to bring the layer under control.

You'll also need to set the width as after applying the clipShape, it will still fill the width.

SignInWithAppleButton(
    .continue,
    onRequest: { request in
        request.requestedScopes = [.email]
    },
    onCompletion: { result in
        // Whatever...
    }
)
.clipShape(RoundedRectangle(cornerRadius: 4, style: .continuous)) // Workaround here...
.frame(width: 300) // ...and here

2