docs: update React Native auth quickstart to remove getUser (supabase#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 229c581.

* Prettier

* Add env details

* Fixes

Author: ChrisChinchilla

apps/docs/content/guides/auth/quickstarts/react-native.mdx

@@ -66,48 +66,21 @@ 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:
+
     <ProjectConfigVariables variable="url" />
     <ProjectConfigVariables variable="publishable" />
     <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
     <StepHikeCompact.Code>
 
+      <$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" }} />
 
     </StepHikeCompact.Code>
@@ -123,91 +96,11 @@ hideToc: true
 
     <StepHikeCompact.Code>
 
-      ```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 (
-          <View style={styles.container}>
-            <View style={[styles.verticallySpaced, styles.mt20]}>
-              <Input
-                label="Email"
-                leftIcon={{ type: 'font-awesome', name: 'envelope' }}
-                onChangeText={(text) => setEmail(text)}
-                value={email}
-                placeholder="email@address.com"
-                autoCapitalize={'none'}
-              />
-            </View>
-            <View style={styles.verticallySpaced}>
-              <Input
-                label="Password"
-                leftIcon={{ type: 'font-awesome', name: 'lock' }}
-                onChangeText={(text) => setPassword(text)}
-                value={password}
-                secureTextEntry={true}
-                placeholder="Password"
-                autoCapitalize={'none'}
-              />
-            </View>
-            <View style={[styles.verticallySpaced, styles.mt20]}>
-              <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
-            </View>
-            <View style={styles.verticallySpaced}>
-              <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
-            </View>
-          </View>
-        )
-      }
-
-      const styles = StyleSheet.create({
-        container: {
-          marginTop: 40,
-          padding: 12,
-        },
-        verticallySpaced: {
-          paddingTop: 4,
-          paddingBottom: 4,
-          alignSelf: 'stretch',
-        },
-        mt20: {
-          marginTop: 20,
-        },
-      })
-      ```
+      <$CodeSample
+      path="/auth/quickstarts/react-native/components/Auth.tsx"
+      lines={[[1, -1]]}
+      meta="name=components/Auth.tsx"
+      />
 
     </StepHikeCompact.Code>
 
@@ -222,35 +115,11 @@ hideToc: true
 
     <StepHikeCompact.Code>
 
-      ```tsx name=App.tsx
-      import 'react-native-url-polyfill/auto'
-      import { useState, useEffect } from 'react'
-      import { supabase } from './lib/supabase'
-      import Auth from './components/Auth'
-      import { View, Text } from 'react-native'
-      import { Session } from '@supabase/supabase-js'
-
-      export default function App() {
-        const [session, setSession] = useState<Session | null>(null)
-
-        useEffect(() => {
-          supabase.auth.getSession().then(({ data: { session } }) => {
-            setSession(session)
-          })
-
-          supabase.auth.onAuthStateChange((_event, session) => {
-            setSession(session)
-          })
-        }, [])
-
-        return (
-          <View>
-            <Auth />
-            {session && session.user && <Text>{session.user.id}</Text>}
-          </View>
-        )
-      }
-      ```
+      <$CodeSample
+      path="/auth/quickstarts/react-native/App.tsx"
+      lines={[[1, -1]]}
+      meta="name=App.tsx"
+      />
 
     </StepHikeCompact.Code>
 

examples/auth/quickstarts/react-native/.gitignore

@@ -0,0 +1,36 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+.env
+
+# typescript
+*.tsbuildinfo

examples/auth/quickstarts/react-native/App.tsx

@@ -0,0 +1,27 @@
+import 'react-native-url-polyfill/auto'
+import { useState, useEffect } from 'react'
+import { supabase } from './lib/supabase'
+import Auth from './components/Auth'
+import { View, Text } from 'react-native'
+import { User } from '@supabase/supabase-js'
+
+export default function App() {
+  const [user, setUser] = useState<User | null>(null)
+
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      setUser(user)
+    })
+
+    supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null)
+    })
+  }, [])
+
+  return (
+    <View>
+      <Auth />
+      {user && <Text>{user.id}</Text>}
+    </View>
+  )
+}

examples/auth/quickstarts/react-native/README.md

@@ -0,0 +1,54 @@
+# Supabase Auth with React Native
+
+This example demonstrates how to use Supabase Auth with React Native and Expo.
+
+## Getting started
+
+### 1. Create a Supabase project
+
+[Launch a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
+
+### 2. Configure environment variables
+
+Create a `.env` file and populate with your Supabase connection variables:
+
+You can find these in your [Supabase Dashboard](https://supabase.com/dashboard/project/_/settings/api) under Settings > API.
+
+### 3. Install dependencies
+
+```bash
+npm install
+```
+
+### 4. Start the app
+
+```bash
+npm start
+```
+
+Follow the instructions in the terminal to open the app on your device or emulator.
+
+## Project structure
+
+```
+├── App.tsx                 # Main app component
+├── components/
+│   └── Auth.tsx            # Authentication form component
+├── lib/
+│   └── supabase.ts         # Supabase client configuration
+├── app.json                # Expo configuration
+├── package.json            # Dependencies
+└── tsconfig.json           # TypeScript configuration
+```
+
+## Features
+
+- Email/password sign up
+- Email/password sign in
+- Session persistence with AsyncStorage
+- Automatic token refresh
+
+## Learn more
+
+- [Supabase Auth Documentation](https://supabase.com/docs/guides/auth)
+- [React Native Quickstart](https://supabase.com/docs/guides/auth/quickstarts/react-native)

examples/auth/quickstarts/react-native/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "Supabase Auth React Native",
+    "slug": "supabase-auth-react-native",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}