logo

Jak používat Supabase Apple OAuth v React Native

Supabase v kombinaci s NextJS nebo Expo umožňuje vytvořit vedlejší projekt během několika hodin.

Supabase nedávno přidala výukový program pro Expo a podporu pro ověřování Apple OAuth. Apple OAuth však nefunguje hned po vybalení s Expo a Supabase. Tak jsem si řekl, že napíšu tento článek a vytvořím šablonu GitHub.

Supabase a Expo

Sledoval jsem rychlý start Supabase Expo, abych v Expo zprovoznil základní ověřování. Rychlý start nezmiňuje AsyncStorage, který je vyžadován v lib/supabase.js aby to fungovalo.

Můj konečný kód:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

// https://reactnative.dev/docs/security#storing-sensitive-info
import { supabaseUrl, supabaseAnonKey } from './supabase-keys';

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage,
  detectSessionInUrl: false
});

Supabase Apple OAuth s Expo

Dále jsem postupoval podle návodu Supabase pro ověřování Apple. Pokusil jsem se použít metodu přihlášení Supabase onClick v mé komponentě React Native auth, která nefunguje:

const { user, session, error } = await supabase.auth.signIn({
  provider: 'apple'
});

Všichni uživatelé/relace/chyby budou null . Trochu jsem se obával, že Apple OAuth na mobilu nebude podporován knihovnou Go True od Supabase, ale narazil jsem na PR, který přidává podporu Oprava:Přidat tok grantů id_token

Místo použití Apple jako poskytovatele jsem se rozhodl použít ověřovací knihovnu Expo k získání tokenu a poté jej předat Supabase:

import { startAsync, makeRedirectUri } from 'expo-auth-session';

import { supabase } from '../lib/supabase';
import { supabaseUrl } from '../lib/supabase-keys';

const signInWithApple = async () => {
    const returnUrl = makeRedirectUri({ useProxy: false });
    const provider = 'apple';
    const authUrl = `${supabaseUrl}/auth/v1/authorize?provider=${provider}&redirect_to=${returnUrl}`;

    const response = await startAsync({ authUrl, returnUrl });

    if (!response || !response.params?.refresh_token) {
      return;
    }

    await supabase.auth.signIn({
      refreshToken: response.params.refresh_token
    });
};

Celý kód je k dispozici na GitHubu. Apple OAuth se Supabase a podporou React Native je relativně nový. Zpětná vazba je vždy vítána, pokud existuje lepší způsob, jak věci dělat.