diff --git a/apps/docs/content/guides/auth/quickstarts/react-native.mdx b/apps/docs/content/guides/auth/quickstarts/react-native.mdx index cd18ca4175f8a..4dd3230e4cbae 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'} - /> - - -