Integrating Apple Sign In with Serverpod: Authentication — Part 3

A Step-by-Step Guide to Implementing Apple Sign In in Serverpod

Isak

Published in

Serverpod

6 min readJun 2, 2023

Authentication Series

Part 1 — Email and Password Authentication
Part 2 — Google Authentication
Part 2.5 — Google API
Part 3 — Apple Authentication

! Platform support

Please note that, as of the current version of this tutorial, we support iOS and MacOS for Apple Sign In with Serverpod. This is due to the backend package not yet having implemented methods for other platforms. Rest assured, we will update this tutorial as soon as support for other platforms is available.

If you’re eager to get started and can’t wait for full support, you have the option to implement the other platforms yourself. This does require some additional work, but you can find an example here that can be used in conjunction with the Serverpod web server.

To stay updated with the latest Serverpod developments, don’t forget to follow our Twitter account!

Introduction

Welcome to the third part of our Serverpod Authentication series! If you’ve been following along, you’ve learned how to implement email-password and Google login methods in your Serverpod backend, providing your users with secure and familiar ways to authenticate. Today, we’re turning our attention to Apple Sign In — a privacy-focused authentication method favored by many iOS users.

Apple Sign In allows users to sign up or log in to your app with their Apple ID, ensuring a seamless and secure user experience. The users can choose to share or hide their email address, and Apple provides a private, relay email address if the user opts for privacy, further enhancing user trust.

By the end of this guide, you will have integrated Apple Sign In into your Flutter app, providing an additional, user-friendly login option for your audience. This tutorial will equip you with the know-how to successfully implement Apple Sign In into your Serverpod backend.

The complete example project we are creating in this tutorial can be found here.

Let’s get started!

Prerequisite

Before embarking on integrating Apple Sign In with Serverpod, it’s crucial to ensure you have the following in place:

Tools: Dart, Flutter, Serverpod, and Docker should all be installed on your development machine. If you haven’t set up these tools yet, please refer to the official Serverpod Documentation for detailed installation instructions. Additionally, we recommend using a database viewer such as Postico2, PgAdmin, or DBeaver. You can use any database viewer you prefer, we will be using Postico2 in this guide.
Serverpod Project: An existing Serverpod project with the serverpod_auth module installed is necessary for this tutorial. If you haven’t done this already, our Part 1: Email and Password Authentication provides a step-by-step guide.

While not mandatory, it is beneficial if you’ve completed at least the first part of this series. This will give you a solid understanding of Serverpod’s authentication mechanisms. However, if you are only interested in the Apple Sign integration you should still be able to follow along.

Setting up the Apple Developer Account

Setting up your Apple Developer Account is the first step towards integrating Apple Sign In. If you don’t already have one, visit the Apple Developer website and sign up. There is a yearly membership fee, but it’s necessary for distributing your apps on the App Store. You will need this as the “Sign in with Apple” feature is locked to paid accounts.

Server side integration

For iOS support we do not need to modify anything beyond the normal auth_module installation.

Integrating Apple Sign In into the Flutter App

In your pubspec.yaml file, add the following line under the dependencies section:

dependencies:
  serverpod_auth_apple_flutter: ^latest_version

Remember to replace latest_version with the current version of the serverpod_auth_apple_flutter package. Then, run flutter pub get to fetch the package.

Note: All Serverpod packages should be using the same version

Add sign in button

Modify the sign_in_page.dart file we created in part 1 by adding the SignInWithAppleButton. This button will trigger the Apple Sign In process when tapped.

SignInWithAppleButton(
  caller: client.modules.auth,
)

If you have been following along all tutorials your sign in screen should look something like this:

The full widget code:

const _googleServerClientId = '<Your Web app Client ID from the Cloud console>';

class SignInPage extends StatelessWidget {
  const SignInPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Dialog(
        child: Container(
          width: 260,
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              SignInWithEmailButton(
                caller: client.modules.auth,
              ),
              SignInWithGoogleButton(
                caller: client.modules.auth,
                serverClientId: _googleServerClientId,
                redirectUri: Uri.parse('http://localhost:8082/googlesignin'),
              ),
              SignInWithAppleButton(
                caller: client.modules.auth,
              )
            ],
          ),
        ),
      ),
    );
  }
}

We still have some platform specific modifications that we need to complete before the sign in button works.

Platform-Specific Client Integration of Apple Sign In

iOS

Open Your Project in Xcode: Launch Xcode and open your project.
Access App Capabilities: Select your target from the project and targets list, then click on the ‘Signing & Capabilities’ tab.
Add Sign In with Apple: Click on the ‘+’ button in the top left corner of the ‘Signing & Capabilities’ section. From the drop-down list, choose ‘Sign In with Apple’. This will add the capability to your app.
Confirm Changes: After adding the capability, you should see ‘Sign In with Apple’ listed under the ‘Signing & Capabilities’ tab. Verify that your Apple Developer account is listed in the ‘Team’ section.

MacOS

Almost have the same steps as for iOS, only real difference is you also need to make sure “Outgoing Connections” are ticked or your client will not be able to talk with your Serverpod.

Open Your Project in Xcode: Launch Xcode and open your project (make sure it is the macos xcode project).
Access App Capabilities: Select your target from the project and targets list, then click on the ‘Signing & Capabilities’ tab.
Add Sign In with Apple: Click on the ‘+’ button in the top left corner of the ‘Signing & Capabilities’ section. From the drop-down list, choose ‘Sign In with Apple’. This will add the capability to your app.
Confirm Changes: After adding the capability, you should see ‘Sign In with Apple’ listed under the ‘Signing & Capabilities’ tab. Verify that your Apple Developer account is listed in the ‘Team’ section.

Runner > Signing & Capabilities > + > Select “Sign in with Apple”

Other platforms

We will update this when the serverpod packages have official support. If you want to implement them anyway checkout the read me of the sign_in_with_apple.

Starting the Server and Running the Client

You are now ready to test your integration. Launch the server dart bin/main.dart and start your flutter client for iOS and/or MacOS, flutter run.

Conclusion

Congratulations! You’ve successfully integrated Apple Sign In into your Serverpod-backed Flutter app. You’ve learned how to set up your Apple Developer account, add the necessary capabilities to your Xcode project, and modify your Flutter app to include Apple Sign In.

In the next part of this series, we’ll explore integrating with Firebase authentication. Until then, keep coding and experimenting. Happy coding!