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 -->

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

@@ -66,7 +66,7 @@ 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:
+    Rename `.env.example` to `.env` and populate with your Supabase connection variables:
 
     <ProjectConfigVariables variable="url" />
     <ProjectConfigVariables variable="publishable" />
@@ -90,7 +90,7 @@ hideToc: true
   <StepHikeCompact.Step step={5}>
     <StepHikeCompact.Details title="Create a login component">
 
-    Let's set up a React Native component to manage logins and sign ups.
+    Create a React Native component to manage logins and sign ups. The app later uses the [`getClaims`](/docs/reference/javascript/auth-getclaims) method in `App.tsx` to validate the local JWT before showing the signed-in user.
 
     </StepHikeCompact.Details>
 

apps/docs/content/guides/getting-started/tutorials/with-angular.mdx

@@ -46,7 +46,9 @@ lines={[[1, -1]]}
 meta="name=src/environments/environment.ts"
 />
 
-Now you have the API credentials in place, create a `SupabaseService` with `ng g s supabase` and add the following code to initialize the Supabase client and implement functions to communicate with the Supabase API.
+With the API credentials in place, create a `SupabaseService` with `ng g s supabase` and add the following code to initialize the Supabase client and implement functions to communicate with the Supabase API.
+
+This uses the [`getUser`](/docs/reference/javascript/auth-getuser) method to get the current user details if there is an existing session. This method performs a network request to the Supabase Auth server.
 
 <$CodeSample
 path="/user-management/angular-user-management/src/app/supabase.service.ts"

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
 }