Integrate Apple Sign-In on Android using Flutter

NOTE: To integrate Apple Sign-In you must have a valid Apple ID and you should be enrolled in Apple Developer Program.

Apple Developer Program is needed to created required certificates and services. We will also need a MacOS Device i.e Macbook/Mac or Hackintosh would do as well

Integration Apple-Sign in on an iOS device is rather easy and straightforward, however, there are no tutorials or proper documentation available for Android devices.

We are going to be using the package “sign_in_with_apple” version 5.0.0 and by the time you might read this, there will be a newer version available.

Step 01: Firstly you have to head over to the developer’s program link https://developer.apple.com/ and login into your account which has the access to Apple Developer Program.

Select the option of Identifiers as shown in the following image.

Apples Developer Portal Resource Section

Once you move to the identifiers section, please make sure you have selected “App IDs” as mentioned in Step 1 and Click the Plus Icon as Step 2

App IDs Creation

Step 2: Leads to the selection of what type of Identifier are you creating. Please select the App IDs in this step and press Continue.

And In the next step, select “App” and press Continue.

After that, this will be the most crucial step. You have to make sure that the Platform mentioned is “iOS, macOS, tvOS, watchOS” and enter any description you want, but it is preferred that the description should be relevant to your application.

And then you have to enter Bundle ID, please set it to “Explicit” and where do you find the Bundle ID? Let me show that as well.

Let’s move on to finding the Bundle ID, there are two ways to do that. You can either use XCode to find the Bundle ID or you can use any other IDE that you have to find it.

Firstly we will try to find it using XCode, and follow the next steps. Just keep in mind that we are not done creating the “App ID” so do not close that tab in your browser.

Inside your project folder, you will have a folder called “ios”, It is used for all the iOS-related stuff, so open it where you will find two runner files i.e. Runner.xcodeproj and Runner.xcodeworkspace. Open the second file, “Runner.xcodeworkspace”, and you will have XCode come up then follow the steps!

Find Bundle ID using XCode

And now to find it using any other IDE such as Android Studio or VSCode, I am using Android Studio but you can do the same in VSCode as well. Open your entire project in either IDE and follow these steps.

And finally, paste the selected Bundle Identifier value into the “Register an App ID” Step and then you have to scroll down to find the following check box “Sign In with Apple”. It should be set as “Enable as primary App ID”.

Now click on continue to move forward as shown:

After that you will see a screen as below. Confirm all data and click on register button.

Android Integration Part

We have to head back to the same screen where we created the App ID, On this page https://developer.apple.com/account/resources/identifiers/list/serviceId and follow the next steps!

And select Service ID and press Continue.

On the next screen, you have to give a description I believe it would be better if you make it relevant again and for the identifier, we need to make a little adjustment.

In our App ID, we had copy pasted it, but for this, we have to add “-service” at the end of the identifier, so for example if my identifier was “com.example.app-demo” it will become “com.example.app-demo-service”. After that just press Continue and on the next screen press Register.

That’s it! You have now successfully created a Service ID for your app. You can follow the same steps to create more Service IDs if you need them.
Now that we have our App ID and Service Id, let’s move forward and learn how to configure the services in Xcode using our example app.
To get

Once the Service ID is registered, we have to do some other important steps before we can come back to this. Keep in mind we have to do some configurations in this ID, but that’s for later. We now have to set up the Glitch server.

Why we are using Glitch?

Firstly, it is free and by default, it is configured in such a way that you can provide it required details step by step Glitch will provide us with Callback which will be the main ingredient for Apple Sign In.

“Glitch makes it easy to instantly remix projects and put your own spin on them. Just start typing, and Glitch will immediately show your changes in a preview window. Glitch offers simple and free hosting of an HTTPS-enabled web API, which is exactly what’s needed here.” — Glitch

Setup Glitch

Step 01: To get started with the Glitch-based example go to the https://glitch.com/signin and create your account.

Step 02: Now go to the following page and follow the other instruction https://glitch.com/~flutter-sign-in-with-apple-example and click “Remix”. Now you have your own copy of the sample server!

Step 02: Select the .env file in the file browser on the left and put in your credentials (these will not be public, but only shared with invited collaborators).

Step 03: Now you have to fill out the form containing all the secret details regarding your app. The .env file is for storing secrets for your app, like an API key.

Team ID

You can find your team ID here

Service ID

Now you have to put your service ID as

You can find your service ID here

Bundle ID

Now, you have to put your app bundle ID as

You can find your app bundle ID in XCode. Refer screenshot attached

Find Bundle ID using XCode

Creating Key ID

First, you have to create your key ID. Follow these steps to create your Key ID.

Now next you will see the configuration screen as

Now you will have another screen as

Then you will back to the configuration where you need to continue it.

Now you have to click on register for further process

After that, you have a screen where you can download this file which will be needed in the next step.

Now the Key ID got from this step is placed in the following place

Key Content

Now you have to open the downloaded .p8 file in your text editor. It should look like this

Now you have placed “ | “at the end of each line as

Copy and paste this whole content after placing “ | “into the value field shown below

Android Package Identifier

