Apple login 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 challanges:

• 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. Login into the Apple Developer Portal.

2. Click on Identifiers.

   

   You should see a screen that looks like this:

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

      Note

      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 app
   2. Ensure that the Sign in with Apple capability is enabled
   3. If it isn’t enabled, enable it.

4. Go back to all All Identifiers

   

5. Click on App Ids and go to Services IDs

   

6. Creare a new identifier

   1. Click on the plus button

      

   2. Select Servcice IDs and click Continue

      

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

      

      Note

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

      Please save it!!!

      Note

      Service ID doesn’t have to match the App ID, but I recomend setting the service ID to YOUR_APP_ID.serivce . 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. Add the domain that you are going to host you backend on.

      

      Note

      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 doman. 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

   

   Note

   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

   

   Note

   This must be the same App ID as the ID in the previous steps.

7. Click on Continue

   

8. Click on Register

   

9. Copy the key ID and download the key.

   

   Caution

   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 save 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 app 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 AndroidStuido

      

   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. Add 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);
      }

      Caution

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

Note

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 example backend is provided here

This example provides the following:

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

Note

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 app

Note

If you already have an App ID, you can skip this step. Don’t follow this step if you have configured Apple Login for IOS.

1. If you don’t already have an App 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 app ID

   

5. Enable Sign with Apple capability

   

6. Click Continue

   

7. Confirm the details and click Register