Apple Sign In With Appwrite

In order to start implementing the Sign in with Apple functionality you need to make sure you have an Apple developer account and a working instance of Appwrite. You can sign-up for an Apple account at the Apple Developer website. To install Appwrite you can follow the official installation documentation.

Once installation has been completed you can access your Appwrite console at http://localhost/console, if you are working with a remote server, replace localhost with your server IP or domain name. When using Appwrite with a domain name, Appwrite will auto-generate a valid SSL certificate for your server and you will be able to access it using https:// rather than http://.

Create a New Appwrite Project

In your Appwrite Console, click on the ‘Create Project’ button on the dashboard to create your first new project. An Appwrite project is a namespace for all your different app resources, like documents, files, users, and more. Each Appwrite project can be connected to multiple web, mobile or even backend apps.

Once your project has been created, you will be redirected to your project dashboard. Your project dashboard is where you can track your project resource usage over time. You can also manage all your project resources directly from the dashboard.

To allow your website, backend or mobile app to connect with the Appwrite API, you need to add it to your project's platforms list. This is done to make sure only verified clients can communicate with your API from the browser.

Click the ‘Add Platform’ button and choose the ‘New Web App’ option from the list.

In the form that opens, enter a website name of your choosing. In the hostname field, enter your website hostname, domain or IP address. You can skip the http/https scheme and port number in this field.

You can similarly add your Android or Flutter Apps, providing the proper details required in the dialog.

Add your Apple Credentials

Go to the ‘Users’ tab in your Appwrite Console and navigate to the ‘OAuth Providers’ tab. Then look for the new Apple provider and enable it.

Once enabled you’ll have to fill your Apple developer account credentials. This is to ensure the Appwrite server can communicate with the Apple API securely on your behalf.

Get Your Team ID

Access your Apple Developer account membership tab to get your team ID and enter it in the Team ID field in the Appwrite OAuth dialog.

Register an App ID

If you don't have one yet, create a new App ID at https://developer.apple.com/account/resources/identifiers/list/bundleId following these steps:

• Click "Register an App ID"
• In the wizard select "App IDs", click "Continue"
• Set the Description and Bundle ID, and select the Sign In with Apple capability
  • Usually the default setting of "Enable as a primary App ID" should suffice here. If you plan to ship other apps that should be grouped together with your new App ID for sign in purposes (e.g. iOS and macOS versions of the same product), please consult the Apple documentation on how to best set these up.
• Click "Continue", and then click "Register" to finish the creation of the App ID

In case you already have an existing App ID that you want to use with Sign in with Apple:

• Open that App ID from the list
• Check the "Sign in with Apple" capability
• Click "Save"

If you have changed your app's capabilities, you'll need to download and install the updated provisioning profiles (for example via Xcode or the Apple Developer portal) to use the new capabilities.

Create a Service ID

Next go to https://developer.apple.com/account/resources/identifiers/list/serviceId and follow these steps:

• Click "Register an Services ID"
• Select "Services IDs", click "Continue"
• Set your "Description" and "Identifier"
  • The "Identifier" should probably look like <team_id>.<app_id>
  • The "Identifier" should be used as the Bundle ID in the Apple OAuth2 Settings in Appwrite Console
• Click "Continue" and then "Register"

Now that the service is created, we have to enable it to be used for Sign in with Apple:

• Select the service from the list of services
• Check the box next to "Sign in with Apple", then click "Configure"
• In the Domains and Subdomains add the domains of the websites on which you want to use Sign in with Apple. This will be the Domain you have setup for your Appwrite Console.
• In the Return URLs box add the full return URL that you get from the Appwrite console Apple OAuth2 Settings
• Click "Next" and then "Done" to close the settings dialog
• Click "Continue" and then "Save" to update the service

In order to communicate with Apple's servers to verify the incoming authorization codes from your app clients, you need to create a key at https://developer.apple.com/account/resources/authkeys/list:

• Click "Create a key"
• Set the "Key Name" (E.g. "Sign in with Apple key")
• Check the box next to "Sign in with Apple", then click "Configure" on the same row
• Under "Primary App ID" select the App ID of the app you want to use (either the newly created one or an existing one)
• Click "Save" to leave the detail view
• Click "Continue" and then click "Register"
• Now you'll see a one-time-only screen where you must download the key by clicking the "Download" button
• Once you have the Key ID and the Downloaded key file, fill in the Key ID field in the Appwrite console Apple OAuth2 Settings
• Open the downloaded key file with a text editor and copy the contents (everything) and paste it in the P8 File field in Appwrite console Apple OAuth2 Settings

Implementing Sign In With Apple in Your Project

Once you have setup Apple OAuth credentials in Appwrite console and added your platforms, you are ready to implement Apple Sign In in your project. Let's see how we can do it in various platforms.

In order to make a request to autnenticate your users with OAuth2 providers you first create and setup the client SDK. Then you can call account service to create session from OAuth2 provider. Below are the examples for different platforms to initialize client and perform OAuth2 login.

Web

const appwrite = new Appwrite();

appwrite
  .setEndpoint('YOUR_END_POINT')
  .setProject('YOUR_PROJECT_ID');

try {
    await appwrite.account.createOAuth2Session(
        "apple",
        "[YOUR_END_POINT]/auth/oauth2/success",
        "[YOUR_END_POINT]/auth/oauth2/failure",
    );
} catch (error) {
    throw error;
}

Flutter

import 'package:appwrite/appwrite.dart';

void main() async {
    final client = new Client();

    client
    .setEndpoint('YOUR_END_POINT')
    .setProject('YOUR_PROJECT_ID');

    final account = Account(client);

    try {
        await account.createOAuth2Session(
            provider: "apple",
            success: "[YOUR_END_POINT]/auth/oauth2/success",
            failure: "[YOUR_END_POINT]/auth/oauth2/failure",
        );
    } catch (error) {
        throw error;
    }
}

Android

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import io.appwrite.Client
import io.appwrite.services.Account

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val client = Client(applicationContext)
            .setEndpoint("https://[HOSTNAME_OR_IP]/v1") // Your API Endpoint
            .setProject("5df5acd0d48c2") // Your project ID

        val account = Account(client)

        GlobalScope.launch {
            account.createOAuth2Session(
                activity = this@MainActivity,
                provider = "amazon",
            )

        }
    }
}

Apple

Instantiate and initialize the client then you can call account service to create session with OAuth2

import Appwrite

let client = Client()
    .setEndpoint("https://demo.appwrite.io/v1")
    .setProject("615d75f94461f")

let account = Account(client)

account.createOAuth2Session(
    provider: "apple",
    success: "[YOUR_END_POINT]/auth/oauth2/success",
    failure: "[YOUR_END_POINT]/auth/oauth2/failure"
){ result in
    switch result {
    case .failure(let err):
        print(err.message)
    case .success:
        print("logged in")
    }
}

Comments

[Matej Bačo]

Appwrite makes it look so easy! I was always scared of OAuth providers but it looks so simple.... I have to give it a try