API Keys Documentation

https://supabase.com/docs/guides/getting-started
Admin
This project provides comprehensive documentation for managing and utilizing API keys, including...
Tokens:64,774
Snippets:641
Trust Score:9.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Ionic CLI and Start New App

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react

Installs the Ionic CLI globally and initializes a new blank Ionic React app named 'supabase-ionic-react'. Navigates into the new project directory.

```bash
npm install -g @ionic/cli
ionic start supabase-ionic-react blank --type react
cd supabase-ionic-react
```

--------------------------------

### Install Flask and Supabase Client Library

Source: https://supabase.com/docs/guides/getting-started/quickstarts/flask

Install the Flask web framework and the Supabase Python client library using pip.

```bash
pip install flask supabase
```

--------------------------------

### Install All Project Dependencies

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native

Install all required dependencies for Supabase integration, including encryption libraries and Expo SecureStore.

```bash
npm install @supabase/supabase-js
npm install @react-native-async-storage/async-storage
npm install aes-js react-native-get-random-values
npm install --save-dev @types/aes-js
npx expo install expo-secure-store
```

--------------------------------

### Initialize SvelteKit Project and Install Dependencies

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-sveltekit

Use the SvelteKit skeleton project to initialize your app and install the necessary packages, including the Supabase client library.

```bash
npx sv create supabase-sveltekit
cd supabase-sveltekit
npm install
npm install @supabase/supabase-js
```

--------------------------------

### Initialize Ionic Vue App and Install Supabase JS

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-vue

Use the Ionic CLI to start a new Vue project and install the Supabase JavaScript client library.

```bash
npm install -g @ionic/cli
ionic start supabase-ionic-vue blank --type vue
cd supabase-ionic-vue
npm install @supabase/supabase-js
```

--------------------------------

### Start Hono Development Server

Source: https://supabase.com/docs/guides/getting-started/quickstarts/hono

Start the Hono development server to run the application locally.

```bash
npm run dev
```

--------------------------------

### Copy Environment File

Source: https://supabase.com/docs/guides/getting-started/quickstarts/hono

Copy the example environment file to .env for local configuration.

```bash
cp .env.example .env
```

--------------------------------

### Initialize Angular App and Install Supabase JS

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-angular

Use the Angular CLI to create a new Angular project and install the Supabase JavaScript client library.

```bash
npx ng new supabase-angular --routing false --style css --standalone false --ssr false
cd supabase-angular
npm install @supabase/supabase-js
```

--------------------------------

### Install Dependencies

Source: https://supabase.com/docs/guides/getting-started/quickstarts/hono

Install project dependencies, including Supabase client libraries, using npm.

```bash
npm install
```

--------------------------------

### Install Laravel Breeze for Authentication

Source: https://supabase.com/docs/guides/getting-started/quickstarts/laravel

Install Laravel Breeze, a starter kit that provides all of Laravel's authentication features. This requires Composer and Artisan commands.

```bash
composer require laravel/breeze --dev
php artisan breeze:install
```

--------------------------------

### Install Supabase and Storage Dependencies

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native

Install the Supabase JavaScript client and the necessary libraries for secure asynchronous storage in Expo.

```bash
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
```

--------------------------------

### Setup Supabase Authentication

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-redwoodjs

Install the Supabase authentication package for RedwoodJS. This command sets up the Supabase client and authentication hooks.

```bash
yarn redwood setup auth supabase
```

--------------------------------

### Create TanStack Start App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/tanstack

Use the TanStack Start CLI to create a new application. This command sets up a new project named 'my-app' using npm and Biome for toolchain management.

```bash
npm create @tanstack/start@latest my-app -- --package-manager npm --toolchain biome
```

--------------------------------

### Initialize Ionic Angular App

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular

Installs the Ionic CLI, creates a new blank Angular app, and navigates into the project directory.

```bash
npm install -g @ionic/cli
ionic start supabase-ionic-angular blank --type angular
cd supabase-ionic-angular
```

--------------------------------

### Install Expo Image Picker

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native

Install the `expo-image-picker` library, which is used for selecting images from the device's gallery or camera.

```bash
npx expo install expo-image-picker
```

--------------------------------

### Install Supabase Client and Node Adapter

Source: https://supabase.com/docs/guides/getting-started/quickstarts/astrojs

Install the necessary npm packages for Supabase integration and Astro's Node.js server-side rendering capabilities.