The last variable you have to put in your package id as

Step 04: Then click on the “Share” button next to your avatar in the upper left, select “Live App” and copy the entry page URL (e.g. https://some-random-identifier.glitch.me).

Now you will see a pop-up then copy the URL as shown below.

The glitch server setup is completed now you have to go back to the step where we created the service ID just before the title “Why we are using Glitch”.

Now update the services you created. Just go to this URL: https://developer.apple.com/account/resources/identifiers/list/serviceId you will see this screen where select your service id created before.

Now you will see the screen where we have to configure the setup as.

Now you will see the pop-up where you need to put the return URL which you got from the last step of Glitch. I am also attaching that screenshot where you have copied the URL.

Now what you will see is the pop-up you have to place this all. That is;

Then,

Then you have to do,

Then you need to save it.

That was the final step now you can proceed to integrate Sign in with Apple into the code of your Flutter app.

Now we will move towards the coding part where we need to write logic to allow users to log in via Apple ID.

Enabling Apple Login From Firebase:

• First go to the firebase console https://console.firebase.google.com/u/0/ and if you haven’t created your project so create a new project there.
• Now you have to enable the authentication as shown:

• Now you need to enable apple sign in from here as shown;

• Now you need to provide your service id as you have created prevoiusly in Android Integration Part. Just go to the url https://developer.apple.com/account/resources/identifiers/list/serviceId where you find you service id just copy it and paste there.

• Now just put your service id and save it.

• Now you should see success screen as

Integrate Apple Login into Flutter App

The process of integrating Sign in with Apple entails more than just adding the plugin to your pubspec.yaml and utilizing the credential-receiving functions it exposes.

  sign_in_with_apple: ^5.0.0
  firebase_auth: ^4.14.0
  crypto: ^3.0.3

Warning: This may generate an error while debugging the application, I have provided a solution at the end of the article which is only specific for these dependency versions.

First, we generate a nonce for IOS, here is the code for generating the nonce:

String generateNonce([int length = 32]) {
    const charset =
   '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
    final random = Random.secure();
    return List.generate(length, (_) =>
    charset[random.nextInt(charset.length)]).join();
  }

then, we create a SHA256 of string for IOS, here is the function for creating the SHA256:

String sha256ofString(String input) {
    final bytes = utf8.encode(input);
    final digest = sha256.convert(bytes);
    return digest.toString();
  }

lastly, we make the function for Apple Sign-In. we also used the redirect URL that we created earlier steps in the glitch. here is the code for Apple Sign-In.

Hurray! 🥳 you have successfully integrated Apple Sign into your Flutter app. For iOS it will simply show you the screen to log in and for Android it will open a web browser to log in.

But Wait!

We still have one last thing to configure for Android to work! The last item in the bucket is to check your AndroidManifest.xml file. It is located in the following path [Your Project]/android/src/main/AndroidManifest.xml or you can check the following screenshot.

P.S Ignore the errors in my lib folder, I don’t write good code. 😜

Once you open this file, it will look something like this:

The very first thing you need to check in this file is whether you have these two lines written or not.

<meta-data
    android:name="flutterEmbedding"
    android:value="2" />

Because, Sign in with apple requires Flutter Embedding Version 2, if it is not present or your current value is not two, please refer to the following link, which explains the migration process.

Link: Upgrading pre 1.12 Android projects

I assume you have Flutter Embedding Version 2 like I do, let’s move on! Copy the following code and paste it exactly where I have pasted.

<!-- Set up the Sign in with Apple activity, such that it's callable from the browser-redirect -->
<activity
    android:name="com.aboutyou.dart_packages.sign_in_with_apple.SignInWithAppleCallback"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="signinwithapple" />
        <data android:path="callback" />
    </intent-filter>
</activity>

Here is the visual depiction of this code pasted in the AndroidManifest.xml file.

I had to decrease the font size of this file in order to show you where I have pasted the piece of code.

Now you can finally rest! You have integrated Apple Sign In on Android Devices! 🥳🥳

Congratulations on making it till here! 🥳 But we are still expecting you to run into few known issues, don’t worry we have them covered in the next heading!

Gradle Version Error for Stated Dependencies

• You might receive an error while cold starting the application, which may look something like this:

• This is the suggested fix for the flutter, you can find the correct gradle version from the link attached to it. However I am showing how to solve this with the specified dependencies

[!] Your project requires a newer version of the Kotlin Gradle plugin. Find the latest version on https://kotlinlang.org/docs/releases.html#release-details, then update /Users/shahzadumarbaig/FlutterProjects/bizally/android/build.gradle:
ext.kotlin_version = ‘<latest-version>’

• Go to your Android Folder and find the build.gradle file, not the one that is inside the app folder.

Once you open the file, the starting part of the file may look something like this:

As mentioned in the picture, we have to upgrade the two dependencies found in the warning provided to us by “Flutter Fix”, here is the link https://kotlinlang.org/docs/releases.html#release-details, or you can use the version displayed in the next image

If you find any difficulty you can reach me out!

LinkedIn: https://www.linkedin.com/in/shahzadubaig/