Apple Connexion on Android

Apple login on android is hacky. Apple has no official support for Sign in with Apple on Android, so the solution is slightly hacky.

Android currently uses a chrome tabs to display an OAuth2 website. This approach has the challenges:

• Difficult Configuration
• A backend is required

Understanding the flow on Android.

Let me use a diagram to explain the flow on Android:

flowchart TD
    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
    B --> |Pass the link| C(Open the Chrome browser)
    C --> D(Wait for the user to login)
    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
    E --> F(Redirect back to the app)
    F --> G(Return to JS)

Now that you are aware of the challlanges and the flow, let’s begin the Configuration.

Creating the service ID

1. Connexion into the Apple Developer Portal.

2. Click on Identifiers.

   

   You should see a screen that looks like this:

   
   1. Ensure that this field says Application IDs
   2. Make sure that you can find your Application ID.

      If you don’t have configured Apple Login for IOS, you will have to create one. For me, I already have one created. The app ID I will use is me.wcaleniewolny.test.ionic.vue. If you don’t have one, please create one using the create app step.

3. Make sure that the Sign in with Apple capability is enabled for your app

   1. Click on your Application
   2. Ensure that the Sign in with Apple capability is enabled
   3. If it isn’t enabled, Activer it.

4. Go back to all All Identifiers

   

5. Click on App Ids and go to Services IDs

   

6. Creare a Nouveau identifier

   1. Click on the plus button

      

   2. Select Servcice IDs and click Continue

      

   3. Enter a description and a identifiers and click Continuie.

      

      This identifiers will become the clientId that you will pass in the initialize function AND ANDROID_SERVICE_ID for the backend.

      Please save it!!!

      Service ID doesn’t have to match the App ID, but I recommend setting the service ID to YOUR_APP_ID.service . As a reminder, I am using me.wcaleniewolny.test.ionic.vue for my app ID but I am using ee.forgr.io.ionic.service2 as the service ID.

   4. Please verify the details and click Register

      

   5. Click on the the newly created service

      

   6. Enable the Sign in with Apple option

      

   7. Configure the Sign In with Apple

      

   8. Ensure that the Primary App ID is set to the App ID configured in the previous step

      

   9. Ajouter the domain that you are going to host you backend on.

      

      This backend has to be running on HTTPS. As for the Return URLs, you might want to come back to this after reading the next section of this tutorial and after configuring the backend. For the purposes of this tutorial, I will use https://xyz.wcaleniewolny.me/login/callback for the return URL and xyz.wcaleniewolny.me the domain. Press next.

   10. Confirm the data and click Done

       

   11. Click on Continue

       

   12. Click on Save

       

Creating the key

1. Go back to all All Identifiers

   

2. Click on Keys

   

3. Click on the plus icon

   

4. Name your key

   

   This name isn’t Important, you can put anything.

5. Select Sign in with Apple and click Configure

   

6. Select the primary App ID, and press Save

   

   This must be the same Application ID as the ID in the Précédent steps.

7. Click on Continue

   

8. Click on Register

   

9. Copy the key ID and Télécharger the key.

   

   IMPORTANT: Save this ID, in the backend it will be called KEY_ID. Download the key. Make sure to never share this key.

10. Find the downloaded key and Enregistrer it in the backend folder.

    

Getting the Team ID

In order to use Login with Apple on Android, you need to get the Team ID. It will be used in the backend.

1. Go to this website and scroll down

2. Find the Team ID

   

Configuring the Application redirect

As you saw in the diagram, the backend performs a step called Redirect back to the app. This requires manual changes to your app.

1. Modify the AndroidManifest.xml

   1. Open the file, I will use AndroidStudio

      

   2. Find the MainActivity and add the following Intent filter

      

      <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="capgo-demo-app" android:host="path" />
      </intent-filter>

2. Modify the MainActivity

   1. Please open the MainActivity

      

   2. Ajouter the following code:

      

      @Override
      protected void onNewIntent(Intent intent) {
          String action = intent.getAction();
          Uri data = intent.getData();
      
          if (Intent.ACTION_VIEW.equals(action) && data != null) {
              PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
              if (pluginHandle == null) {
                  Log.i("Apple Login Intent", "SocialLogin login handle is null");
                  return;
              }
              Plugin plugin = pluginHandle.getInstance();
              if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Apple Login Intent", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
              }
              ((SocialLoginPlugin) plugin).handleAppleLoginIntent(intent);
              return;
          }
          super.onNewIntent(intent);
      }

      This Exemple assumes that you don’t have any deep links configured. If you do, please adjust the code

You have just added a new deep link into your app. The deep link will look something like this: capgo-demo-app://path. You can change the android:scheme and the android:host to modify how this deep link looks. Important: In the backend configuration, this deep link will become BASE_REDIRECT_URL

Backend Configuration

A backend is required for Android, but configuring a backend will also impact iOS. An Exemple backend is provided here

This Exemple provides the following:

• A simple JSON database
• A way to request the JWT from Apple’s servers
• A simple JWT verification

I use PM2 in order to host this example. An example ecosystem.config.js can be found here

Given everything that I said in this tutorial, here is how the env section would look:

• ANDROID_SERVICE_ID = Service ID
• IOS_SERVICE_ID = App ID

env: {
  PRIVATE_KEY_FILE: "AuthKey_U93M8LBQK3.p8",
  KEY_ID: "U93M8LBQK3",
  TEAM_ID: "UVTJ336J2D",
  ANDROID_SERVICE_ID: "ee.forgr.io.ionic.starter.service2",
  IOS_SERVICE_ID: "me.wcaleniewolny.test.ionic.vue",
  PORT: 3000,
  REDIRECT_URI: "https://xyz.wcaleniewolny.me/login/callback",
  BASE_REDIRECT_URL: "capgo-demo-app://path"
}

Using the plugin

The usage of the login function doesn’t change, it’s the same as IOS. Please take a look at that section for more info. HOWEVER, the initialize method changes a bit.

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

Danger

Note, that adding redirectUrl WILL affect IOS !!!!!

Creating the Application

If you already have an Application ID, you can skip this step. Don’t follow this step if you have configured Apple Connexion for iOS.

1. If you don’t already have an Application ID, click on the plus button

   

2. Select App IDs and click continue

   

3. Click on type App and click Continue

   

4. Enter the description and the Application ID

   

5. Enable Sign with Apple capability

   

6. Click Continue

   

7. Confirm the details and click Register