|
| 1 | +--- |
| 2 | +slug: /integrations/authentication/supabase/apple |
| 3 | +title: Apple Login |
| 4 | +description: Learn how to integrate Apple Login of Supabase Auth into your FlutterFlow app. |
| 5 | +tags: [Apple Authentication, Authentication, Supabase] |
| 6 | +sidebar_position: 4 |
| 7 | +keywords: [FlutterFlow, Apple Authentication, Authentication, Supabase] |
| 8 | +--- |
| 9 | + |
| 10 | +# Apple Login |
| 11 | + |
| 12 | +Adding Apple Sign-In with Supabase offers a convenient, secure, and privacy-friendly way for users to sign up or log in to your app using their Apple ID. |
| 13 | + |
| 14 | +This guide will walk you through the steps necessary to integrate Apple login with Supabase, including configuring the necessary keys and settings in both Supabase and the Apple Developer Console. |
| 15 | + |
| 16 | +<div style={{ |
| 17 | + position: 'relative', |
| 18 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 19 | + height: 0, |
| 20 | + width: '100%'}}> |
| 21 | + <iframe |
| 22 | + src="https://demo.arcade.software/U7LeqAqnvkWOTQ5yl4zw?embed&show_copy_link=true" |
| 23 | + title="" |
| 24 | + style={{ |
| 25 | + position: 'absolute', |
| 26 | + top: 0, |
| 27 | + left: 0, |
| 28 | + width: '100%', |
| 29 | + height: '100%', |
| 30 | + colorScheme: 'light' |
| 31 | + }} |
| 32 | + frameborder="0" |
| 33 | + loading="lazy" |
| 34 | + webkitAllowFullScreen |
| 35 | + mozAllowFullScreen |
| 36 | + allowFullScreen |
| 37 | + allow="clipboard-write"> |
| 38 | + </iframe> |
| 39 | +</div> |
| 40 | +<p></p> |
| 41 | + |
| 42 | +:::info[Prerequisites] |
| 43 | + |
| 44 | +Before adding Apple Sign-In to your FlutterFlow project, make sure you have: |
| 45 | + |
| 46 | +1. Completed all steps in the [**Supabase setup**](../../supabase/supabase-setup.md) |
| 47 | +2. Completed [**Initial setup**](initial-setup.md) |
| 48 | + required for authentication. |
| 49 | +3. Created an [**Apple account**](https://account.apple.com/account). |
| 50 | +4. An active [**Apple Developer Account**](https://developer.apple.com/programs/enroll/). Read more about the [**Apple Developer Program**](https://developer.apple.com/programs/) and how to sign up. |
| 51 | + |
| 52 | +::: |
| 53 | + |
| 54 | +Adding Apple sign-in comprises of the following steps: |
| 55 | + |
| 56 | +## Set Up in Apple Developer Console |
| 57 | + |
| 58 | +To set up Apple Sign-In, you need to configure a few settings in your Apple Developer Console. This includes setting up email communication to manage user privacy and enabling the Apple Sign-In capability for your App ID. |
| 59 | + |
| 60 | +### Configure Email Communication |
| 61 | + |
| 62 | +"Apple sign-in" is a privacy-focused authentication system. One of its notable features is the ability to hide a user's real email address when signing up for apps and services. When users choose to hide their email, you get one random email address that forwards to the user's actual Apple ID email. This helps users keep their real email addresses private. |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +So, in order to contact such users, you must register email sources that your organization will use for communication. |
| 67 | + |
| 68 | +To register email sources, open the [**Services**](https://developer.apple.com/account/resources/services/list) (under [**Certificates, Identifiers & Profiles**](https://developer.apple.com/account/resources/certificates/list)) section in your Apple developer account, configure **Sign in with Apple for Email Communication**, add the email source, and complete the registration process. |
| 69 | + |
| 70 | + |
| 71 | +<div style={{ |
| 72 | + position: 'relative', |
| 73 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 74 | + height: 0, |
| 75 | + width: '100%'}}> |
| 76 | + <iframe |
| 77 | + src="https://demo.arcade.software/UbuCINcuJsBBFv2plsqE?embed&show_copy_link=true" |
| 78 | + title="" |
| 79 | + style={{ |
| 80 | + position: 'absolute', |
| 81 | + top: 0, |
| 82 | + left: 0, |
| 83 | + width: '100%', |
| 84 | + height: '100%', |
| 85 | + colorScheme: 'light' |
| 86 | + }} |
| 87 | + frameborder="0" |
| 88 | + loading="lazy" |
| 89 | + webkitAllowFullScreen |
| 90 | + mozAllowFullScreen |
| 91 | + allowFullScreen |
| 92 | + allow="clipboard-write"> |
| 93 | + </iframe> |
| 94 | +</div> |
| 95 | +<p></p> |
| 96 | + |
| 97 | +### Enable Apple Sign-In Capability in your App ID |
| 98 | + |
| 99 | +To enable Apple sign-in for your app, open the [**Identifiers**](https://developer.apple.com/account/resources/identifiers/list) section in your Apple developer account, select your existing **App ID**, enable **Sign In with Apple**, and click **Save**. |
| 100 | + |
| 101 | +:::tip |
| 102 | + |
| 103 | +If you haven't created an App ID yet, follow the instructions provided by Apple to [**register an App ID**](https://developer.apple.com/help/account/manage-identifiers/register-an-app-id/). |
| 104 | + |
| 105 | +::: |
| 106 | + |
| 107 | + |
| 108 | +<div style={{ |
| 109 | + position: 'relative', |
| 110 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 111 | + height: 0, |
| 112 | + width: '100%'}}> |
| 113 | + <iframe |
| 114 | + src="https://demo.arcade.software/4iw5sP7Qe6ALupzII7qO?embed&show_copy_link=true" |
| 115 | + title="" |
| 116 | + style={{ |
| 117 | + position: 'absolute', |
| 118 | + top: 0, |
| 119 | + left: 0, |
| 120 | + width: '100%', |
| 121 | + height: '100%', |
| 122 | + colorScheme: 'light' |
| 123 | + }} |
| 124 | + frameborder="0" |
| 125 | + loading="lazy" |
| 126 | + webkitAllowFullScreen |
| 127 | + mozAllowFullScreen |
| 128 | + allowFullScreen |
| 129 | + allow="clipboard-write"> |
| 130 | + </iframe> |
| 131 | +</div> |
| 132 | +<p></p> |
| 133 | + |
| 134 | +## Configure Apple Auth in Supabase |
| 135 | + |
| 136 | +To enable and configure Apple authentication in your Supabase project, open the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers), select your project, enable **Sign in with Apple** under the **Apple** section, enter the **Client ID** and **Secret Key**, and click **Save**. |
| 137 | + |
| 138 | +:::tip |
| 139 | + |
| 140 | +To obtain the secret key, use the tool provided under [**Configuration section**](https://supabase.com/docs/guides/auth/social-login/auth-apple?queryGroups=platform&platform=flutter#flutter-configuration-web). |
| 141 | + |
| 142 | + |
| 143 | + |
| 144 | +::: |
| 145 | + |
| 146 | +<div style={{ |
| 147 | + position: 'relative', |
| 148 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 149 | + height: 0, |
| 150 | + width: '100%'}}> |
| 151 | + <iframe |
| 152 | + src="https://demo.arcade.software/ycK9sSxVusys6jZUpDvt?embed&show_copy_link=true" |
| 153 | + title="" |
| 154 | + style={{ |
| 155 | + position: 'absolute', |
| 156 | + top: 0, |
| 157 | + left: 0, |
| 158 | + width: '100%', |
| 159 | + height: '100%', |
| 160 | + colorScheme: 'light' |
| 161 | + }} |
| 162 | + frameborder="0" |
| 163 | + loading="lazy" |
| 164 | + webkitAllowFullScreen |
| 165 | + mozAllowFullScreen |
| 166 | + allowFullScreen |
| 167 | + allow="clipboard-write"> |
| 168 | + </iframe> |
| 169 | +</div> |
| 170 | +<p></p> |
| 171 | + |
| 172 | +## Enable Apple Auth in FlutterFlow |
| 173 | + |
| 174 | +To enable Supabase Apple authentication in FlutterFlow, go to **Settings and Integrations** > **Supabase** > **Supabase Authentication**, and toggle on **Enable Apple Authentication**. |
| 175 | + |
| 176 | + |
| 177 | + |
| 178 | +## Creating Account [Action] |
| 179 | + |
| 180 | +Now, proceed to add an account creation flow, which consists of the following two actions: |
| 181 | + |
| 182 | +1. **Create Account Action**: Add the **Create Account** action (under Supabase Authentication). This will create an account in Supabase and add the user details to **Supabase Dashboard > Authentication > Users**. |
| 183 | +2. [**Insert Row Action**](../../database/supabase/database-actions.md#insert-row-action): The previous action does not automatically create an entry in the public "users" table you created [here](initial-setup.md#1-creating-a-users-table). To do this, add a **Supabase Insert Row** action, to log the user's details, such as their email. |
| 184 | + |
| 185 | + |
| 186 | + |
| 187 | +## Login [Action] |
| 188 | + |
| 189 | +To enable user login, add the **Log In** action (under Supabase Authentication). When users click on the sign-in button, they will be prompted to log in with their Apple credentials. |
| 190 | + |
| 191 | + |
| 192 | + |
| 193 | +## Logout [Action] |
| 194 | + |
| 195 | +To let users log out of your app, you can use [this](auth-actions.md#log-out-action) action. |
| 196 | + |
| 197 | +## Prepare to Test |
| 198 | + |
| 199 | +To test your app on a real device, you must configure the project in Xcode. This includes adding a team to your project and setting an appropriate signing certificate. |
| 200 | + |
| 201 | +Here's how you configure your project in Xcode: |
| 202 | + |
| 203 | +1. From the Local Run, [open your project in Xcode](../../../testing-deployment-publishing/running-your-app/local-run.md#access-project-code). **Tip**: If you are using Android Studio, right-click on the **ios** folder, find **Flutter,** and then click on the **Open iOS module in Xcode**. |
| 204 | +2. In Xcode, click on **Runner** (left side menu) and then select the **Signing and Capabilities** tab. |
| 205 | +3. We recommend choosing the **Automatically manage signing** option. This will auto-create the profiles, app ID, and certificates required to build and run your app. If you don't, you'll have to [manually create a 'provisioning profile'](https://blog.codemagic.io/distributing-native-ios-sdk-with-flutter-module-using-codemagic/) and then add it in the Xcode. |
| 206 | +4. Under the **Signing** section, find the **Team** dropdown and select your team. |
| 207 | +5. Now use [Local Run](../../../testing-deployment-publishing/running-your-app/local-run.md) to test the app on a real device. |
| 208 | + |
| 209 | + |
| 210 | +<div style={{ |
| 211 | + position: 'relative', |
| 212 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 213 | + height: 0, |
| 214 | + width: '100%'}}> |
| 215 | + <iframe |
| 216 | + src="https://www.loom.com/embed/cb9e1e3605d94636bb7893e23043b3a8?sid=99c30fc5-8db1-4f72-a937-341a772c3290" |
| 217 | + title="" |
| 218 | + style={{ |
| 219 | + position: 'absolute', |
| 220 | + top: 0, |
| 221 | + left: 0, |
| 222 | + width: '100%', |
| 223 | + height: '100%', |
| 224 | + colorScheme: 'light' |
| 225 | + }} |
| 226 | + frameborder="0" |
| 227 | + loading="lazy" |
| 228 | + webkitAllowFullScreen |
| 229 | + mozAllowFullScreen |
| 230 | + allowFullScreen |
| 231 | + allow="clipboard-write"> |
| 232 | + </iframe> |
| 233 | +</div> |
| 234 | +<p></p> |
| 235 | + |
| 236 | +## Verify User Creation |
| 237 | + |
| 238 | +To verify that you have successfully added the Apple authentication, you can come over to your **Supabase project > Authentication > Users** and verify the user entries. Also, verify entries in your public `users` table. |
| 239 | + |
| 240 | + |
0 commit comments