FlutterFlow Docs
Search…
Actions
Apple Sign-In
Apple Sign-In allows users to authenticate using their Apple Accounts.
Apple sign-in demo

Prerequisites

Before getting started with this section, ensure you have:
  • Completed all steps in the Firebase Setup section for your project.
  • Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created user collection while creating your project with Firebase Setup.)
  • Created an Apple account.
  • ​Purchased an Apple Developer membership. Please see this link for more details on the Apple Developer program and how to sign up.
  • Created iOS Distribution Certificate, App ID, and Provisioning Profile in Apple Developer Account. Here are the instructions on how to create if you haven't already done so.
Make sure you select development certificates in order to test the apple sign-in on a real device.

Adding Apple sign-in

Adding Apple sign-in comprises of following steps:

1. Adding email to developer account

If you use any of the Firebase Authentication features that send emails to users, including email link sign-in, email address verification, etc, you must add an email to your Apple Developer Account. This allows Apple to send emails sent by Firebase Authentication to users who opted to hide their email addresses.
To add an email to the Apple developer account:
  • Open your Apple developer account.
  • Click on the Certificates, Identifiers & Profiles card.
  • Click on more in the left side menu.
  • Click on Configure button.
  • Click on the (+) button on the right side of Email Sources.
  • Enter the email in the Email Addresses section and click Next.
  • Now click on Register and then the Done button.
Adding email to developer account

2. Enabling Apple sign-in in Firebase

To enable Apple authentication in the Firebase:
  • Open the Firebase console and click on Authentication (
    in the left side menu)
  • Click on the Get started button (this may not be visible if you have already set up other forms of Authentication).
  • Select the Sign-in method tab.
  • Click on Apple (Under the Additional Providers section). If you have already added any other provider, click on the Add new provider and then click on Apple.
  • Find the Apple switch and enable it.
  • Click on the Save button.
Enabling Apple sign-in in Firebase

3. Creating a page with Apple sign-in

To allow users to authenticate using their Apple account, you need a login page with a button. You can use one of our templates/components or create a page from scratch.
To create a new page from scratch:
  • Click on the Select Page or Component from the Navigation Menu (left side of your screen).
  • Click on + Create New, Give it a name.
  • Click on the + Create New button under the Blank Page template.
  • Click on the Widget Tree from the Navigation Menu.
  • Add the Button widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Move to Property editor (on the right side of your screen) and scroll down to the Alignment section. Bring the button in the center by adjusting the slider or directly entering the value.
  • Scroll down the Button Text section and change the Text to Apple.
  • Change the Button width to 230 and the Fill Color to black.
  • Scroll down to find the Icon section. Click on the None button and then search and select icon name with FontAwesome.apple.
Creating a page with Apple sign-in
You can also choose to create a page with a ready-made button (component) for Apple Sign-in.
To add the Apple sign-in button component:
  • Open the UI Builder. (left side navigation menu)
  • Select the Components panel.
  • Under the Sign-in Buttons section, find the Apple Sign In button and drag it into the canvas area.
Adding ready-made Apple sign-in button

3.1 Adding a login action

If you added the Apple sign-in component, the login action would have been already added to the button.
To sign-in with the click of a log-in button:
  • Select the Button (with the Apple logo) from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Authentication.
  • Find another Action Type dropdown below, and change it to the Log-in.
  • Click on the Auth Provider dropdown and set it to Apple.
  • Now, checkmark the Create User Document checkbox.
  • From the Collection dropdown below, select the users collection.
Adding a login action

4. Add an action to logout

To log out a user, you can place a button on your home page and add the Logout action.
​Here are the instructions on how to add a button with the Logout action.

5. Preparing to test the app

Apple Sign In functionality does not work in Run Mode and can only be tested on a real device or emulator. To deploy and test the authentication, you will need to download the code and run it in your IDE.
​Here are the instructions for setting up your machine to test the downloaded code on a real device.

6. Configuring project in Xcode

Once you downloaded the code you must configure your project in Xcode before running and testing your app on a real device. This includes adding a team to your project and adding the sign-in with apple functionality.
Here's how you configure your project in Xcode:
  • Open your project in Xcode. If you are using Android Studio, right-click on the ios folder, find Flutter and then click on the Open iOS module in Xcode.
  • In Xcode, click on Runner (left side menu) and then select the Signing and Capabilities tab.
  • Under the Signing section, find the Team dropdown and select your team.
  • Now, click on the + Capability (just below the Signing and Capabilities tab) find the Sign in with Apple, and double click to add.
Configuring project in Xcode

7. Testing Apple sign-in

Apple Sign-In can not be tested in Run Mode. Instead, you will need to test it on a real device/emulator.
  • Open and Run the app from your preferred IDE.
  • When you see the app running on your device, click on the Apple Login button.
  • Confirm and log in using your apple account.
  • Click on the Logout button.
Testing Apple sign-in
​Here are the instructions to verify the creation of a new user in Firebase