Type 'AsyncStorageStatic' is missing the following properties from type 'Storage': length, key

[DarkPonyBee]

Bug report

localStorage field in options of the createClient method doesn't support type for AsyncStorage.

Describe the bug

I tried to use supabase authentication in the React Native TypeScript mobile application. In React Native application, it uses the AsyncStorage as a storage. When I pass the AsyncStorage as a localStorage, it triggers Type AsyncStorageStatic is missing the following properties from type Storage. error.

To Reproduce

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

export const supabase = createClient(
  URL, API_KEY, {
    localStorage: AsyncStorage
  }
)

Expected behavior

localStorage should support type for AsyncStorage.

Screenshots

System information

• OS: macOS
• Version of @supabase/supabase-js: 1.6.0

[ChronSyn]

Not sure if this is an issue still, but consider switching to the updated community library @react-native-async-storage/async-storage.

The API for the libraries has changed over recent years, and Apollo client had a similar issue not too long ago.

[DarkPonyBee]

Hi @ChronSyn

Updated the react-native-async-storage, but still have the same issue.

[ChronSyn]

With "@react-native-async-storage/async-storage": "^1.14.1", I use this as my Supabase context wrapper:

import React, { FC } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { SupabaseContextProvider as SBCP } from "use-supabase";
import { createClient } from "@supabase/supabase-js";
export const supabaseClient = createClient(
  "https://your_url.supabase.co",
  "your_public_key",
  {
    localStorage: AsyncStorage as any,
    autoRefreshToken: true,
    persistSession: true
  }
);
export const SupabaseContextProvider = SBCP;

export const SupabaseWrapper: FC<{}> = ({ children }) => (
  <SupabaseContextProvider client={supabaseClient}>
    {children}
  </SupabaseContextProvider>
);

Then, my root component render/return looks like this;

export default function App() {
  return (
    <SupabaseWrapper>
      <MyScreen />
    </SupabaseWrapper>
  );
}

I've had no problems logging in using something like this on a TouchableOpacity.onPress() inside MyScreen:

await supabaseClient.auth
  .signIn({
    email: username,
    password,
  })
  .then(({ data, error }) => {
    if (error) {
      console.log("Error logging in: ", error);
      showAlert(`Login error: ${error.message}`);
      return;
    } else {
      console.log({ data });
      showAlert(`Login successful!`);
    }
  });

I'm using Expo (SDK 40) managed workflow if that makes any difference.

I had some problems using .from(), but those are fixed with the below. The next issue you might come across is URLSearchParams not implemented, a solution for which can be found at https://github.com/facebook/react-native/issues/23922#issuecomment-648096619

For reference and to ensure that the solution is available if that ticket is ever deleted:

install the polyfill yarn add react-native-url-polyfill add this to your index.js

/* polyfills */
/** URL polyfill */
import 'react-native-url-polyfill/auto';

Explanation: To ensure it being light weight, react native doesn't fully support everything the web supports. That's why sometimes we need RN polyfills

[kangmingtay]

Hey everyone, seems like this is no longer an issue now that we've typed the supported storage to account for RN's async storage. (https://github.com/supabase/gotrue-js/blob/master/src/lib/types.ts#L225)

Will be closing this issue but feel free to reopen and elaborate if it's still a problem.