platform-specific implementation

58 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Accessing custom claims in JavaScript client

Use the jwt-decode package to decode the access_token JWT from the auth session. Listen to auth state changes with supabase.auth.onAuthStateChange, decode session.access_token using jwtDecode(), and extract custom claims like jwt.user_role.

Create new Supabase project

To create a new Postgres database, start a new Project in Supabase by using the create new project link in the Supabase dashboard. Enter your project details and remember to store your password somewhere safe. Your database will be available in less than a minute.

Find database password

The database password can be found on the dashboard at the Database password page. You can reset the database password there if you do not have it.

Find database connection strings

Database connection strings are available on the dashboard at the Database connection strings page. This page provides direct and pooler connection details including the connection string and parameters.

Find API credentials

API credentials are available on the dashboard at the API credentials page. This includes your serverless API URL and publishable keys.

Kotlin project setup: Database schema setup

Set up the database schema by copying and pasting SQL code into the Supabase SQL Editor and running it. The schema can be accessed at app.supabase.com/project/_/sql.

Kotlin project setup: Create Supabase project

To set up a Supabase project, go to app.supabase.com and create a new project. Enter your project details and wait for the new database to launch.

Express OAuth callback implementation

Create a GET route at /auth/callback. Extract code and next from req.query, use createServerClient with parseCookieHeader from req.headers.cookie and serializeCookieHeader for Set-Cookie headers, call supabase.auth.exchangeCodeForSession(code), and res.redirect(303, `/${next.slice(1)}`).

Client-side signInWithOAuth redirects automatically

In the browser, when calling signInWithOAuth with a provider and redirectTo option, the method automatically redirects to the OAuth provider's authentication endpoint, which then redirects back to your specified callback URL.

Next.js OAuth callback implementation

Create a GET route at app/auth/callback/route.ts. Extract the code query parameter, call supabase.auth.exchangeCodeForSession(code) using a server-created Supabase client, and redirect to the next parameter (default '/') or /auth/auth-code-error on error. Handle x-forwarded-host header for load balancer scenarios.

SvelteKit OAuth callback implementation

Create a GET handler at src/routes/auth/callback/+server.js. Extract the code and next parameters from url.searchParams, call supabase.auth.exchangeCodeForSession(code), and redirect(303, `/${next.slice(1)}`) on success or to /auth/auth-code-error on error.

Astro OAuth callback implementation

Create a GET route at src/pages/auth/callback.ts. Use createServerClient with cookie handling, extract code and next from searchParams, call supabase.auth.exchangeCodeForSession(code), and redirect(next) on success or to /auth/auth-code-error on error.

Remix OAuth callback implementation

Create a loader at app/routes/auth.callback.tsx. Use createServerClient with parseCookieHeader and serializeCookieHeader for cookie handling, extract code and next from requestUrl.searchParams, call supabase.auth.exchangeCodeForSession(code), and redirect(next, { headers: responseHeaders }) on success or to /auth/auth-code-error on error.

Create a new Supabase project in Dashboard

To create a new project in Supabase, go to the Supabase Dashboard, click 'Create a new project', enter your project details, and wait for the new database to launch.

Set up database schema using User Management Starter

In the Supabase Dashboard, navigate to the SQL Editor page, go to the Community > Quickstarts tab, select 'User Management Starter', and click 'Run' to set up the database schema.

Pull database schema to local project

You can pull the database schema down to your local project by running 'supabase link --project-ref <project-id>' followed by 'supabase db pull'. The project-id can be found in your project's dashboard URL at https://supabase.com/dashboard/project/<project-id>.

Create migration file for User Management Starter

When working locally, you can create a new migration file by running 'supabase migration new user_management_starter'.

Google Colab setup with Supabase Vecs

Google Colab is a hosted Jupyter Notebook service that provides free access to computing resources including GPUs and TPUs. It can be used to manage Supabase vector collections using the Supabase Vecs Python client.

Install Vecs in Google Colab

To use Supabase Vecs in Google Colab, install it using pip install vecs at the top of the notebook and click Execute (ctrl+enter).

Connect Supabase to Google Colab with Postgres URI

Create a Vecs client in Google Colab by importing vecs and calling vecs.create_client(DB_CONNECTION) with a Postgres connection string obtained from the project dashboard Connect button. The connection string format is postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres.

Create vector collection in Google Colab

Use vx.get_or_create_collection(name="collection_name", dimension=3) to create a collection. Then call collection.upsert() with a list of tuples containing vector identifiers, vector arrays, and metadata dictionaries. This creates a table in the database within the vecs schema.

Query vectors with similarity search in Google Colab

Call collection.query() with parameters: query_vector (required list/array), limit (number of records to return), filters (metadata filters as dict), measure (distance metric like 'cosine_distance'), include_value (boolean for returning distance values), and include_metadata (boolean for returning record metadata). Returns array of matching vector identifiers.

Vector collection upsert format

Upsert vectors as tuples with three components: vector identifier (string), vector array (list or numpy array), and metadata dictionary. Example: ("vec0", [0.1, 0.2, 0.3], {"year": 1973}).

Query vector distance measures

