Supabase client in Expo on Web is just crashing (window is not defined)

[ThibaultJanBeyer]

Bug report

Hi, following this tutorial, I try to run supabase js client in expo and this crashes the app on web:

// ./lib/supabase.ts
import "react-native-url-polyfill/auto";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@supabase/supabase-js";

...

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

gives me:

ReferenceError: window is not defined
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:141156:9
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:141130:21
    at new Promise (<anonymous>)
    at createPromise (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:141128:12)
    at Object.getItem (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:141155:14)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:155465:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2463:26)
    at _next (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2482:11)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2487:9
http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:141156
        return window.localStorage.getItem(key);

When running the web application on Chrome. It does work in the Android native app tho’

Thank you!

[ThibaultJanBeyer]

Nevermind, it seems to be a bug in the async storage not being compatible with the web. import AsyncStorage from "@react-native-async-storage/async-storage";

So adding ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}), in the createClient solves the issue:

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}),
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Closed. Sorry.

[julian-hecker]

Your solution worked great for me, thanks :)

[ayush4345]

Nevermind, it seems to be a bug in the async storage not being compatible with the web. import AsyncStorage from "@react-native-async-storage/async-storage";

So adding ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}), in the createClient solves the issue:

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}),
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Closed. Sorry.

it is saying the platform is not defined. what I have to do for that.

[yurihikari]

Nevermind, it seems to be a bug in the async storage not being compatible with the web. import AsyncStorage from "@react-native-async-storage/async-storage";
So adding ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}), in the createClient solves the issue:

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}),
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Closed. Sorry.

it is saying the platform is not defined. what I have to do for that.

A bit late, but you need to import Platform from react native :
import { Platform } from 'react-native';