Apple Sign-In zu React Native hinzufügen, ohne den Verstand zu verlieren

Wenn Sie schon einmal eine Mobile App mit Google- oder Social-Login im App Store veröffentlicht haben, sind Sie wahrscheinlich auf die strenge Regel der Prüfer gestoßen: Wenn Sie einen Drittanbieter-Login hinzufügen, müssen Sie auch Sign In with Apple einbinden. Andernfalls erfolgt die Ablehnung schneller, als ein Release-Build mit dem Kompilieren fertig wird.

Die Aufgabe erscheint zunächst unkompliziert. Sobald Sie jedoch tiefer in native Aufrufe, Simulator-Eigenheiten und Apples API-Besonderheiten eintauchen, tauchen zahlreiche Fallstricke auf. Die Leute vom Invertase-Team (die gleichen Leute hinter React Native Firebase) haben eine Bibliothek namens react-native-apple-authentication entwickelt, die dies sowohl für iOS als auch für Android abwickelt.

Was steckt unter der Haube und warum Sie es brauchen

Die Bibliothek bietet vollständigen Zugriff auf Apples Authentifizierungsmechanismus. Sie funktioniert mit Vanilla React Native ab Version 0.60, versteht sich gut mit Expo (über prebuild und entitlements config in app.json), unterstützt macOS und kann sogar Android-Benutzer über einen Browser-Flow authentifizieren.

Das Beste daran sind die sofort einsatzbereiten TypeScript-Definitionen und die fertige native Button-Komponente AppleButton. Das Button-Design ist streng durch Apples Richtlinien geregelt. Wenn Sie es selbst zeichnen, lehnen die Prüfer Ihre App gerne ab. Hier werden Stile und Lokalisierung direkt aus dem nativen System gezogen.

Wie der grundlegende iOS-Flow funktioniert

Die Installation ist Standard: Installieren Sie das Paket über yarn oder npm, dann führen Sie pod install im ios-Ordner aus. Das Modul unterstützt Autolinking, sodass Sie nicht in AppDelegate eingreifen müssen.

Für den Button und die Login-Logik benötigen Sie nur ein paar Imports:

import React from 'react';
import { View } from 'react-native';
import { AppleButton, appleAuth } from '@invertase/react-native-apple-authentication';

export function LoginScreen() {
  async function handleAppleLogin() {
    // Запускаем нативный запрос авторизации
    const authResponse = await appleAuth.performRequest({
      requestedOperation: appleAuth.Operation.LOGIN,
      // Порядок скоупов имеет значение
      requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL],
    });

    // Проверяем статус пользователя
    const credentialState = await appleAuth.getCredentialStateForUser(authResponse.user);

    if (credentialState === appleAuth.State.AUTHORIZED) {
      // Пользователь подтвержден, отправляем токены на бэкенд
      console.log('User ID:', authResponse.user);
      console.log('Identity Token:', authResponse.identityToken);
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <AppleButton
        buttonStyle={AppleButton.Style.BLACK}
        buttonType={AppleButton.Type.SIGN_IN}
        style={{ width: 200, height: 45 }}
        onPress={handleAppleLogin}
      />
    </View>
  );
}

Fallstricke, über die jeder Anfänger stolpert

Apples Autorisierung hat subtile Eigenheiten, die man kennen sollte, bevor man sich dabei wiederfindet, bis 3 Uhr morgens zu debuggen.

Name und E-Mail werden nur ein einziges Mal übermittelt

Apple ist besessen von Datenschutz. Beim ersten Anmelden kann der Benutzer wählen, ob er seine echte E-Mail-Adresse verbergen oder teilen möchte. Profildaten (fullName fullName und email email) werden vom nativen Framework genau einmal zurückgegeben — bei der allerersten erfolgreichen Autorisierung.

Bei nachfolgenden Aufrufen sind diese Felder leer (null null). Wenn Sie den Namen und die E-Mail-Adresse nicht sofort in Ihrer Datenbank gespeichert haben, können Sie sie nicht mehr über die Client-API abrufen.

Um den Testzustand auf einem iPhone zurückzusetzen und das Profil erneut zu erhalten, müssen Sie manuell in die Systemeinstellungen gehen: Einstellungen → [Ihr Name] → Passwort & Sicherheit → Apple-ID-Anmeldungen Настройки > Apple ID > Пароль и безопасность > Приложения, использующие Apple ID, dort Ihre Test-App entfernen und sich erneut anmelden.

