Not working with React Native

[kiwicopple]

This is a Hacktoberfest task!
You can read more about Hacktoberfest on our blog and see all tasks on our Hacktoberfest Project Board.

Summary

This library isn't working with React native because it tries to access localstorage.

Details

In ReactNative, there is no localstorage, it is instead AsyncStorage. We need to rewrite any calls to localstorage to guard against this. It might be better to split out all storage calls to a helper file so that we can extend it in the future.

[kiwicopple]

Possible alternative approach by Yuyi: https://github.com/yuya-fujimoto/supabase-js/commit/986d6f09c99df371c01beb50bd84bdb81de6f3f5

[izqalan]

I got it to work on react-native app (#14 ) but only auth.signIn doesn't seem to work as expected on react-native app.

after digging through the code it seems like api.signInWithEmail results retruns 400 Could not read password grant params: EOF on React-Native app. It work fine on postman and on example app.

my Implementation. (the same as in /example/src/app.js)

[kiwicopple]

Hey @izqalan I merged your changes as they are a great start. I'll leave this open until we have a chance to fix the bug on api.signInWithEmail, which I will need some time to research

[kiwicopple]

Hey @izqalan - can you please describe how you used AsyncStorage in your PR #14?

I've created a PR with an example here #21 but it doesn't look like AsyncStorage matches the interface:

Did you add a full wrapper around AsyncStorage to make it compatible?

[izqalan]

Hey @kiwicopple

hmm that's strange.
I just import AsyncStorage from @react-native-community/async-storage and specify it on localStorage option.
This is how I initialize GoTrueClient class previously on my React Native app.

Also, it might be worth mentioning I'm using JavaScript for the app.

[kiwicopple]

Hey @izqalan I mentioned you here, but I thought I'd drop a notification in this thread too since you're subscribed.

Do you have any public code for your RN app?

[ghost]

@kiwicopple I've tried looking into this, but it appears your problem was fixed already with #24.

The example in your PR builds fine now.

[kiwicopple]

thanks for testing @tjg1 - I saw your comment in the PR 🙏

Could I get a small favour, could you confirm the PR in our main repo works for you? supabase/supabase#315

If it is, can you let me know if you're on Android or iOS? (I only have iOS and I'm still getting the error: Could not read password grant params: EOF. Looks like a server error, but the code works when I run it in a browser.

[ghost]

hi @kiwicopple,

I have just tried this out. Indeed that error gets returned by the server. It works in a browser and in React Native with a debugger attached. But it seems that while debugging, the RN code is actually running in a web worker in my browser.

I will dig deeper into this. I have a jailbroken iOS device setup with https://github.com/nabla-c0d3/ssl-kill-switch2, so I can get the actual HTTP request made by RN and compare it to the one made by the browser.

[ghost]

I've done that and reproduced it with cURL.

React Native on iOS sends Content-Type: application/x-www-form-urlencoded even though the body of the request is UTF-8 JSON. Your server gets confused and returns 400 {"code":400,"msg":"Could not read password grant params: EOF"}.

Changing the header to Content-Type: text/plain, the same request succeeds.

There is still a type warning for AsyncStorageStatic, so it may need a wrapper.

[github-actions]

🎉 This issue has been resolved in version 1.7.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[irfaan]

UPDATE: For anyone looking, this is what worked for me:

1. Include react-native-url-polyfill ([0.59.x] URLSearchParams 'Error: not implemented' facebook/react-native#23922 (comment))
2. Include + pod-install: react-native-async-storage (Supabase Hiccups on Mobile (React-Native) supabase#1293 (comment))

---

Hi! This issue persists on the latest version of supabase-js (^1.17.0):

undefined is not an object (evaluating 'this.localStorage.getItem')

react-native: 17.0.1
Supabase-js: 1.17.0

Happens with and without react-native-url-polyfill v. 1.3.0 (see facebook/react-native#23922 (comment))

[m0a]

it's work!

react-native: 0.64.23,
@react-native-async-storage/async-storage: 1.15.17
@supabase/supabase-js: 1.30.0

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

const supabaseUrl = "xxxxx"
const supabaseAnonKey = 'xxx'

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {localStorage: AsyncStorage})