docs: Update reworked getSession tutorials to use correct functions and clarify why (#42269)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Clarified React Native and Angular auth guides with improved
environment setup and JWT validation guidance.

* **New Features**
  * Added a React Native environment template for quickstart.
  * Example app now uses JWT claims for user state and display.

* **Chores**
* Replaced UI library components with native React Native components for
compatibility.
  * Updated package configuration and dependency versions.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

examples/auth/quickstarts/react-native/.env.example

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
+EXPO_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

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

@@ -3,25 +3,27 @@ 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'
+import { JwtPayload } from '@supabase/supabase-js'
 
 export default function App() {
-  const [user, setUser] = useState<User | null>(null)
+  const [claims, setClaims] = useState<JwtPayload | null>(null)
 
   useEffect(() => {
-    supabase.auth.getUser().then(({ data: { user } }) => {
-      setUser(user)
+    supabase.auth.getClaims().then(({ data: { claims } }) => {
+      setClaims(claims)
     })
 
-    supabase.auth.onAuthStateChange((_event, session) => {
-      setUser(session?.user ?? null)
+    supabase.auth.onAuthStateChange(() => {
+      supabase.auth.getClaims().then(({ data: { claims } }) => {
+        setClaims(claims)
+      })
     })
   }, [])
 
   return (
     <View>
       <Auth />
-      {user && <Text>{user.id}</Text>}
+      {claims && <Text>{claims.sub}</Text>}
     </View>
   )
 }

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

@@ -13,7 +13,8 @@
     },
     "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.supabase.authreactnative"
     },
     "android": {
       "adaptiveIcon": {

examples/auth/quickstarts/react-native/components/Auth.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import { Alert, StyleSheet, View } from 'react-native'
+import { Alert, StyleSheet, View, Text, TextInput, TouchableOpacity } from 'react-native'
 import { supabase } from '../lib/supabase'
-import { Button, Input } from '@rneui/themed'
 
 export default function Auth() {
   const [email, setEmail] = useState('')
@@ -37,31 +36,43 @@ export default function Auth() {
   return (
     <View style={styles.container}>
       <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Input
-          label="Email"
-          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+        <Text style={styles.label}>Email</Text>
+        <TextInput
           onChangeText={(text) => setEmail(text)}
           value={email}
           placeholder="email@address.com"
-          autoCapitalize={'none'}
+          autoCapitalize="none"
+          style={styles.input}
         />
       </View>
       <View style={styles.verticallySpaced}>
-        <Input
-          label="Password"
-          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+        <Text style={styles.label}>Password</Text>
+        <TextInput
           onChangeText={(text) => setPassword(text)}
           value={password}
           secureTextEntry={true}
           placeholder="Password"
-          autoCapitalize={'none'}
+          autoCapitalize="none"
+          style={styles.input}
         />
       </View>
       <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
+        <TouchableOpacity
+          style={[styles.button, loading && styles.buttonDisabled]}
+          onPress={() => signInWithEmail()}
+          disabled={loading}
+        >
+          <Text style={styles.buttonText}>Sign in</Text>
+        </TouchableOpacity>
       </View>
       <View style={styles.verticallySpaced}>
-        <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
+        <TouchableOpacity
+          style={[styles.button, loading && styles.buttonDisabled]}
+          onPress={() => signUpWithEmail()}
+          disabled={loading}
+        >
+          <Text style={styles.buttonText}>Sign up</Text>
+        </TouchableOpacity>
       </View>
     </View>
   )
@@ -80,4 +91,31 @@ const styles = StyleSheet.create({
   mt20: {
     marginTop: 20,
   },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#86939e',
+    marginBottom: 6,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#86939e',
+    borderRadius: 4,
+    padding: 12,
+    fontSize: 16,
+  },
+  button: {
+    backgroundColor: '#2089dc',
+    borderRadius: 4,
+    padding: 12,
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 })

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

@@ -10,22 +10,18 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@rneui/base": "^5.0.0",
-    "@rneui/themed": "^5.0.0",
-    "@supabase/supabase-js": "^2.93.1",
+    "@supabase/supabase-js": "^2.93.2",
     "expo": "~54.0.32",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-safe-area-context": "~5.6.0",
+    "react-native-safe-area-context": "~5.6.2",
     "react-native-url-polyfill": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.6",
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^13.2.0",
-    "@types/react": "~19.1.0",
-    "typescript": "~5.9.2"
+    "@types/react": "~19.1.10",
+    "typescript": "~5.9.3"
   },
   "private": true
 }