Auth component with React-Native is failing

[lucksp]

Bug report

• [x] I confirm this is a bug with Supabase, not with my own application.
• [x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

In react-native + Expo app, when trying to use the <Auth /> component for the prebuilt login UI screen, the app does not compile due to the errors:

1. Text strings must be rendered within a component

   Error: Text strings must be rendered within a component. This error is located at: in a (created by B) in B (created by q) in div (created by z) in z (created by q) in div (created by z) in z (created by q) in form (created by q) in q (created by b) in div (created by P) in P (created by b) in b (created by LoginPage) in RCTView (created by View)

2. SVG is not a component type

   Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter. This error is located at: in path (created by ie) in svg (created by ie) in ie (created by be) in button (created by H) in H (created by be) in div (created by z) in z (created by be) in div (created by z) in z (created by be) in be (created by P) in div (created by P) in P (created by b) in b (created by LoginPage) in RCTView (created by View)

3. Input type is not supported

   Invariant Violation: View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter. This error is located at: in input (created by V) in V (created by q) in div (created by q) in div (created by z) in z (created by q) in div (created by z) in z (created by q) in form (created by q) in q (created by b) in div (created by P) in P (created by b) in b (created by LoginPage)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Component instance for logIn view:

import { Auth } from '@supabase/auth-ui-react';
import React from 'react';

import { supabase } from '../../src/lib/api';

export default function LoginPage() {
  return <Auth supabaseClient={supabase} providers={['google']} />;
}

create supabase client:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';
import Constants from 'expo-constants';
import { setupURLPolyfill } from 'react-native-url-polyfill';

const SUPABASE_MFI_URL = Constants.expoConfig?.extra?.SUPABASE_MFI_URL;
if (!SUPABASE_MFI_URL) throw new Error('Missing SUPABASE_MFI_URL');
const SUPABASE_MFI_API = Constants.expoConfig?.extra?.SUPABASE_MFI_API;
if (!SUPABASE_MFI_API) throw new Error('Missing SUPABASE_MFI_API');

setupURLPolyfill();

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

1. Load the app
2. See error

Expected behavior

React Native is supported.

Screenshots

RPReplay_Final1685566736.MP4

System information

• OS: MacOS
• Version of supabase-js: [e.g. 6.0.2]
• Version of Node.js: v18.16.0
• "react": "18.2.0",
• "react-native": "0.71.7",
• "expo": "~48.0.15",

Additional context

Add any other context about the problem here.

[t-murch]

Also experienced this simply following the guide. supabase/auth-ui-react: 0.4.2 react-native: 0.71.8 nodejs: 18.16.0

[lucksp]

I did find the fine print in the docs recently that says it’s not compatible with react native. Perhaps this should be closed since I bet they’re aware. But it’s also good to keep this open,maybe, to gauge interest ?

[silentworks]

This library is not compatible with React Native.