```bash
npm install @supabase/supabase-js @astrojs/node
```

--------------------------------

### Bootstrap Hono App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/hono

Use the Supabase CLI to bootstrap a new Hono example app.

```bash
npx supabase@latest bootstrap hono
```

--------------------------------

### Install Supabase JS Client Library

Source: https://supabase.com/docs/guides/getting-started/quickstarts/reactjs

Installs the `@supabase/supabase-js` package into your React application. Navigate to your project directory first.

```bash
cd my-app && npm install @supabase/supabase-js
```

--------------------------------

### Start RedwoodJS App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/redwoodjs

Run the development server to launch your RedwoodJS application.

```bash
yarn rw dev
```

--------------------------------

### Install Supabase JS Client

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react

Installs the official Supabase JavaScript client library as a project dependency.

```bash
npm install @supabase/supabase-js
```

--------------------------------

### Start Development Server

Source: https://supabase.com/docs/guides/getting-started/quickstarts/expo-react-native

Run the development server to see your Expo React Native app. Scan the QR code with Expo Go or use an emulator.

```bash
npx expo start
```

--------------------------------

### Start the Expo Development Server

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native

Run this command in your terminal to start the Expo development server. You can then press a key to test the app in a simulator or on a device.

```bash
npm start
```

--------------------------------

### Initialize a RedwoodJS App

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-redwoodjs

Use the create Redwood App command to initialize a new project. This installs the necessary packages and sets up the project structure.

```bash
yarn create redwood-app supabase-redwoodjs
cd supabase-redwoodjs
```

--------------------------------

### Initialize Supabase Client

Source: https://supabase.com/docs/guides/getting-started/quickstarts/expo-react-native

Create a helper file to initialize the Supabase client using environment variables. This example uses Expo's localStorage polyfill to persist authentication sessions.

```typescript
import 'react-native-url-polyfill/auto'
import { createClient } from '@supabase/supabase-js'
import 'expo-sqlite/localStorage/install';

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL
const supabasePublishableKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY

export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
  auth: {
    storage: localStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
})
```

--------------------------------

### Start Laravel Development Server

Source: https://supabase.com/docs/guides/getting-started/quickstarts/laravel

Run the development server to launch your Laravel application. Access it via http://127.0.0.1:8000 and use the provided URLs for registration and login.

```bash
php artisan serve
```

--------------------------------

### Run Flask Development Server

Source: https://supabase.com/docs/guides/getting-started/quickstarts/flask

Start the Flask development server to run your application. Access it via http://localhost:5000 in your browser.

```bash
python app.py
```

--------------------------------

### Initialize Svelte App with Vite

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-svelte

Use the Vite Svelte TypeScript template to create a new Svelte project. This command initializes the project and installs initial dependencies.

```bash
npm create vite@latest supabase-svelte -- --template svelte-ts
cd supabase-svelte
npm install
```

--------------------------------

### Set up Python Virtual Environment

Source: https://supabase.com/docs/guides/getting-started/quickstarts/flask

Commands to create a new project directory, initialize a virtual environment, and activate it.

```bash
mkdir my-app && cd my-app
python3 -m venv venv
source venv/bin/activate
```

--------------------------------

### Install python-dotenv

Source: https://supabase.com/docs/guides/getting-started/quickstarts/flask

Install the python-dotenv package to manage environment variables for your Flask application.

```bash
pip install python-dotenv
```

--------------------------------

### Create Supabase Client and Fetch Data in SolidJS

Source: https://supabase.com/docs/guides/getting-started/quickstarts/solidjs

This snippet demonstrates how to initialize the Supabase client with your project URL and publishable key, define a function to fetch data from the 'instruments' table, and use SolidJS's `createResource` to manage the data fetching.

```jsx
import { createClient } from "@supabase/supabase-js";
import { createResource, For } from "solid-js";

const supabase = createClient('https://<project>.supabase.co', '<sb_publishable_key>');

async function getInstruments() {
  const { data } = await supabase.from("instruments").select();
  return data;
}

function App() {
  const [instruments] = createResource(getInstruments);

  return (
    <ul>
      {(instrument) => <li>{instrument.name}</li>}
    </ul>
  );
}

export default App;
```

--------------------------------

### Create SvelteKit App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit

Initializes a new SvelteKit project using the `npm create` command.

```bash
npx sv create my-app
```

--------------------------------

