[pull] master from supabase:master

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

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
+---
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+
+    <$Partial path="quickstart_db_setup.mdx" />
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={2}>
+
+    <StepHikeCompact.Details title="Create an Expo app">
+
+    Create a minimal Expo app using the `create-expo-app` command with the blank TypeScript template.
+
+    <$Partial path="uiLibCta.mdx" />
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash name=Terminal
+      npx create-expo-app my-app --template blank-typescript
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={3}>
+    <StepHikeCompact.Details title="Install the Supabase client library">
+
+    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.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash name=Terminal
+      cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={4}>
+    <StepHikeCompact.Details title="Declare Supabase Environment Variables">
+
+    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.
+
+    <ProjectConfigVariables variable="url" />
+    <ProjectConfigVariables variable="publishable" />
+    <ProjectConfigVariables variable="anon" />
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```text name=.env
+      EXPO_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
+      EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
+      ```
+      <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={5}>
+    <StepHikeCompact.Details title="Initialize the Supabase client">
+
+    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.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```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,
+        },
+      })
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={6}>
+    <StepHikeCompact.Details title="Query data from the app">
+
+    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.
+
+    </StepHikeCompact.Details>
+    <StepHikeCompact.Code>
+
+      ```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 (
+          <View style={styles.container}>
+            <FlatList
+              data={instruments}
+              keyExtractor={(item) => item.id.toString()}
+              renderItem={({ item }) => (
+                <Text style={styles.item}>{item.name}</Text>
+              )}
+            />
+          </View>
+        )
+      }
+
+      const styles = StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: '#fff',
+          paddingTop: 50,
+          paddingHorizontal: 16,
+        },
+        item: {
+          padding: 16,
+          borderBottomWidth: 1,
+          borderBottomColor: '#ccc',
+        },
+      })
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={7}>
+    <StepHikeCompact.Details title="Start the app">
+
+    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.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash name=Terminal
+      npx expo start
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+</StepHikeCompact>
+
+## 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)

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
+---
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+
+    <$Partial path="quickstart_db_setup.mdx" />
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={2}>
+
+    <StepHikeCompact.Details title="Create a Python app with Flask">
+
+    Create a new directory for your Python app and set up a virtual environment.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash name=Terminal
+      mkdir my-app && cd my-app
+      python3 -m venv venv
+      source venv/bin/activate
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={3}>
+    <StepHikeCompact.Details title="Install Flask and the Supabase client library">
+
+    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.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash name=Terminal
+      pip install flask supabase
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={4}>
+    <StepHikeCompact.Details title="Create Environment Variables file">
+
+    Create a `.env` file in your project root and populate it with your Supabase connection variables:
+
+    <ProjectConfigVariables variable="url" />
+    <ProjectConfigVariables variable="publishable" />
+    <ProjectConfigVariables variable="anon" />
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      <$CodeTabs>
+
+        ```text name=.env
+        SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
+        SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
+        ```
+
+      </$CodeTabs>
+
+      <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={5}>
+    <StepHikeCompact.Details title="Query data from the app">
+
+    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.
+
+    </StepHikeCompact.Details>
+    <StepHikeCompact.Code>
+
+      ```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 = '<h1>Instruments</h1><ul>'
+          for instrument in instruments:
+              html += f'<li>{instrument["name"]}</li>'
+          html += '</ul>'
+
+          return html
+
+      if __name__ == '__main__':
+          app.run(debug=True)
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={6}>
+    <StepHikeCompact.Details title="Start the app">
+
+    Run the Flask development server, go to http://localhost:5000 in a browser and you should see the list of instruments.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```bash name=Terminal
+      python app.py
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+</StepHikeCompact>
+
+## 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)