Apple Sign-In toevoegen aan React Native zonder je verstand te verliezen

Als je ooit een mobiele app met Google- of sociale login naar de App Store hebt geüpload, ben je waarschijnlijk de strikte regel van de reviewers tegengekomen: als je inloggen via derden toevoegt, moet je ook Inloggen met Apple toevoegen. Anders wordt afwijzing sneller afgehandeld dan een release build kan compileren.

De taak lijkt in eerste instantie eenvoudig. maar zodra je begint te graven in native calls, simulator eigenaardigheden en Apple's API bijzonderheden, duiken er allerlei valkuilen op. Het team van Invertase (dezelfde mensen achter React Native Firebase) heeft een bibliotheek gebouwd genaamd react-native-apple-authentication die dit voor zowel iOS als Android afhandelt.

Wat zit er onder de motorkap en waarom je het nodig hebt

De bibliotheek biedt volledige toegang tot Apple's authenticatiemechanisme. Het werkt op vanilla React Native vanaf versie 0.60, werkt goed met Expo (via prebuild en entitlements config in app.json), ondersteunt macOS, en kan zelfs Android-gebruikers authenticeren via browser flow.

Het beste deel is de out-of-the-box TypeScript-definities en kant-en-klare native button component AppleButton. Het button ontwerp is strikt gereguleerd door Apple's richtlijnen. Als je het zelf tekent, zullen reviewers je app vrolijk afwijzen. Hier worden stijlen en localisatie rechtstreeks uit het native systeem gehaald.

Hoe de basis iOS flow werkt

Installatie is standaard: installeer het pakket via yarn of npm, voer dan pod install uit in de ios map. De module ondersteunt autolinking, dus je hoeft niet in AppDelegate te graven.

Voor de button en login logica heb je maar een paar imports nodig:

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

Valkuilen waar elke beginner over struikelt

Apple's autorisatie heeft niet voor de hand liggende eigenaardigheden die het waard zijn om te kennen voordat je jezelf tot 3 uur 's nachts aan het debuggen bent.

Naam en e-mail worden maar één keer doorgestuurd

Apple is geobsedeerd door privacy. Bij de eerste aanmelding kan de gebruiker ervoor kiezen om zijn echte e-mail te verbergen of te delen. Profielgegevens (fullName fullName en email email) worden door het native framework precies één keer geretourneerd — tijdens de allereerste succesvolle autorisatie.

Bij volgende aanroepen komen deze velden leeg terug (null null). Als je de naam en e-mail niet meteen naar je database hebt opgeslagen, kun je ze niet meer ophalen via de client API.

Om de teststatus op een iPhone te resetten en het profiel opnieuw te ontvangen, moet je handmatig naar de systeeminstellingen gaan: Instellingen → [Je naam] → Wachtwoord & Beveiliging → Apple ID-inloggegevens Настройки > Apple ID > Пароль и безопасность > Приложения, использующие Apple ID, verwijder je testapp daar, en log opnieuw in.

Trouwens, de repo van het project merkt specifiek een bug op in Apple's eigen API: scopes moeten in exact de juiste volgorde worden doorgegeven [FULL_NAME, EMAIL]. Als je ze omwisselt, kan de naam al bij de eerste aanvraag verloren gaan.

Simulators en error 1000

De currentUser methode getCredentialStateForUser verifieert de echtheid van het apparaat. Op iOS simulators crasht het regelmatig met error 1000 com.apple.AuthenticationServices.AuthorizationError error 1000. Je kunt de autorisatieketen alleen volledig testen op een fysiek apparaat.

Als de simulator volledig vastzit op deze error, raden de ontwikkelaars aan om naar de Apple ID management website te gaan, de lijst met gekoppelde apparaten te vinden, en de simulator van je account te verwijderen.

Uitloggen is een illusie

De enums van de module bevatten een logout operatie appleAuth.Operation.LOGOUT, maar in de praktijk doet de native iOS SDK niets met het. Apple biedt geen manier om uit te loggen op systeemniveau op het apparaat. Client-side uitloggen betekent alleen het wissen van je lokale sessie, opgeslagen tokens, en het wissen van de app-status.

Toegang intrekken

Gebruikers kunnen op elk moment naar de iOS-instellingen gaan en de toestemming voor je app om in te loggen intrekken. Om hier tijdig op te reageren en de gebruiker terug te sturen naar het inlogscherm, biedt de bibliotheek een event listener:

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

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

Hoe zit het met Android

Velen zijn verrast, maar je kunt Android-gebruikers ook laten inloggen met Apple ID. De mechanica is daar anders: in plaats van een native framework opent er een beveiligd browservenster via OAuth 2.0 Web Flow.

De bibliotheek handelt de routine af via de ASWebAuthenticationSession appleAuthAndroid module:

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 на сервер
}

Voor Android moet je een Service ID configureren in Apple Developer Console en een Redirect URL opgeven. De hoofdregel: de redirect link moet teken-voor-teken overeenkomen met wat er in de developer console is ingevoerd — geen query parameters toegestaan.

Server-side validatie

Vertrouw de client-side nonce user ID nooit blindelings. De client ontvangt identityToken identityToken (een ondertekende JWT). Op de server decodeer je het, verifieer je de handtekening met Apple's publieke sleutels, en controleer je de nonce nonce.

De module berekent automatisch de SHA256-hash van de doorgegeven nonce nonce voordat deze naar Apple wordt verzonden (vergelijkbaar met hoe Firebase Auth het doet). Houd hier rekening mee op de backend: je moet de gehashte waarde vergelijken.

Als je doel is om snel te voldoen aan App Store Review vereisten of gebruikers een handige one-tap login via Face ID te geven, is de Invertase bibliotheek de meest betrouwbare keuze in het React Native ecosysteem. Het bespaart je het schrijven van je eigen native bridge in Swift/Objective-C, handelt netjes button styling af, en wordt consistent bijgewerkt door de maintainers. Installeer het, configureer certificaten in Apple Developer Console, stel de handler in — en je release is klaar om in te dienen.