### Install Nuxt Supabase Dev Dependency

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3

Install the Nuxt Supabase module as a development dependency using npm.

```bash
npm install @nuxtjs/supabase --save-dev
```

--------------------------------

### Initialize Nuxt 3 App

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3

Use the nuxi CLI to create a new Nuxt 3 project and navigate into the project directory.

```bash
npx nuxi init nuxt-user-management

cd nuxt-user-management
```

--------------------------------

### Create Vue App with npm

Source: https://supabase.com/docs/guides/getting-started/quickstarts/vue

Initialize a new Vue.js project using the npm command. This sets up the basic project structure.

```sh
npm init vue@latest my-app
```

--------------------------------

### Create Refine App with Supabase Preset

Source: https://supabase.com/docs/guides/getting-started/quickstarts/refine

Initialize a new Refine application using the `create-refine-app` command with the `refine-supabase` preset to include Supabase support.

```bash
npm create refine-app@latest -- --preset refine-supabase my-app
```

--------------------------------

### Install Supabase Client Library

Source: https://supabase.com/docs/guides/getting-started/quickstarts/expo-react-native

Installs the Supabase JavaScript client and necessary dependencies for secure storage and URL polyfilling in an Expo app.

```bash
cd my-app && npx expo install @supabase/supabase-js react-native-url-polyfill expo-sqlite
```

--------------------------------

### Install Supabase SSR Package for Next.js

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs

Install the @supabase/ssr package to enable Server-Side Authentication in your Next.js application, utilizing cookies for session management.

```bash
npm install @supabase/ssr
```

--------------------------------

### Initialize Supabase Client (JavaScript)

Source: https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit

Create a Supabase client instance using your project URL and publishable key. This client is used for all interactions with your Supabase project.

```javascript
import { createClient } from '@supabase/supabase-js';
import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY } from '$env/static/public';

export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY)
```

--------------------------------

### Initialize Supabase Client

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-swift

Initialize the Supabase client with your project's URL and publishable key. Ensure you have obtained these from your Supabase project dashboard.

```swift
import Foundation
import Supabase

let supabase = SupabaseClient(
  supabaseURL: URL(string: "YOUR_SUPABASE_URL")!,
  supabaseKey: "YOUR_SUPABASE_PUBLISHABLE_KEY"
)
```

--------------------------------

### Initialize Vue 3 App with Vite

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-vue-3

Use npm to create a new Vue 3 project with the Vite template. Navigate into the project directory.

```bash
# npm 6.x
npm create vite@latest supabase-vue-3 --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest supabase-vue-3 -- --template vue

cd supabase-vue-3
```

--------------------------------

### Install React Hook Form Packages

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-refine

Install the necessary packages for integrating React Hook Form with your Refine application. This enables form handling and validation within your Refine app.

```bash
npm install @refinedev/react-hook-form react-hook-form
```

--------------------------------

### Install Ionic PWA Elements and Capacitor Camera

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react

Installs necessary packages for camera integration and PWA element polyfills, required for handling native device features like the camera.

```bash
npm install @ionic/pwa-elements @capacitor/camera
```

--------------------------------

### Initialize SolidJS App with Supabase Template

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-solidjs

Use degit to quickly scaffold a new SolidJS project with Supabase integration. Navigate into the created directory afterwards.

```bash
npx degit solidjs/templates/tssupabase-solid
cd supabase-solid
```

--------------------------------

### Start Rails Development Server

Source: https://supabase.com/docs/guides/getting-started/quickstarts/ruby-on-rails

Runs the Rails development server, making your application accessible at http://127.0.0.1:3000.

```bash
bin/rails server
```

--------------------------------

### Create Astro App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/astrojs

Initialize a new Astro project using npm. This command sets up the basic structure for your Astro application.

```bash
npm create astro@latest my-app
cd my-app
```

--------------------------------

### Run Angular Application

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-angular

Start your Angular application to view the Supabase integration. Open your browser to localhost:4200 to see the app.

```bash
npm run start
```

--------------------------------

### Initialize Supabase Client

Source: https://supabase.com/docs/guides/getting-started/quickstarts/tanstack

Create a Supabase client instance for your application. Ensure your Supabase URL and publishable key are set as environment variables.

```typescript
import {
  createClient
} from "@supabase/supabase-js";

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
);
```

--------------------------------

### Run Flutter App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/flutter

