Things to look out for using Supabase with React Native

The Supabase JS library was built with the web in mind and that gets us most of way with regard to using it in React Native. However there are a few areas of incompatibilities. I will be talking about those in this article.

Local Storage

The Supabase auth client uses local storage for caching purposes. This is not available in React Native so we have to use AsyncStorage instead. We set it in the clientClient function like this:

const supabase: SupabaseClient = createClient(supabaseURL, anonKey, {
  localStorage: AsyncStorage,
});

URLSearchParams Polyfill

If you try to use the library now you are likely to get the following error:

Error: URLSearchParams.set is not implemented

You can fix this with the react-native-url-polyfill library. After installing it you just import it at the top of your index file.

import 'react-native-url-polyfill/auto';

Detect Session in URL

A recent update of the Supabase JS library tries to access the location.href object which is not available in react native. We can get around this by disabling the detect session in URL functionality. We do this in the options parameter passed to the createClient function.

const supabase: SupabaseClient = createClient(supabaseURL, anonKey, {
  localStorage: AsyncStorage,
  detectSessionInUrl: false
});

Handling third party auth providers.

To use third party sign-in providers, you’ll need to implement OAuth in your application. There are libraries that may help with this but I chose to do it manually as I wasn’t sure how well they worked.

The general approach is that you implement a custom linking scheme for your application that you can pass to the Supabase auth server to return a token that you can use to login.

For example to sign in using Google. You’d need a url that looks like this:

let googleAuthUrl = `${SUPABASE_URL}/auth/v1/authorize?provider=google&redirect_to=${SUPABASE_URL}/auth/v1/callback`;

Then you’d need to tell Supabase to your custom app scheme as the callback URL. You can do that in the auth settings of the Supabase dashboard.

To initiate the process, you’d use Linking.openURL passing it the auth URL.

Linking.openURL(googleAuthUrl);

Then you’d add event listeners to detect when the callback url is invoked.

Linking.addEventListener('url', event => {
let urlString = event.url.replace('app#', 'app?');
let url = new URL(urlString);
let refreshToken = url.searchParams.get('refresh_token');
if (refreshToken) {
    supabase.auth.signIn({refreshToken}).then(res => {});
}
});

Here we listen for when our app scheme is called then replace the hash character with a question mark so that it can be parsed. Then we use the refreshToken parameter to sign in.

With these issues out of the way you should be able to have fun with Supabase and React Native.

If you prefer video content, I also talk about this on YouTube!