Local Storage problem on React Native (MMKV cache)

[lyqht]

Bug report

Describe the bug

This bug is pretty similar to what is reported in #276, where I'm getting errors like

 ERROR  [TypeError: undefined is not an object (evaluating 'this.localStorage.getItem')]

So far I have developed the login and sign up functionality for my app by ignoring the error, but now that I'm trying to implement the sign out functionality, the following warning stops me from proceeding any further.

 WARN  Possible Unhandled Promise Rejection (id: 8):
TypeError: undefined is not an object (evaluating 'this.localStorage.removeItem')

The solution in #276 is to declare the storage manually as async storage, however I'm using MMKV for storage instead.

I will get the following typescript prompt when I try to set the storage as MMKV.

Reading the documentation on initializing the client further, I also tried the following configuration to create the client, but it still tries to access this.localStorage.

const supabase = createClient(supabaseUrl, supabaseKey, {
  autoRefreshToken: false,
  persistSession: false,
  detectSessionInUrl: false,
});

Do I have to swap out my cache provider entirely? or is there a way to work around this? Any help will be appreciated!

To Reproduce

Reference project can be found at Billy.

Expected behavior

• I would like to continue using MMKV.

System information

• OS: macOS
• Platform: React Native
• Version of supabase-js: ^1.33.2
• Version of Node.js: 16 LTS

[lyqht]

For anyone who is keen, the workaround that I came up with for using MMKV as cache which helps to remove the errors and warnings

class Cache {
  private storage;
  constructor() {
    this.storage = new MMKV();
    if (__DEV__) {
      initializeMMKVFlipper({default: this.storage});
    }
  }

  // -------------------------------------
  // these methods are added so that the Supabase client can access MMKV as cache

  getItem(key: string) {
    return this.storage.getString(key);
  }

  setItem(key: string, value: string) {
    return this.storage.set(key, value);
  }

  removeItem(key: string) {
    if (this.storage.contains(key)) {
      this.storage.delete(key);
    }
  }
  // -------------------------------------
}

[kiwicopple]

Thanks for the workaround @lyqht . I'll close this since you've shared that snippet!

To answer your question:

Do I have to swap out my cache provider entirely?

The auth library simply uses the localstorage browser interface, so you can use any storage library which uses the same interface. There are quite a few out there, but if you are using a library that does not adhere to this interface you have two options:

1. Add another library which does, and "inject" it into supabase-js, like we do in our examples within our docs
2. Patch your library, like @lyqht did above

[thorwebdev]

In case helpful, here an example with AsyncStorage: https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions/blob/main/app/lib/supabase.ts#L12-L17

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage as any,
  autoRefreshToken: true,
  persistSession: true,
  detectSessionInUrl: false,
});

[vbylen]

For anyone using react-native-mmkv this also works:

import { SUPABASE_URL, SUPABASE_ANON_KEY } from './constants';
import { createClient } from "@supabase/supabase-js";
import { MMKV } from 'react-native-mmkv'

const storage = new MMKV({ id: 'supabase-storage' })

const mmkvStorageConfig = {
  setItem: (key, data) => storage.set(key, data),
  getItem: (key) => storage.getString(key),
  removeItem: (key) => storage.delete(key),
}

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  localStorage: mmkvStorageConfig,
  persistSession: true,
  autoRefreshToken: true,
  detectSessionInUrl: false
});

[bryanltobing]

For anyone using react-native-mmkv this also works:

in typescript

import 'react-native-url-polyfill/auto';
import { SupportedStorage, createClient } from '@supabase/supabase-js';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV({ id: 'supabase-storage' });

const mmkvSupabaseSupportedStorage = {
  setItem: (key, data) => storage.set(key, data),
  getItem: (key) => storage.getString(key) ?? null,
  removeItem: (key) => storage.delete(key),
} satisfies SupportedStorage;

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: mmkvSupabaseSupportedStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});