This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

How to Use Supabase Apple OAuth in React Native


Supabase mixed with NextJS or Expo makes spinning up a aspect undertaking in just a few hours doable.

Supabase just lately added a tutorial for Expo and assist for Apple OAuth authentication. Nevertheless, Apple OAuth doesn’t work out of the field with Expo and Supabase. So I figured I might write this text and create a GitHub template.

GIF of Sign in with Apple in template



Supabase and Expo

I adopted Supabase’s Expo quickstart to get fundamental authentication working in Expo. The quickstart doesn’t talked about AsyncStorage which is required in lib/supabase.js to get it working.

My closing code:

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

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

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

Exit fullscreen mode



Supabase Apple OAuth with Expo

Subsequent I adopted Supabase’s tutorial for Apple authentication. I attempted to make use of Supabase’s register methodology onClick in my React Native auth part, which does not work:

const { person, session, error } = await supabase.auth.signIn({
  supplier: 'apple'
});
Enter fullscreen mode

Exit fullscreen mode

The person/session/error all might be null. I used to be a bit nervous Apple OAuth on cellular would not be supported by Supabase’s Go True library, however I stumbled upon a PR which provides assist Fix: Add id_token grant flow

As an alternative of utilizing Apple because the supplier I made a decision to make use of Expo’s authentication library to get a token after which go 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 supplier = 'apple';
    const authUrl = `${supabaseUrl}/auth/v1/authorize?supplier=${supplier}&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
    });
};
Enter fullscreen mode

Exit fullscreen mode

The complete code is available on GitHub. Apple OAuth with Supabase and assist for React Native is comparatively new. Suggestions is at all times welcome if there’s a greater means of doing issues.

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?