An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
How to Use Supabase Apple OAuth in React Native
Supabase combined with NextJS or Expo makes spinning up a side project in a few hours possible.
Supabase recently added a tutorial for Expo and support for Apple OAuth authentication. However, Apple OAuth does not work out of the box with Expo and Supabase. So I figured I'd write this article and create a GitHub template.
Supabase and Expo
I followed Supabase's Expo quickstart to get basic authentication working in Expo. The quickstart does not mentioned AsyncStorage which is required in lib/supabase.js
to get it working.
My final code:
import AsyncStorage from '@react-native-async-storage/async-storage';import { createClient } from '@supabase/supabase-js';// https://reactnative.dev/docs/security#storing-sensitive-infoimport { supabaseUrl, supabaseAnonKey } from './supabase-keys';export const supabase = createClient(supabaseUrl, supabaseAnonKey, { localStorage: AsyncStorage, detectSessionInUrl: false});
Supabase Apple OAuth with Expo
Next I followed Supabase's tutorial for Apple authentication. I tried to use Supabase's sign in method onClick in my React Native auth component, which doesn't work:
const { user, session, error } = await supabase.auth.signIn({ provider: 'apple'});
The user/session/error all will be null
. I was a bit worried Apple OAuth on mobile wouldn't be supported by Supabase's Go True library, but I stumbled upon a PR which adds support Fix: Add id_token grant flow
Instead of using Apple as the provider I decided to use Expo's authentication library to get a token and then pass that to 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 });};
The full code is available on GitHub. Apple OAuth with Supabase and support for React Native is relatively new. Feedback is always welcome if there's a better way of doing things.
Original Link: https://dev.to/dancurtis/how-to-use-supabase-apple-oauth-in-react-native-4c4h
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To