React Native에서 Supabase Apple OAuth를 사용하는 방법
Supabase는 최근 Expo에 대한 튜토리얼과 Apple OAuth 인증 지원을 추가했습니다. 그러나 Apple OAuth는 Expo 및 Supabase와 함께 즉시 작동하지 않습니다. 그래서 이 기사를 작성하고 GitHub template 을(를) 만들겠다고 생각했습니다.
수파베이스와 엑스포
Expo에서 작동하는 기본 인증을 얻기 위해 Supabase's Expo quickstart을 따랐습니다. 빠른 시작에는 작동을 위해
lib/supabase.js
에 필요한 AsyncStorage가 언급되어 있지 않습니다.내 최종 코드:
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
});
Expo를 사용한 Supabase Apple OAuth
다음으로 나는 Supabase's tutorial for Apple authentication을 따랐다. React Native 인증 구성 요소에서 Supabase의 로그인 방법 onClick을 사용하려고 했지만 작동하지 않습니다.
const { user, session, error } = await supabase.auth.signIn({
provider: 'apple'
});
사용자/세션/오류는 모두
null
입니다. 모바일의 Apple OAuth가 Supabase의 Go True 라이브러리에서 지원되지 않을까 걱정했는데 지원을 추가하는 PR을 우연히 발견했습니다Fix: Add id_token grant flow.공급자로 Apple을 사용하는 대신 Expo의 인증 라이브러리를 사용하여 토큰을 얻은 다음 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
});
};
전체 코드는 available on GitHub 입니다. Supabase를 사용한 Apple OAuth 및 React Native 지원은 비교적 새로운 기능입니다. 더 나은 방법이 있다면 피드백은 언제나 환영합니다.
Reference
이 문제에 관하여(React Native에서 Supabase Apple OAuth를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dancurtis/how-to-use-supabase-apple-oauth-in-react-native-4c4h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)