The measure parameter in collection.query() accepts distance metrics such as 'cosine_distance' to determine how vector similarity is calculated.

Vector query missing index warning

Queries without a covering index for the specified distance measure return a warning: 'Query does not have a covering index for cosine_distance'. Indexes can be created through the Vecs API.

Swift UIKit App Delegate handle deep link

Forward the URL from application(_:open:options:) and from didFinishLaunchingWithOptions if the app was launched cold via the link. In didFinishLaunchingWithOptions, check launchOptions[.url] and call supabase.auth.handle(url). In application(_:open:options:), call supabase.auth.handle(url).

React Native deep link setup with Expo

In Expo React Native, register a custom URL scheme in your app config (app.json, app.config.js) under the 'scheme' key, e.g. {"expo": {"scheme": "com.supabase"}}. Add the redirect URL (e.g. com.supabase://**) to your auth settings. Use expo-auth-session to get the redirectTo with makeRedirectUri(), and implement OAuth handler with signInWithOAuth() setting skipBrowserRedirect to true, then open the auth URL with WebBrowser.openAuthSessionAsync(). For magic links, use signInWithOtp() with emailRedirectTo parameter. Handle incoming URLs using Linking.useLinkingURL() and call createSessionFromUrl() to extract and set the access_token and refresh_token via supabase.auth.setSession().

React Native OAuth and magic link code example

```tsx import { Button } from "react-native"; import { makeRedirectUri } from "expo-auth-session"; import * as QueryParams from "expo-auth-session/build/QueryParams"; import * as WebBrowser from "expo-web-browser"; import * as Linking from "expo-linking"; import { supabase } from "app/utils/supabase"; WebBrowser.maybeCompleteAuthSession(); // required for web only const redirectTo = makeRedirectUri(); const createSessionFromUrl = async (url: string) => { const { params, errorCode } = QueryParams.getQueryParams(url); if (errorCode) throw new Error(errorCode); const { access_token, refresh_token } = params; if (!access_token) return; const { data, error } = await supabase.auth.setSession({ access_token, refresh_token, }); if (error) throw error; return data.session; }; const performOAuth = async () => { const { data, error } = await supabase.auth.signInWithOAuth({ provider: "github", options: { redirectTo, skipBrowserRedirect: true, }, }); if (error) throw error; const res = await WebBrowser.openAuthSessionAsync( data?.url ?? "", redirectTo ); if (res.type === "success") { const { url } = res; await createSessionFromUrl(url); } }; const sendMagicLink = async () => { const { error } = await supabase.auth.signInWithOtp({ email: "valid.email@supabase.io", options: { emailRedirectTo: redirectTo, }, }); if (error) throw error; // Email sent. }; export default function Auth() { const url = Linking.useLinkingURL(); if (url) createSessionFromUrl(url); return ( <> <Button onPress={performOAuth} title="Sign in with GitHub" /> <Button onPress={sendMagicLink} title="Send Magic Link" /> </> ); } ``` This example shows how to implement OAuth signin with GitHub and magic link signin in React Native with Expo, including handling the redirect URL to extract and set the session.

Flutter deep link redirect URL format and setup

In Flutter, go to auth settings and enter your app redirect callback in the 'Additional Redirect URLs' field. The redirect callback URL format is [YOUR_SCHEME]://[YOUR_HOSTNAME], for example io.supabase.flutterquickstart://login-callback. Choose unique scheme and hostname values; typically a reverse domain of your website is used for the scheme. Flutter supports deep links on Android, iOS, Web, macOS, and Windows.

Flutter Android deep link intent filter configuration

In AndroidManifest.xml, add an intent-filter to your activity with android.intent.action.VIEW action, android.intent.category.DEFAULT and android.intent.category.BROWSABLE categories, and a data element with android:scheme="YOUR_SCHEME" and android:host="YOUR_HOSTNAME". The android:host attribute is optional for deep links.

Flutter iOS deep link custom URL scheme declaration

In ios/Runner/Info.plist, declare the custom URL scheme under CFBundleURLTypes. Add a dict with CFBundleTypeRole set to "Editor" and CFBundleURLSchemes array containing your scheme string [YOUR_SCHEME]. This can also be configured through Xcode's Target Info editor under URL Types.

Flutter Windows deep link setup steps

Windows deep link setup requires: declare a SendAppLinkToInstance method in <PROJECT_DIR>\windows\runner\win32_window.h, add app_links_windows plugin include in win32_window.cpp, implement SendAppLinkToInstance method in win32_window.cpp to find and dispatch deep links to existing windows, call SendAppLinkToInstance in CreateAndShow method, and register the URL scheme in the Windows registry (use url_protocol package or include registry modifications in your installer for deregistration).

Flutter macOS Info.plist deep link configuration

In macos/Runner/Info.plist inside the <plist><dict> section, add CFBundleURLTypes array containing a dict with CFBundleURLName (abstract name, can be blank) and CFBundleURLSchemes array containing your scheme string.

Swift deep link redirect URL setup

Go to auth settings page and enter your app redirect URL in the 'Additional Redirect URLs' field. The redirect callback URL should have the format [YOUR_SCHEME]://[YOUR_HOSTNAME], for example io.supabase.user-management://login-callback. The scheme must be unique across the user's device; typically a reverse domain of your website is used.

Swift custom URL scheme registration in Info.plist

In Info.plist, declare the custom URL scheme under CFBundleURLTypes with a dict containing CFBundleTypeRole set to "Editor" and CFBundleURLSchemes array with your scheme string. Example: CFBundleURLSchemes array contains "io.supabase.user-management". Alternatively, use Xcode's Target Info Editor following Apple's official documentation.

Swift handle incoming deep link URL with supabase.auth.handle

When the OS opens your app via the redirect URL, pass that URL to supabase.auth.handle(_:) to complete the sign-in. The handle(_:) method is a convenience wrapper that calls session(from:) and logs any error.

Swift SwiftUI handle deep link with onOpenURL modifier

Use the onOpenURL view modifier on your root view to handle incoming URLs: SomeView().onOpenURL { url in supabase.auth.handle(url) }

Swift UIKit Scene Delegate handle deep link

In SceneDelegate.swift, handle both cold launch and URL received while scene is running. In scene(_:willConnectTo:options:), iterate through connectionOptions.urlContexts and call supabase.auth.handle(context.url). In scene(_:openURLContexts:), get the first URL from URLContexts and call supabase.auth.handle(url).

Android Kotlin deep link redirect URL format

The redirect callback URL must have the format [YOUR_SCHEME]://[YOUR_HOSTNAME], for example io.supabase.user-management://login-callback. The scheme must be unique across the user's device; typically a reverse domain of your website is used.

Android Kotlin AndroidManifest deep link intent filter

Add an intent-filter to your activity with android.intent.action.VIEW action, android.intent.category.DEFAULT and android.intent.category.BROWSABLE categories, and a data element with android:scheme="YOUR_SCHEME" and android:host="YOUR_HOSTNAME".

Android Kotlin Supabase Auth Client deep link configuration

Specify the scheme and host in the Supabase Client: install(Auth) { host = "login-callback"; scheme = "io.supabase.user-management" }

Android Kotlin handle deep links on app open

Call Auth#handleDeeplinks when the app opens: override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState); supabase.handleDeeplinks(intent) }. The user will be authenticated when the app receives a valid deep link.

Astro setup requires @supabase/ssr library

To use Supabase Auth with server-side rendering in Astro, install @supabase/supabase-js, @supabase/ssr for server-side auth, and @astrojs/node adapter. Install with: npm install @supabase/supabase-js @supabase/ssr @astrojs/node

Astro SSR configuration uses Node adapter

To enable server-side rendering in Astro, configure astro.config.mjs with output set to 'server' and use the @astrojs/node adapter with mode set to 'standalone'.

Astro Supabase environment variables

Astro with Supabase requires two environment variables in .env.local: PUBLIC_SUPABASE_URL (the Supabase project URL) and PUBLIC_SUPABASE_PUBLISHABLE_KEY (the publishable API key). The PUBLIC_ prefix makes them accessible to client-side code.

Astro form submission uses Astro actions

Handle form submissions client-side by importing actions from astro:actions and calling the server action (e.g., actions.signUp(formData)). The result contains a data property with success and message fields.

Next.js Supabase Auth quickstart with create-next-app

Use the create-next-app command with the with-supabase template to create a Next.js app pre-configured with cookie-based auth, TypeScript, and Tailwind CSS. Run: npx create-next-app -e with-supabase

Next.js Supabase environment variables

Rename .env.example to .env.local and populate with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY. These are public variables used on the client side.

React Native Supabase client setup with environment variables

To set up Supabase Auth with React Native, create a helper file at lib/supabase.ts that exports a Supabase client. Store your Project URL and publishable key in a .env file (rename from .env.example). The file references ProjectConfigVariables for url and publishable values to configure the client.

React Native dependencies for Supabase Auth

Install the following dependencies for Supabase Auth with React Native: @supabase/supabase-js, @react-native-async-storage/async-storage, @rneui/themed, and react-native-url-polyfill.

Create React Native Expo app for Supabase Auth

Create a React Native app using create-expo-app with the command: npx create-expo-app -t expo-template-blank-typescript my-app

Install Supabase dependencies in React Native project

Install Supabase and required dependencies with: cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage @rneui/themed react-native-url-polyfill

React Supabase client library installation

Install the Supabase JavaScript client library by running npm install @supabase/supabase-js in your React project directory.

Create React app with Vite

Create a new React application using Vite by running npm create vite@latest my-app -- --template react.

Supabase environment variables for React

Configure Supabase environment variables by renaming .env.example to .env.local and populating it with your Supabase connection variables (Project URL and key).

Create Supabase client in React App.jsx

In App.jsx, create a Supabase client using your Project URL and key to enable authentication functionality in your React application.

Set Site URL for local development

Configure your Site URL to https://localhost:5173 for local development with Supabase authentication.

Start React development server

Start the React development server by running npm run dev, then access the application at http://localhost:5173 to test authentication functionality.

Give your agent this brain