Übrigens weist das Projekt-Repo ausdrücklich auf einen Bug in Apples eigener API hin: Scopes müssen in genau der Reihenfolge [FULL_NAME, EMAIL] übergeben werden. Wenn Sie sie vertauschen, kann der Name bereits bei der ersten Anfrage verloren gehen.

Simulatoren und Fehler 1000

Die currentUser-Methode getCredentialStateForUser überprüft die Geräte-Authentizität. Auf iOS-Simulatoren stürzt sie regelmäßig mit Fehler 1000 com.apple.AuthenticationServices.AuthorizationError error 1000 ab. Sie können die Autorisierungskette nur auf einem physischen Gerät vollständig testen.

Wenn der Simulator komplett bei diesem Fehler hängt, empfehlen die Entwickler, die Website zur Apple-ID-Verwaltung aufzurufen, die Liste der zugeordneten Geräte zu finden und den Simulator aus Ihrem Konto zu entfernen.

Logout ist eine Illusion

Die Enums des Moduls enthalten eine Logout-Operation appleAuth.Operation.LOGOUT, aber in der Praxis macht das native iOS SDK nichts damit. Apple bietet keine Möglichkeit, ein Logout auf Systemebene zu erzwingen. Clientseitiger Logout bedeutet lediglich das Löschen Ihrer lokalen Sitzung, gespeicherter Tokens und das Bereinigen des App-Zustands.

Zugriff widerrufen

Benutzer können jederzeit in die iOS-Einstellungen gehen und die Berechtigung Ihrer App zur Anmeldung widerrufen. Um rechtzeitig zu reagieren und den Benutzer zurück zum Anmeldebildschirm zu leiten, bietet die Bibliothek einen Event-Listener:

useEffect(() => {
  const unsubscribe = appleAuth.onCredentialRevoked(async () => {
    // Токены больше не валидны, сбрасываем локальное состояние
    console.warn('Доступ отозван пользователем в настройках Apple ID');
  });

  return () => unsubscribe();
}, []);

Und was ist mit Android?

Viele sind überrascht, aber Sie können auch Android-Benutzern die Anmeldung mit Apple ID ermöglichen. Die Mechanik ist dort anders: Anstelle eines nativen Frameworks öffnet sich ein geschütztes Browserfenster über den OAuth 2.0 Web Flow.

Die Bibliothek erledigt die Routine über das ASWebAuthenticationSession appleAuthAndroid-Modul:

import { appleAuthAndroid } from '@invertase/react-native-apple-authentication';
import 'react-native-get-random-values';
import { v4 as uuid } from 'uuid';

async function handleAndroidAppleLogin() {
  const rawNonce = uuid();
  const state = uuid();

  appleAuthAndroid.configure({
    clientId: 'com.example.client-android', // Service ID из консоли Apple Developer
    redirectUri: 'https://example.com/auth/callback',
    responseType: appleAuthAndroid.ResponseType.ALL,
    scope: appleAuthAndroid.Scope.ALL,
    nonce: rawNonce,
    state,
  });

  const response = await appleAuthAndroid.signIn();
  // Отправляем response.code и response.id_token на сервер
}

Für Android müssen Sie eine Service ID in der Apple Developer Console konfigurieren und eine Redirect URL angeben. Die Hauptregel: Der Redirect-Link muss Zeichen für Zeichen mit dem übereinstimmen, was in der Developer Console eingegeben wurde — keine Query-Parameter erlaubt.

Serverseitige Validierung

Vertrauen Sie dem clientseitigen Nonce user ID niemals blind. Der Client erhält identityToken identityToken (ein signiertes JWT). Auf dem Server dekodieren Sie es, verifizieren die Signatur mit Apples öffentlichen Schlüsseln und prüfen den Nonce nonce.

Das Modul berechnet automatisch den SHA256-Hash des übergebenen Nonce nonce, bevor es ihn an Apple sendet (ähnlich wie Firebase Auth es macht). Behalten Sie dies auf dem Backend im Hinterkopf: Sie müssen den gehashten Wert vergleichen.

Wenn Ihr Ziel ist, schnell die Anforderungen des App Store Review zu erfüllen oder Benutzern eine bequeme Ein-Tap-Anmeldung über Face ID zu bieten, ist die Invertase-Bibliothek die zuverlässigste Wahl im React-Native-Ökosystem. Sie erspart Ihnen das Schreiben einer eigenen nativen Bridge in Swift/Objective-C, kümmert sich elegant um das Button-Styling und wird vom Maintainer-Team konsistent aktualisiert. Installieren Sie sie, konfigurieren Sie Zertifikate in der Apple Developer Console, richten Sie den Handler ein — und Ihr Release ist bereit zur Einreichung.