# Add Sign in with Apple to your app

In today’s post, we’ll take a look at how to add the `Sign in with Apple` button into a SwiftUI view.

The source code of this demo is available [here](https://github.com/xavier7t/DemoSignInWithApple20230220).

Note: **Sign in with Apple** requires an active subscription to [Apple’s developer program](https://developer.apple.com/programs/). The source code shared doesn’t contains the entitlement file which adds the "Sign in with Apple" configuration key to the project.

# Step 1 - Add Capability

After creating a project, open the target page and switch to "Signing & Capabilities" Tab.

In the "Signing" section, make sure you’re logged in with the Apple ID with the developer program subscription.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676951481988/c0202b1e-80fe-4bc2-b281-30e611a14494.png align="center")

Then tap the button "+ Capability", search for "Sign in" and double click "Sign in with Apple" to add it. Once done, you can see a new file with an extension of `.entitlements` appeared in the project navigator.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676951570239/9c1de08e-b278-4bef-821b-1a346ec653d1.png align="center")

# Step 2 - Declare the Sign in Button

Before we continue, please note that to work with Apply Pay, we need to import `AuthenticationServices`.

```swift
import SwiftUI
import AuthenticationServices

struct ContentView: View {
    //...
}
```

Now let’s declare the Sign in with Apple button. The struct name is `SignInWithAppleButton` which is a SwiftUI view. So we can put it inside the VStack in the default content view. Select the initializer with all three parameters.

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

Three parameters explained:

* label: this is a struct in the button struct, and it contains three static properties as values we can use: `.continue`, `.signIn` and `.signUp`. The label struct will label the button with "Continue with Apple", "Sign in with Apple" or "Sign up with Apple" respectively.
    
* onRequest: the onRequest parameter requires a closure that contains some configurations. For instance, we can define what information a user needs to provide in order to proceed with Apple. The information can be described by `.requestedScopes` which is an array of types of such information, ex. name, email etc. **PS.** **in accordance with** [**Apple’s privacy guidelines**](https://developer.apple.com/documentation/authenticationservices/implementing_user_authentication_with_sign_in_with_apple)**, we must ONLY request the information needed.**
    
* onCompletion: this parameter is also a closure that allows us to handle the success/failure as a result of the authentication request.
    

```swift
SignInWithAppleButton(.signIn) { request in
    request.requestedScopes = [.fullName, .email]
} onCompletion: { result in
    switch result {
    case .success(let authResult):
        print("Auth success. Result: \(authResult)")
        //Post-authentication updates on persistence and/or states.
    case .failure(let error):
        print("Auth failed. Result: \(error.localizedDescription)")
        //Handle auth failures
    }
}
```

# Step 3 - Apply a frame

Once Step 2 is done, you can see the button, but it might seem huge since it’s the only element in the root VStack.

Let’s give it a frame.

```swift
SignInWithAppleButton(.signIn) { request in
    //...
}
.frame(width: 280, height: 40, alignment: .center)
```

Without the frame:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676953486209/657805b1-7a60-49af-8feb-40ffd701a968.png align="center")

After adding the frame:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676953505212/204f11e4-2f72-4079-99be-3021ff40880e.png align="center")

# Step 4 - Color Scheme

Now you might be wondering: this button has a black ground, what if the user toggles the appearance settings to use the dark color scheme?

Luckily, Apple provided us with another modifier to the button, `.signInWithAppleButtonStyle` with acceptable values of `.black`, `.white`, `.whiteOutline`. Let’s see the differences in both light and dark modes.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676953846929/46ecf4bd-118b-4406-a102-b29725a0fd54.png align="center")

And that’s all about today’s post. Hope now you know how to add a Sign in with Apple button in a SwiftUI view. Remember to leave a comment or subscribe to my newsletter to get posts like this via email!