Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better Auth Tanstack does not work in Expo / React Native (Solution inside) #5

Open
MattiaEffendi opened this issue Mar 6, 2025 · 5 comments

Comments

@MattiaEffendi
Copy link

MattiaEffendi commented Mar 6, 2025

Hi! Thank you for the library, looks promising.

Unfortunately it doesn't seem to work on React Native / Expo due to the following error:

The package at "node_modules/jose/dist/node/esm/runtime/base64url.js" attempted to import the Node standard library module "node:buffer".
It failed because the native React runtime does not include the Node standard library.

It looks like better-auth-tanstack is trying to load Jose, which seems to need node:buffer, that in RN is not available.

Is there some way to fix this or will the library be never compatible with RN? Thank you!

@daveycodez
Copy link
Contributor

I'll try to swap Jose out for an Expo compatible JWT checker. I've never used Expo before but I'll see what I can do for you

@MattiaEffendi
Copy link
Author

MattiaEffendi commented Mar 6, 2025

@daveycodez thank you! Let me know if you need anything from my side.
If that can help you, something like

const parts = token.split('.').map(part => Buffer.from(part.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString());

const payload = JSON.parse(parts[1]);

using the Buffer library could work

@daveycodez
Copy link
Contributor

@daveycodez thank you! Let me need if you need anything from my side. If that can help you, something like

const parts = token.split('.').map(part => Buffer.from(part.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString());

const payload = JSON.parse(parts[1]);

using the Buffer library could work

I swapped out Jose for your function here, let me know if you have issues. v1.2.28 just published

@MattiaEffendi
Copy link
Author

MattiaEffendi commented Mar 8, 2025

@daveycodez It works! Thank you for the fix.

However, we ran into some issues — not on your side, but with the way the Better Auth Expo plugin handles the session cookie storage on the device:

  • The Better Auth Expo plugin listens for the onSuccess event when making requests to the Better Auth backend. It uses this event to store the session cookie in the system storage, allowing it to be retrieved later (since mobile apps can't store cookies).
  • If we call refetch() inside the onSuccess callback of a function like authClient.signIn.email(), the Expo plugin hasn’t yet written the session cookie to device storage. As a result, authClient.getSession() returns null.
  • While inspecting the Better Auth Expo plugin, we noticed that whenever it updates device storage (e.g., when storing a new session cookie or clearing it on logout), it emits a $sessionSignal event on the authClient.$store event bus.
  • By subscribing to this event with useEffect, we can trigger refetch() at the correct moment, ensuring useSession behaves as expected:
useEffect(() => {
  authClient.$store.listen("$sessionSignal", (session) => {
    refetch();
  });
}, []);

This could be an intresting insight to update the docs of this repo with some advices on how to implement your hooks on Expo :)

@daveycodez
Copy link
Contributor

I'll leave this issue open until I'm done with docs site since this will be in the Expo integration guide

@daveycodez daveycodez changed the title Better Auth Tanstack does not work in Expo / React Native Better Auth Tanstack does not work in Expo / React Native (Solution inside) Mar 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants