From 8f08df16001bcf35d6615ab24074e09f346fbbfe Mon Sep 17 00:00:00 2001 From: Chris Chinchilla Date: Fri, 30 Jan 2026 13:27:37 +1100 Subject: [PATCH] docs: Update reworked getSession tutorials to use correct functions and clarify why (#42269) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## 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. ✏️ Tip: You can customize this high-level summary in your review settings. --- .../guides/auth/quickstarts/react-native.mdx | 4 +- .../tutorials/with-angular.mdx | 4 +- .../quickstarts/react-native/.env.example | 2 + .../auth/quickstarts/react-native/App.tsx | 16 +- .../auth/quickstarts/react-native/app.json | 3 +- .../react-native/components/Auth.tsx | 62 +- .../react-native/package-lock.json | 946 +++++------------- .../quickstarts/react-native/package.json | 12 +- 8 files changed, 315 insertions(+), 734 deletions(-) create mode 100644 examples/auth/quickstarts/react-native/.env.example diff --git a/apps/docs/content/guides/auth/quickstarts/react-native.mdx b/apps/docs/content/guides/auth/quickstarts/react-native.mdx index 4dd3230e4cb..2d4469b2c97 100644 --- a/apps/docs/content/guides/auth/quickstarts/react-native.mdx +++ b/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: @@ -90,7 +90,7 @@ hideToc: true - 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. diff --git a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx index 0735cb1801d..5bfa9c9faf3 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx +++ b/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" diff --git a/examples/auth/quickstarts/react-native/.env.example b/examples/auth/quickstarts/react-native/.env.example new file mode 100644 index 00000000000..025c72c8abf --- /dev/null +++ b/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 \ No newline at end of file diff --git a/examples/auth/quickstarts/react-native/App.tsx b/examples/auth/quickstarts/react-native/App.tsx index a13a74f5339..5f3073ab25a 100644 --- a/examples/auth/quickstarts/react-native/App.tsx +++ b/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(null) + const [claims, setClaims] = useState(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 ( - {user && {user.id}} + {claims && {claims.sub}} ) } diff --git a/examples/auth/quickstarts/react-native/app.json b/examples/auth/quickstarts/react-native/app.json index 450df5179e3..4fa99035b5f 100644 --- a/examples/auth/quickstarts/react-native/app.json +++ b/examples/auth/quickstarts/react-native/app.json @@ -13,7 +13,8 @@ }, "assetBundlePatterns": ["**/*"], "ios": { - "supportsTablet": true + "supportsTablet": true, + "bundleIdentifier": "com.supabase.authreactnative" }, "android": { "adaptiveIcon": { diff --git a/examples/auth/quickstarts/react-native/components/Auth.tsx b/examples/auth/quickstarts/react-native/components/Auth.tsx index 553847a4ee1..bacfaa17e89 100644 --- a/examples/auth/quickstarts/react-native/components/Auth.tsx +++ b/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 ( - Email + setEmail(text)} value={email} placeholder="email@address.com" - autoCapitalize={'none'} + autoCapitalize="none" + style={styles.input} /> - Password + setPassword(text)} value={password} secureTextEntry={true} placeholder="Password" - autoCapitalize={'none'} + autoCapitalize="none" + style={styles.input} /> -