useSupabaseClient composable for Nuxt
Use the useSupabaseClient() composable to get a Supabase client instance for making database queries and auth calls in Nuxt components.
framework-quickstarts
144 notes in this subject, read out of this brain and free to use. This is page 2 of 3.
useSupabaseUser composable for Nuxt
Use the useSupabaseUser() composable provided by the Supabase Nuxt module to access the current user information in components.
Nuxt 3 Supabase environment variables setup
Create a .env file with SUPABASE_URL and SUPABASE_KEY (the publishable key). These environment variables will be exposed in the browser, which is safe because Row Level Security is enabled on the database.
Nuxt 3 Supabase installation with @nuxtjs/supabase
Install @nuxtjs/supabase as a dev dependency: npm install @nuxtjs/supabase --save-dev. Add @nuxtjs/supabase to the modules array in nuxt.config.ts. No manual Supabase initialization is required; the library handles it automatically based on environment variables.
Nuxt 3 initialization with nuxi init
Create a new Nuxt 3 app using npx nuxi init app-name and cd into the directory. This scaffolds a basic Nuxt 3 project.
RedwoodJS Supabase environment variables setup
Add three environment variables to the .env file: SUPABASE_URL (the Supabase project URL), SUPABASE_KEY (the public publishable key), and SUPABASE_JWT_SECRET (the JWT secret). Then in redwood.toml, add the web section with includeEnvironmentVariables set to include only SUPABASE_URL and SUPABASE_KEY, as these are safe to expose in the browser.
RedwoodJS app structure: web and api sides
A RedwoodJS application is split into two parts: the frontend project called 'web' and the backend project called 'api'. These are separate node projects within a single monorepo. Code on the web side runs in the user's browser, while code on the api side runs on a server. The api side implements a GraphQL API with business logic organized into services that can be called from external GraphQL requests and other internal services. The web side is built with React and uses Redwood's router to map URL paths to Page components with automatic code-splitting.
RedwoodJS Node.js and Yarn version requirements
RedwoodJS requires Node.js version >= 14.x <= 16.x and Yarn >= 1.15. Yarn is required because RedwoodJS relies on it to manage packages in workspaces for the web and api sides.
Initialize RedwoodJS app for Supabase integration
Create a new RedwoodJS app using the Create Redwood App command: 'yarn create redwood-app supabase-redwoodjs'. Then install the Supabase client by running 'yarn redwood setup auth supabase'. When prompted to overwrite the auth file, say yes to set up the Supabase client and authentication hooks.
RedwoodJS web/src/App.js Supabase client configuration
Import AuthProvider from '@redwoodjs/auth' and createClient from '@supabase/supabase-js'. Create the Supabase client with: 'const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)'. Wrap the RedwoodApolloProvider with AuthProvider passing client={supabase} and type='supabase'.
RedwoodJS and Supabase: Prisma not used in this guide
This guide does not use Prisma to connect to the Supabase Postgres database or Prisma migrations. Instead, the Supabase client is used on both the web side and api side for data fetching. Do not run 'yarn rw prisma migrate' commands and check build commands on deployment to ensure Prisma won't reset the database. Prisma does not support cross-schema foreign keys, so introspecting the schema fails due to how the Supabase public schema references auth.users.
RedwoodJS useAuth hook provides Supabase authentication methods
The useAuth() hook from '@redwoodjs/auth' provides convenient access to logIn, logOut, currentUser, and the supabase client instance. This hook is used to interact with the Supabase API for authentication and data operations.
RedwoodJS magic link authentication example
In an Auth component, use the useAuth hook to get the logIn method. Call logIn({ email }) to send a magic link. The login function returns an object with an error property if it fails. Handle the error with error.error_description or error.message for display.
RedwoodJS profile fetch from Supabase database
Use supabase.auth.user() to get the current user. Then query the profiles table with: supabase.from('profiles').select(`username, website, avatar_url`).eq('id', user.id).single(). Handle status 406 as a valid response indicating no profile exists yet.
RedwoodJS profile update to Supabase database
Use supabase.from('profiles').upsert(updates, { returning: 'minimal' }) to insert or update profile data. The updates object should contain id, username, website, avatar_url, and updated_at fields. Setting returning to 'minimal' prevents the inserted value from being returned.
RedwoodJS avatar upload to Supabase Storage
Use supabase.storage.from('avatars').upload(filePath, file) to upload an image file. The filePath can be constructed as a random filename with extension. Handle upload errors with uploadError. Use supabase.storage.from('avatars').download(path) to retrieve and display the uploaded image by creating an object URL from the returned blob data.
RedwoodJS CLI alias for redwood commands
The 'rw' command is an alias for 'redwood'. Use 'yarn rw' to run Redwood CLI commands such as 'yarn rw dev' or 'yarn rw generate'.
Refine useLogOut hook for session termination
The useLogOut() hook is a Refine auth hook that calls the authProvider.logout method to end the user session. Use it to implement logout functionality in components.
Refine useForm hook for CRUD operations
The useForm() hook from @refinedev/react-hook-form is a data hook that manages form state, field validation, and submission using React Hook Form. It exposes onFinish function for form submission and formLoading state. Behind the scenes, it invokes dataProvider.getOne to fetch data from Supabase endpoints and dataProvider.update when onFinish() is called.
Refine app routing setup
Define routes in App.tsx using React Router's Route component. Map the /login path to the Auth component for login/signup, and the index path to the Account component for user profile management. Import routerProvider from @refinedev/react-router and pass it to the Refine component.
Run Refine development server
Run the development server with 'npm run dev' command. The app will be accessible at localhost:5173 by default.
Refine framework overview and Supabase integration
Refine is a React-based framework for building data-heavy applications like admin panels, dashboards, and CRUD apps. It separates concerns into layers backed by React contexts: the auth layer uses authProvider methods for authentication/authorization, and the data layer uses dataProvider methods for CRUD operations. Refine provides the @refinedev/supabase package which auto-generates authProvider and dataProvider methods at project initialization.
Initialize Refine app with Supabase preset
Use the command 'npm create refine-app@latest -- --preset refine-supabase' to initialize a Refine app with Supabase backend. This preset installs the @refinedev/supabase package which includes the supabase-js dependency out-of-the-box.
Required dependencies for Refine form handling
Install @refinedev/react-hook-form and react-hook-form packages to use React Hook Form inside Refine apps. Run: npm install @refinedev/react-hook-form react-hook-form
Refine supabaseClient configuration
The create refine-app command generates a Supabase client in src/utility/supabaseClient.ts. It requires two environment variables: VITE_SUPABASE_URL (the API URL) and VITE_SUPABASE_PUBLISHABLE_KEY (the publishable key). Store these in a .env.local file. The supabaseClient is used to fetch calls to Supabase endpoints and is instrumental in implementing authentication via authProvider methods and CRUD actions via dataProvider methods.
Refine component props for Supabase integration
The <Refine /> component accepts props: dataProvider={dataProvider(supabaseClient)}, liveProvider={liveProvider(supabaseClient)}, authProvider={authProvider}, routerProvider={routerProvider}, and options with syncWithLocation and warnWhenUnsavedChanges settings. The dataProvider prop uses a dataProvider() function with supabaseClient to generate the data provider object.
Refine useLogin hook for authentication
The useLogin() hook is a Refine auth hook that provides a mutate function (aliased as 'login') to trigger the authProvider.login method. It also exposes isLoading state for form submission handling. Use it inside components to authenticate users with OTP.
Refine useGetIdentity hook for current user
The useGetIdentity() hook is a Refine auth hook that returns the identity of the authenticated user by invoking authProvider.getIdentity method under the hood. Use it to get the current user's data in components.
createSupabaseContext API for SolidStart routes
In a SolidStart API route handler, use `createSupabaseContext(request, { auth: 'user' })` to validate JWT locally, scope the Supabase client to the authenticated user, and access user claims. Pass `auth: 'none'` to make a route public.
Install supabase-js for SolidJS
Run `npm install @supabase/supabase-js` to add the Supabase JavaScript client library to a SolidJS project.
Supabase client initialization in SolidJS
Create a helper file (such as `src/supabaseClient.tsx`) to initialize the Supabase client with API URL and key from environment variables. These variables are safe to expose on the browser when Row Level Security is enabled on the database.
Profile management component in SolidJS
After authentication, create an Account component to allow users to edit their profile details and manage their account.
SolidJS user management app tutorial
A complete tutorial for building a user management app with SolidJS and Supabase is available, including initialization with degit, authentication via magic links, profile management, and profile photo uploads using Supabase Storage.
Initialize SolidJS with degit and Typescript template
To set up a new SolidJS project, run `npx degit solidjs/templates/ts supabase-solid` followed by `cd supabase-solid`.
SolidStart server routes with @supabase/server
To add protected server endpoints with SolidStart, install `@supabase/server` and use `createSupabaseContext` in API route handlers. This validates incoming request JWT locally, scopes the Supabase client to the authenticated user via RLS, and exposes user claims.
Install @supabase/server for SolidStart
Run `npm install @supabase/server` to use protected server endpoints and API route authentication in a SolidStart application.
SolidStart API route example with authenticated database query
Example SolidStart API route that validates request JWT and queries profiles table: Import APIEvent and createSupabaseContext from @supabase/server. Call createSupabaseContext with auth: 'user', destructure the supabase client and userClaims, then query the profiles table with the user's ID.
Svelte environment variables for Supabase
Save the following environment variables in a .env file: VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY. These variables will be exposed in the browser and are safe because Row Level Security is enabled on the database.
Svelte app initialization with Vite and TypeScript
Initialize a Svelte app using the Vite Svelte TypeScript template with the command: npm create vite@latest supabase-svelte -- --template svelte-ts. Then navigate to the project directory and run npm install.
Install supabase-js dependency for Svelte
Install the supabase-js library using: npm install @supabase/supabase-js
Svelte default development port with Vite
Svelte with Vite runs on port 5173 by default. To update Supabase authentication redirects, go to Authentication > URL Configuration and change the Site URL to http://localhost:5173/
Update src/app.d.ts for TypeScript support
When using TypeScript in SvelteKit, update `src/app.d.ts` to define types for `event.locals.supabase` to avoid TypeScript compiler complaints about the Supabase client on the server.
SvelteKit project initialization command
To start a new SvelteKit project, use `npx sv create supabase-sveltekit` and select "SvelteKit minimal" with TypeScript enabled.
Install supabase-js library
Install the Supabase client library using `npm install @supabase/supabase-js`.
SvelteKit environment variables for Supabase
Configure the following environment variables in a `.env` file: PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_PUBLISHABLE_KEY. These must be set for the Supabase client to work.
Install @supabase/ssr for SvelteKit
Install the SSR package using `npm install @supabase/ssr` to configure Supabase to use Cookies, which are required for server-side rendering. This automatically configures the client to use Cookies and makes the user's session available throughout the entire SvelteKit stack including pages, layouts, server, and hooks.
Create src/hooks.server.ts for server-side Supabase client
Add a `src/hooks.server.ts` file to initialize the Supabase client on the server side when using @supabase/ssr package.
SvelteKit dev server startup
Start the SvelteKit development server by running `npm run dev`. This generates the `./$types` files referenced in the project and serves the application on localhost:5173.
supabase-swift package dependency
The supabase-swift SDK is available at https://github.com/supabase/supabase-swift and can be added to an Xcode project using the Add Package Dependencies feature.
Swift SDK: Initialize SupabaseClient with URL and key
Create a SupabaseClient instance by passing the supabaseURL and supabaseKey. The supabaseKey should be the publishable key. Example: `let supabase = SupabaseClient(supabaseURL: URL(string: "YOUR_SUPABASE_URL")!, supabaseKey: "YOUR_SUPABASE_PUBLISHABLE_KEY")`
Vue 3 user management example repository
A complete example of a Vue 3 user management app with Supabase is available at https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management
Initialize Vue 3 app with Vite
To initialize a Vue 3 app called supabase-vue-3 using Vite, run: npm create vite@latest supabase-vue-3 --template vue (for npm 6.x) or npm create vite@latest supabase-vue-3 -- --template vue (for npm 7+). Then navigate to the directory with cd supabase-vue-3.
Vue 3 environment variables for Supabase
Configure environment variables in a .env file with VITE_SUPABASE_URL set to your Supabase project URL and VITE_SUPABASE_PUBLISHABLE_KEY set to your Supabase publishable key. These variables are exposed in the browser and are safe to use because Row Level Security is enabled on the database.
Create Supabase client helper file
Create an src/supabase.js helper file to initialize the Supabase client using the VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY environment variables.
Install supabase-js dependency
Install the supabase-js library as a dependency for Vue 3 projects using: npm install @supabase/supabase-js
Vue 3 auth component with Magic Links
Create an src/components/Auth.vue component to handle user authentication, including Magic Link sign-in option that allows users to sign in with their email without passwords.
Vue 3 account management component
Create an src/components/Account.vue component to allow signed-in users to edit their profile details and manage their account.
Vue 3 profile photo upload with Avatar component
Create an src/components/Avatar.vue component that allows users to upload profile photos using Supabase Storage.
Jetpack Compose navigation with typed routes in Android
Implement a Destination interface with route and title properties. Create specific destination objects (ProductListDestination, ProductDetailsDestination, etc.) that extend Destination. For destinations with parameters, define navArgument() with type (e.g., NavType.StringType) and create a helper function like createRouteWithParam(id) to build the route string. Use NavHost with composable() blocks to render screens and pass the NavController for navigation.
Android Kotlin app setup with Supabase
To build an Android app with Supabase, first create a new Android project using Android Studio's Base Activity (Jetpack Compose) template. Set up API credentials securely in a local.properties file at the project root with SUPABASE_PUBLISHABLE_KEY and SUPABASE_URL, reading these values through BuildConfig in build.gradle. Add Supabase dependencies: postgrest-kt, storage-kt, auth-kt, and ktor-client libraries. Install Hilt for dependency injection by adding hilt-android and related dependencies, creating a ManageProductApplication class with @HiltAndroidApp annotation, and updating AndroidManifest.xml to reference it.