From 587729411dcf9285026e032d25499ecc9720eb86 Mon Sep 17 00:00:00 2001 From: Chris Chinchilla Date: Wed, 28 Jan 2026 11:16:28 +1100 Subject: [PATCH] docs: update React Native auth quickstart to remove getUser (#42196) * Move old functions trouble shooting to new guides * Replace getUser, update, and switch to codeblocks * Revert "Move old functions trouble shooting to new guides" This reverts commit 229c581172c196f456d5b8823fe15254ca814e33. * Prettier * Add env details * Fixes --- .../guides/auth/quickstarts/react-native.mdx | 165 +- .../auth/quickstarts/react-native/.gitignore | 36 + .../auth/quickstarts/react-native/App.tsx | 27 + .../auth/quickstarts/react-native/README.md | 54 + .../auth/quickstarts/react-native/app.json | 28 + .../react-native/assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../react-native/assets/favicon.png | Bin 0 -> 1466 bytes .../quickstarts/react-native/assets/icon.png | Bin 0 -> 22380 bytes .../react-native/assets/splash-icon.png | Bin 0 -> 17547 bytes .../react-native/components/Auth.tsx | 83 + .../quickstarts/react-native/lib/supabase.ts | 32 + .../react-native/package-lock.json | 8387 +++++++++++++++++ .../quickstarts/react-native/package.json | 31 + .../quickstarts/react-native/tsconfig.json | 6 + 14 files changed, 8701 insertions(+), 148 deletions(-) create mode 100644 examples/auth/quickstarts/react-native/.gitignore create mode 100644 examples/auth/quickstarts/react-native/App.tsx create mode 100644 examples/auth/quickstarts/react-native/README.md create mode 100644 examples/auth/quickstarts/react-native/app.json create mode 100644 examples/auth/quickstarts/react-native/assets/adaptive-icon.png create mode 100644 examples/auth/quickstarts/react-native/assets/favicon.png create mode 100644 examples/auth/quickstarts/react-native/assets/icon.png create mode 100644 examples/auth/quickstarts/react-native/assets/splash-icon.png create mode 100644 examples/auth/quickstarts/react-native/components/Auth.tsx create mode 100644 examples/auth/quickstarts/react-native/lib/supabase.ts create mode 100644 examples/auth/quickstarts/react-native/package-lock.json create mode 100644 examples/auth/quickstarts/react-native/package.json create mode 100644 examples/auth/quickstarts/react-native/tsconfig.json diff --git a/apps/docs/content/guides/auth/quickstarts/react-native.mdx b/apps/docs/content/guides/auth/quickstarts/react-native.mdx index cd18ca4175f..4dd3230e4cb 100644 --- a/apps/docs/content/guides/auth/quickstarts/react-native.mdx +++ b/apps/docs/content/guides/auth/quickstarts/react-native.mdx @@ -66,6 +66,8 @@ hideToc: true Create a helper file `lib/supabase.ts` that exports a Supabase client using your Project URL and key. + Create a `.env` file and populate with your Supabase connection variables: + @@ -73,41 +75,12 @@ hideToc: true + <$CodeSample + path="/auth/quickstarts/react-native/lib/supabase.ts" + lines={[[1, -1]]} + meta="name=lib/supabase.ts" + /> - ```ts name=lib/supabase.ts - import { AppState, Platform } from 'react-native' - import 'react-native-url-polyfill/auto' - import AsyncStorage from '@react-native-async-storage/async-storage' - import { createClient, processLock } from '@supabase/supabase-js' - - const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL - const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_PUBLISHABLE_KEY - - export const supabase = createClient(supabaseUrl, supabaseAnonKey, { - auth: { - ...(Platform.OS !== "web" ? { storage: AsyncStorage } : {}), - autoRefreshToken: true, - persistSession: true, - detectSessionInUrl: false, - lock: processLock, - }, - }) - - // Tells Supabase Auth to continuously refresh the session automatically - // if the app is in the foreground. When this is added, you will continue - // to receive `onAuthStateChange` events with the `TOKEN_REFRESHED` or - // `SIGNED_OUT` event if the user's session is terminated. This should - // only be registered once. - if (Platform.OS !== "web") { - AppState.addEventListener('change', (state) => { - if (state === 'active') { - supabase.auth.startAutoRefresh() - } else { - supabase.auth.stopAutoRefresh() - } - }) - } - ``` <$Partial path="api_settings_steps.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} /> @@ -123,91 +96,11 @@ hideToc: true - ```tsx name=components/Auth.tsx - import React, { useState } from 'react' - import { Alert, StyleSheet, View } from 'react-native' - import { supabase } from '../lib/supabase' - import { Button, Input } from '@rneui/themed' - - export default function Auth() { - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [loading, setLoading] = useState(false) - - async function signInWithEmail() { - setLoading(true) - const { error } = await supabase.auth.signInWithPassword({ - email: email, - password: password, - }) - - if (error) Alert.alert(error.message) - setLoading(false) - } - - async function signUpWithEmail() { - setLoading(true) - const { - data: { session }, - error, - } = await supabase.auth.signUp({ - email: email, - password: password, - }) - - if (error) Alert.alert(error.message) - if (!session) Alert.alert('Please check your inbox for email verification!') - setLoading(false) - } - - return ( - - - setEmail(text)} - value={email} - placeholder="email@address.com" - autoCapitalize={'none'} - /> - - - setPassword(text)} - value={password} - secureTextEntry={true} - placeholder="Password" - autoCapitalize={'none'} - /> - - -