iosswiftuisign-in-with-applecustom-button

Can I hide the text of the Sign In with Apple button? (a.k.a ASAuthorizationAppleIDButton)?

I am implementing Sign In with Apple on my iOS app (SwiftUI).

In SwiftUI, I can use the 'SignInWithAppleButton' (https://morioh.com/p/524e0408008c), this button displays the Apple logo and a text that can be "Sign In with Apple", "Sign Up with Apple" or "Continue with Apple" depending on the button type chosen (ASAuthorizationAppleIDButton.ButtonType).

However, I would like the button to be sized 120x60 (WxH). If I just resize this button, the text is still visible and displayed very small, the Apple icon is also resized and cannot be seen, so it is not useable. I want to show only the Apple icon. It seems allowed by the design guidelines (https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/)

How can I do this in SwiftUI? I could not find examples of custom Sign in with Apple buttons implementations.

Thanks for the advice!

Solution

  • If you want to customize behavior/looks you will have to create your own. I suggest you start with the init() for SignInWithAppleButton

    init(SignInWithAppleButton.Label, onRequest: (ASAuthorizationAppleIDRequest) -> Void, onCompletion: ((Result<ASAuthorization, Error>) -> Void))

    Then make a View and a ViewModel: ASAuthorizationControllerDelegate that uses that initializer.

    onRequest and onCompletion are function blocks/completion handlers so you will need to read up on those

    So you know how to use them when you handleAuthorizationAppleIDButtonPress (add to the request) and when your ASAuthorizationControllerDelegate returns .success or .failure

    Your View body only needs a Button that calls thehandleAuthorizationAppleIDButtonPress() in your ViewModel (See Apple's sample code)

    You can find Apple's sample code in the documentation Implementing User Authentication with Sign in with Apple