How to Add Sign In with Apple to a SwiftUI Project
Tags: ios, swift, swiftui
Published: 2020-09-28 23:50:52

---
title: How to Add Sign In with Apple to a SwiftUI Project
published: true
description: 
tags: #ios #swift #swiftui
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p><strong>Sign in with Apple</strong> makes it safe and secure for users to login to websites and apps. We can implement <a href="https://developer.apple.com/documentation/sign_in_with_apple?language=data">Sign in with Apple</a> easily with SwiftUI 2. For us to use <strong>Sign in with Apple</strong> in our app we are required to use <strong>iOS 14</strong> or later and <strong>Xcode 12</strong> or later. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first thing we need to do is go to our project file which is located at the top of our navigator on the left side of Xcode. Then we need to go to the <strong>Signing &amp; Capabilities</strong> tab. In the left corner of this tab we need to click on the<strong> + Capability</strong> button and type in Sign in with Apple. Then press enter to add it to our project.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1031,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/screen-shot-2020-09-28-at-12.13.37-pm.png?w=1024" alt="" class="wp-image-1031"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now let's navigate to our <strong>ContentView.swift</strong> file to get started.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We need to open our library to get a <strong>Sign in with Apple</strong> Button for our project. We can use the keyboard shortcut <strong>Command + Shift + L</strong> to bring up our library. In the search bar we can type in Sign in with Apple and drag and drop our <strong>Sign in with Apple</strong> button into either our code or onto our canvas. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1022,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/screen-shot-2020-09-28-at-10.29.10-am.png?w=1024" alt="" class="wp-image-1022"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now you might have a error pop up that says Xcode can not find <strong>Sign in with Apple </strong>in our scope. All you have to do to get rid of this error is <strong>import AuthenticationServices</strong> at the top of our <strong>ContentView.swift</strong> file. Now let's add the code in the example below to our project and we will walk through what we are implementing in our app.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">import SwiftUI
import AuthenticationServices

struct ContentView: View {
    var body: some View {
        SignInWithAppleButton(
            // 1.
            onRequest: { request in
                request.requestedScopes = [.fullName, .email]
            },
            onCompletion: { result in
                switch result {
                // 2.
                case .success (let authenticationResults):
                print("Authorization successful! :\(authenticationResults)")

                // 3.
                case .failure(let error):
                    print("Authorization failed: " + error.localizedDescription)
                }
            }
            // 4.
        ).frame(width: 200, height: 50, alignment: .center)
    }
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:list {"ordered":true} -->
<ol><li>Here we are specify what kind of information we would like to get from our user. In this example we are requesting the users full name and email address to be used in our app.</li><li>If the request goes through successfully we can then gain access to the users information we requested. This would be the users full name and email address.</li><li>If something goes wrong this is where we will be able to show a error message to our user and notify them that something has gone wrong with using Sign in with Apple.</li><li>Lastly we are setting the frame of our button so our button won't take up the whole screen.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Now when we run our app we should see a <strong>Sign in with Apple</strong> button. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1036,"width":313,"height":678,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/09/simulator-screen-shot-iphone-11-pro-2020-09-28-at-12.06.50.png?w=473" alt="" class="wp-image-1036" width="313" height="678"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>When we tap on our button we should be prompted to authenticate using our full name and email.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1039,"width":313,"height":678,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/09/simulator-screen-shot-iphone-11-pro-2020-09-28-at-12.24.44-1.png?w=473" alt="" class="wp-image-1039" width="313" height="678"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We can switch the Sign in button to be a <strong>Continue with Apple</strong> button or a <strong>SignUp with Apple</strong> button by simply adding the following code at the top of our existing code.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">import SwiftUI
import AuthenticationServices

struct ContentView: View {
    var body: some View {
        SignInWithAppleButton(
            // Add this below for Sign up with Apple button
            .signUp,
            
            onRequest: { request in
                request.requestedScopes = [.fullName, .email]
            },
            onCompletion: { result in
                switch result {
                case .success (let authenticationResults):
                print("Authorization successful! :\(authenticationResults)")
                case .failure(let error):
                    print("Authorization failed: " + error.localizedDescription)
                }
            }
        ).frame(width: 200, height: 50, alignment: .center)
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":1046,"width":313,"height":678,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/09/simulator-screen-shot-iphone-11-pro-2020-09-28-at-12.45.07.png?w=473" alt="" class="wp-image-1046" width="313" height="678"/></figure></div>
<!-- /wp:image -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct ContentView: View {
    var body: some View {
        SignInWithAppleButton(
            // Add this below for Continue with Apple button
            .continue,
            
            onRequest: { request in
                request.requestedScopes = [.fullName, .email]
            },
            onCompletion: { result in
                switch result {
                case .success (let authenticationResults):
                print("Authorization successful! :\(authenticationResults)")
                case .failure(let error):
                    print("Authorization failed: " + error.localizedDescription)
                }
            }
        ).frame(width: 200, height: 50, alignment: .center)
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":1049,"width":313,"height":678,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/09/simulator-screen-shot-iphone-11-pro-2020-09-28-at-12.46.40.png?w=473" alt="" class="wp-image-1049" width="313" height="678"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That's all there is to adding <strong>Sign in with Apple</strong> to our SwiftUI project. This blogs code can be found on my <a href="https://github.com/Tprezioso/Sign-In-with-Apple-SwiftUI-for-Blog">Github</a>. If you want to see how we can implement <strong>Sign in with Apple</strong> in <strong>UIKit</strong> please check out my other <a href="https://swifttom.com/2020/04/19/how-to-implement-sign-in-with-apple-in-swift/">blog post</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading and I hope this helps you on your next SwiftUI project!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>꩜💻👨🏻‍💻  Happy Coding! 👨🏻‍💻💻꩜</p>
<!-- /wp:paragraph -->