Execute this command in your terminal to run your Flutter application on a chosen platform. Ensure Flutter is installed and configured.

```bash
flutter run
```

--------------------------------

### Initialize Supabase and Set Up App Navigation

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-flutter

This snippet initializes the Supabase client and configures the app's main navigation based on user authentication status. It also includes basic theming for the application.

```dart
import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:supabase_quickstart/pages/account_page.dart';
import 'package:supabase_quickstart/pages/login_page.dart';

Future<void> main() async {
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    publishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY',
  );
  runApp(const MyApp());
}

final supabase = Supabase.instance.client;

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supabase Flutter',
      theme: ThemeData.dark().copyWith(
        primaryColor: Colors.green,
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            foregroundColor: Colors.green,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            foregroundColor: Colors.white,
            backgroundColor: Colors.green,
          ),
        ),
      ),
      home: supabase.auth.currentSession == null
          ? const LoginPage()
          : const AccountPage(),
    );
  }
}

extension ContextExtension on BuildContext {
  void showSnackBar(String message, {bool isError = false}) {
    ScaffoldMessenger.of(this).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: isError
            ? Theme.of(this).colorScheme.error
            : Theme.of(this).snackBarTheme.backgroundColor,
      ),
    );
  }
}
```

--------------------------------

### Create Nuxt App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs

Initializes a new Nuxt application using the Nuxt CLI. This command sets up the basic project structure.

```bash
npx nuxi@latest init my-app
```

--------------------------------

### Initialize Supabase Client in Vue

Source: https://supabase.com/docs/guides/getting-started/quickstarts/vue

Create a Supabase client instance using your project's URL and publishable key. Ensure environment variables are set for these values.

```javascript
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY

export const supabase = createClient(supabaseUrl, supabasePublishableKey)
```

--------------------------------

### Fetch Data with TanStack Router Loader

Source: https://supabase.com/docs/guides/getting-started/quickstarts/tanstack

Use a loader function in TanStack Router to fetch data from Supabase before rendering the component. This example fetches 'instruments' data.

```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 (
    <ul>
      {instruments?.map((instrument) => (
        <li key={instrument.name}>{instrument.name}</li>
      ))}
    </ul>
  )
}
```

--------------------------------

### Link Supabase Project and Pull Database Schema

Source: https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react

Link your local Supabase CLI to your project and pull the database schema. Ensure you have the Supabase CLI installed and linked to your project.

```bash
supabase link --project-ref <project-id>
# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>
supabase db pull
```

--------------------------------

### Configure App Routes for Instruments

Source: https://supabase.com/docs/guides/getting-started/quickstarts/refine

Add routes for the list, create, show, and edit pages for the instruments resource. This example also shows removing the default index route.

```tsx
import { Refine } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import routerProvider, {
  DocumentTitleHandler,
  NavigateToResource,
  UnsavedChangesNotifier,
} from "@refinedev/react-router";
import { dataProvider, liveProvider } from "@refinedev/supabase";
import { BrowserRouter, Route, Routes } from "react-router-dom";

import "./App.css";
import authProvider from "./authProvider";
import { supabaseClient } from "./utility";
import { InstrumentsCreate, InstrumentsEdit, InstrumentsList, InstrumentsShow } from "./pages/instruments";

function App() {
  return (

            }
            />

              }
              />
              }
              />
              }
              />

  );
}

export default App;
```

--------------------------------

### Initialize Supabase Client in SwiftUI

Source: https://supabase.com/docs/guides/getting-started/quickstarts/ios-swiftui

Instantiate the SupabaseClient with your project's URL and public key in a Swift file. This client is used for all Supabase interactions.

```swift
import Supabase

let supabase = SupabaseClient(
  supabaseURL: URL(string: "YOUR_SUPABASE_URL")!,
  supabaseKey: "YOUR_SUPABASE_PUBLISHABLE_KEY"
)
```

--------------------------------

### Initialize Supabase Client in Android App

Source: https://supabase.com/docs/guides/getting-started/quickstarts/kotlin

Create a Supabase client instance in your Android activity using your Supabase URL and public key. The Postgrest plugin is installed for database operations.

```kotlin
import ...

val supabase = createSupabaseClient(
    supabaseUrl = "https://xyzcompany.supabase.co",
    supabaseKey = "your_publishable_key"
  ) {
    install(Postgrest)
}
...
```
Tokens:
Raw