diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 12e13193f12ba..9fc45bcbbde8e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -355,6 +355,10 @@ export const gettingstarted: NavMenuConstant = {
name: 'Hono',
url: '/guides/getting-started/quickstarts/hono',
},
+ {
+ name: 'Expo React Native',
+ url: '/guides/getting-started/quickstarts/expo-react-native',
+ },
{
name: 'Flutter',
url: '/guides/getting-started/quickstarts/flutter',
@@ -371,6 +375,15 @@ export const gettingstarted: NavMenuConstant = {
name: 'SvelteKit',
url: '/guides/getting-started/quickstarts/sveltekit' as `/${string}`,
},
+ {
+ name: 'Flask (Python)',
+ url: '/guides/getting-started/quickstarts/flask' as `/${string}`,
+ enabled: !jsOnly,
+ },
+ {
+ name: 'TanStack Start',
+ url: '/guides/getting-started/quickstarts/tanstack' as `/${string}`,
+ },
{
name: 'Laravel PHP',
url: '/guides/getting-started/quickstarts/laravel' as `/${string}`,
@@ -381,7 +394,6 @@ export const gettingstarted: NavMenuConstant = {
url: '/guides/getting-started/quickstarts/ruby-on-rails' as `/${string}`,
enabled: !jsOnly,
},
-
{
name: 'SolidJS',
url: '/guides/getting-started/quickstarts/solidjs',
diff --git a/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx b/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
new file mode 100644
index 0000000000000..f4fd73b4cb678
--- /dev/null
+++ b/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
@@ -0,0 +1,195 @@
+---
+title: 'Use Supabase with Expo React Native'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Expo app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---
+
+
+
+
+
+ <$Partial path="quickstart_db_setup.mdx" />
+
+
+
+
+
+
+
+ Create a minimal Expo app using the `create-expo-app` command with the blank TypeScript template.
+
+ <$Partial path="uiLibCta.mdx" />
+
+
+
+
+
+ ```bash name=Terminal
+ npx create-expo-app my-app --template blank-typescript
+ ```
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use the `@supabase/supabase-js` client library which provides a convenient interface for working with Supabase from a React Native app.
+
+ Navigate to the Expo app and install `supabase-js` along with the required dependencies for secure storage and URL handling.
+
+
+
+
+
+ ```bash name=Terminal
+ cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
+ ```
+
+
+
+
+
+
+
+
+ Create a `.env` file in the root of your project and populate it with your Supabase connection variables.
+
+ Expo requires environment variables to be prefixed with `EXPO_PUBLIC_` to be accessible in your app code.
+
+
+
+
+
+
+
+
+
+ ```text name=.env
+ EXPO_PUBLIC_SUPABASE_URL=
+ EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
+ ```
+ <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
+
+
+
+
+
+
+
+
+ Create a helper file at `lib/supabase.ts` to initialize the Supabase client using the environment variables.
+
+ The code below uses [AsyncStorage](https://www.npmjs.com/package/@react-native-async-storage/async-storage) to persist the user session in your app.
+
+
+
+
+
+ ```ts name=lib/supabase.ts
+ import 'react-native-url-polyfill/auto'
+ import { createClient } from '@supabase/supabase-js'
+ import AsyncStorage from '@react-native-async-storage/async-storage'
+
+ const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL
+ const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY
+
+ export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+ auth: {
+ storage: AsyncStorage,
+ autoRefreshToken: true,
+ persistSession: true,
+ detectSessionInUrl: false,
+ },
+ })
+ ```
+
+
+
+
+
+
+
+
+ Replace the contents of `App.tsx` with the following code to fetch and display the instruments from your database.
+
+ Use `useEffect` to fetch the data when the component mounts and display the query result using React Native components.
+
+
+
+
+ ```tsx name=App.tsx
+ import { useEffect, useState } from 'react'
+ import { StyleSheet, View, FlatList, Text } from 'react-native'
+ import { supabase } from './lib/supabase'
+
+ export default function App() {
+ const [instruments, setInstruments] = useState([])
+
+ useEffect(() => {
+ getInstruments()
+ }, [])
+
+ async function getInstruments() {
+ const { data } = await supabase.from('instruments').select()
+ setInstruments(data)
+ }
+
+ return (
+
+ item.id.toString()}
+ renderItem={({ item }) => (
+ {item.name}
+ )}
+ />
+
+ )
+ }
+
+ const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ paddingTop: 50,
+ paddingHorizontal: 16,
+ },
+ item: {
+ padding: 16,
+ borderBottomWidth: 1,
+ borderBottomColor: '#ccc',
+ },
+ })
+ ```
+
+
+
+
+
+
+
+
+ Run the development server and scan the QR code with the Expo Go app on your phone, or press `i` for iOS simulator or `a` for Android emulator.
+
+
+
+
+
+ ```bash name=Terminal
+ npx expo start
+ ```
+
+
+
+
+
+
+
+## Next steps
+
+- Set up [Auth](/docs/guides/auth) for your app
+- [Insert more data](/docs/guides/database/import-data) into your database
+- Upload and serve static files using [Storage](/docs/guides/storage)
diff --git a/apps/docs/content/guides/getting-started/quickstarts/flask.mdx b/apps/docs/content/guides/getting-started/quickstarts/flask.mdx
new file mode 100644
index 0000000000000..4944233d846e1
--- /dev/null
+++ b/apps/docs/content/guides/getting-started/quickstarts/flask.mdx
@@ -0,0 +1,154 @@
+---
+title: 'Use Supabase with Python'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Python app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---
+
+
+
+
+
+ <$Partial path="quickstart_db_setup.mdx" />
+
+
+
+
+
+
+
+ Create a new directory for your Python app and set up a virtual environment.
+
+
+
+
+
+ ```bash name=Terminal
+ mkdir my-app && cd my-app
+ python3 -m venv venv
+ source venv/bin/activate
+ ```
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use Flask for the web framework and the `supabase-py` client library which provides a convenient interface for working with Supabase from a Python app.
+
+ Install both packages using pip.
+
+
+
+
+
+ ```bash name=Terminal
+ pip install flask supabase
+ ```
+
+
+
+
+
+
+
+
+ Create a `.env` file in your project root and populate it with your Supabase connection variables:
+
+
+
+
+
+
+
+
+
+ <$CodeTabs>
+
+ ```text name=.env
+ SUPABASE_URL=
+ SUPABASE_PUBLISHABLE_KEY=
+ ```
+
+
+
+ <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
+
+
+
+
+
+
+
+
+ Install the `python-dotenv` package to load environment variables:
+
+ ```bash
+ pip install python-dotenv
+ ```
+
+ Create an `app.py` file and add a route that fetches data from your `instruments` table using the Supabase client.
+
+
+
+
+ ```python name=app.py
+ import os
+ from flask import Flask
+ from supabase import create_client, Client
+ from dotenv import load_dotenv
+
+ load_dotenv()
+
+ app = Flask(__name__)
+
+ supabase: Client = create_client(
+ os.environ.get("SUPABASE_URL"),
+ os.environ.get("SUPABASE_PUBLISHABLE_KEY")
+ )
+
+ @app.route('/')
+ def index():
+ response = supabase.table('instruments').select("*").execute()
+ instruments = response.data
+
+ html = 'Instruments
'
+ for instrument in instruments:
+ html += f'- {instrument["name"]}
'
+ html += '
'
+
+ return html
+
+ if __name__ == '__main__':
+ app.run(debug=True)
+ ```
+
+
+
+
+
+
+
+
+ Run the Flask development server, go to http://localhost:5000 in a browser and you should see the list of instruments.
+
+
+
+
+
+ ```bash name=Terminal
+ python app.py
+ ```
+
+
+
+
+
+
+## Next steps
+
+- Set up [Auth](/docs/guides/auth) for your app
+- [Insert more data](/docs/guides/database/import-data) into your database
+- Upload and serve static files using [Storage](/docs/guides/storage)
diff --git a/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx b/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
new file mode 100644
index 0000000000000..655434f82e2dd
--- /dev/null
+++ b/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
@@ -0,0 +1,164 @@
+---
+title: 'Use Supabase with TanStack Start'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a TanStack Start app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---
+
+
+
+
+
+ <$Partial path="quickstart_db_setup.mdx" />
+
+
+
+
+
+
+
+ - Create a TanStack Start app using the official CLI.
+
+ <$Partial path="uiLibCta.mdx" />
+
+
+
+
+
+ ```bash name=Terminal
+ npm create @tanstack/start@latest my-app -- --package-manager npm --toolchain biome
+ ```
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a TanStack Start app.
+
+ Navigate to the TanStack Start app and install `supabase-js`.
+
+
+
+
+
+ ```bash name=Terminal
+ cd my-app && npm install @supabase/supabase-js
+ ```
+
+
+
+
+
+
+
+
+ Create a `.env` file in the root of your project and populate with your Supabase connection variables:
+
+
+
+
+
+
+
+
+
+ <$CodeTabs>
+
+ ```text name=.env
+ VITE_SUPABASE_URL=
+ VITE_SUPABASE_PUBLISHABLE_KEY=
+ ```
+
+
+
+ <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
+
+
+
+
+
+
+
+
+ Create a new file at `src/utils/supabase.ts` to initialize the Supabase client.
+
+
+
+
+
+ ```ts name=src/utils/supabase.ts
+ import { createClient } from "@supabase/supabase-js";
+
+ export const supabase = createClient(
+ import.meta.env.VITE_SUPABASE_URL,
+ import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
+ );
+ ```
+
+
+
+
+
+
+
+
+ Replace the contents of `src/routes/index.tsx` with the following code to add a loader function that fetches the instruments data and displays it on the page.
+
+
+
+
+ ```tsx name=src/routes/index.tsx
+ import { createFileRoute } from '@tanstack/react-router'
+ import { supabase } from '../utils/supabase'
+
+ export const Route = createFileRoute('/')({
+ loader: async () => {
+ const { data: instruments } = await supabase.from('instruments').select()
+ return { instruments }
+ },
+ component: Home,
+ })
+
+ function Home() {
+ const { instruments } = Route.useLoaderData()
+
+ return (
+
+ {instruments?.map((instrument) => (
+ - {instrument.name}
+ ))}
+
+ )
+ }
+ ```
+
+
+
+
+
+
+
+
+ Run the development server, go to http://localhost:3000 in a browser and you should see the list of instruments.
+
+
+
+
+
+ ```bash name=Terminal
+ npm run dev
+ ```
+
+
+
+
+
+
+## Next steps
+
+- Set up [Auth](/docs/guides/auth) for your app
+- [Insert more data](/docs/guides/database/import-data) into your database
+- Upload and serve static files using [Storage](/docs/guides/storage)
diff --git a/apps/docs/features/command/Quickstarts.tsx b/apps/docs/features/command/Quickstarts.tsx
index 3b0f75cc264b3..66570336a34a5 100644
--- a/apps/docs/features/command/Quickstarts.tsx
+++ b/apps/docs/features/command/Quickstarts.tsx
@@ -35,6 +35,10 @@ const quickstarts = [
label: 'SolidJS',
url: '/guides/getting-started/quickstarts/solidjs',
},
+ {
+ label: 'TanStack Start',
+ url: '/guides/getting-started/quickstarts/tanstack',
+ },
{
label: 'Vue',
url: '/guides/getting-started/quickstarts/vue',
diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts
index 830fb594ca297..1b3be0840f3f6 100644
--- a/apps/docs/next-env.d.ts
+++ b/apps/docs/next-env.d.ts
@@ -1,6 +1,5 @@
///
///
-///
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.