File size: 11,170 Bytes
c212805 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 | <br />
<p align="center">
<a href="https://supabase.io">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--light.svg">
<img alt="Supabase Logo" width="300" src="https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/logo-preview.jpg">
</picture>
</a>
<h1 align="center">Supabase JS SDK</h1>
<h3 align="center">Isomorphic JavaScript SDK for Supabase - combining Auth, Database, Storage, Functions, and Realtime.</h3>
<p align="center">
<a href="https://supabase.com/docs/guides/getting-started">Guides</a>
·
<a href="https://supabase.com/docs/reference/javascript/start">Reference Docs</a>
·
<a href="https://supabase.github.io/supabase-js/supabase-js/v2/spec.json">TypeDoc</a>
</p>
</p>
<div align="center">
[](https://github.com/supabase/supabase-js/actions?query=branch%3Amaster)
[](https://www.npmjs.com/package/@supabase/supabase-js)
[](#license)
[](https://pkg.pr.new/~/supabase/supabase-js)
</div>
## Usage
First of all, you need to install the library:
```sh
npm install @supabase/supabase-js
```
Then you're able to import the library and establish the connection with the database:
```js
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'your-publishable-key')
```
### UMD
You can use plain `<script>`s to import supabase-js from CDNs, like:
```html
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
```
or even:
```html
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
```
Then you can use it from a global `supabase` variable:
```html
<script>
const { createClient } = supabase
const _supabase = createClient('https://xyzcompany.supabase.co', 'your-publishable-key')
console.log('Supabase Instance: ', _supabase)
// ...
</script>
```
### ESM
You can use `<script type="module">` to import supabase-js from CDNs, like:
```html
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm'
const supabase = createClient('https://xyzcompany.supabase.co', 'your-publishable-key')
console.log('Supabase Instance: ', supabase)
// ...
</script>
```
### Deno
You can use supabase-js in the Deno runtime via [JSR](https://jsr.io/@supabase/supabase-js):
```js
import { createClient } from 'jsr:@supabase/supabase-js@2'
```
### Custom `fetch` implementation
`supabase-js` uses the runtime's global `fetch` to make HTTP requests, but an alternative `fetch` implementation can be provided as an option. This is useful in environments where the global `fetch` is unavailable or where you want to customize request behavior:
```js
import { createClient } from '@supabase/supabase-js'
// Provide a custom `fetch` implementation as an option
const supabase = createClient('https://xyzcompany.supabase.co', 'your-publishable-key', {
global: {
fetch: (...args) => fetch(...args),
},
})
```
### Distributed Tracing with OpenTelemetry
The Supabase JS SDK can attach W3C/OpenTelemetry trace context headers (`traceparent`, `tracestate`, `baggage`) to outgoing requests, enabling end-to-end request tracing from your client application through Supabase services.
Trace propagation is **opt-in** and disabled by default. When enabled, headers are only attached to requests targeting Supabase domains (`*.supabase.co`, `*.supabase.in`, `localhost`).
#### Enable trace propagation
```js
import { createClient } from '@supabase/supabase-js'
import { trace } from '@opentelemetry/api'
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
tracePropagation: true,
})
const tracer = trace.getTracer('my-app')
await tracer.startActiveSpan('fetch-users', async (span) => {
// This request now includes the active trace context.
const { data, error } = await supabase.from('users').select('*')
span.end()
})
```
If `@opentelemetry/api` is not installed or no active context exists, the SDK silently no-ops.
#### Advanced configuration
```typescript
interface TracePropagationOptions {
// Enable trace propagation (default: false).
enabled?: boolean
// Respect upstream sampling decisions (default: true).
// When true, headers are skipped if the upstream trace is not sampled.
respectSamplingDecision?: boolean
}
```
```js
// Always propagate, even for non-sampled traces.
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
tracePropagation: { enabled: true, respectSamplingDecision: false },
})
```
## Support Policy
This section outlines the scope of support for various runtime environments in Supabase JavaScript client.
### Node.js
We only support Node.js versions that are in **Active LTS** or **Maintenance** status as defined by the [official Node.js release schedule](https://nodejs.org/en/about/previous-releases#release-schedule). This means we support versions that are currently receiving long-term support and critical bug fixes.
When a Node.js version reaches end-of-life and is no longer in Active LTS or Maintenance status, Supabase will drop it in a **minor release**, and **this won't be considered a breaking change**.
> ⚠️ **Node.js 18 Deprecation Notice**
>
> Node.js 18 reached end-of-life on April 30, 2025. As announced in [our deprecation notice](https://github.com/orgs/supabase/discussions/37217), support for Node.js 18 was dropped in version `2.79.0`.
>
> If you must use Node.js 18, please use version `2.78.0`, which is the last version that supported Node.js 18.
> ⚠️ **Node.js 20 Deprecation Notice**
>
> Node.js 20 reached end-of-life on April 30, 2026. As announced in [our deprecation notice](https://github.com/orgs/supabase/discussions/45715), support for Node.js 20 was dropped in version `2.110.0`.
>
> If you must use Node.js 20, please use version `2.109.0`, which is the last version that supported Node.js 20.
### Deno
We support Deno versions that are currently receiving active development and security updates. We follow the [official Deno release schedule](https://docs.deno.com/runtime/fundamentals/stability_and_releases/) and only support versions from the `stable` and `lts` release channels.
When a Deno version reaches end-of-life and is no longer receiving security updates, Supabase will drop it in a **minor release**, and **this won't be considered a breaking change**.
### Browsers
All modern browsers are supported. We support browsers that provide native `fetch` API. For Realtime features, browsers must also support native `WebSocket` API.
### Bun
We support Bun runtime environments. Bun provides native fetch support and is compatible with Node.js APIs. Since Bun does not follow a structured release schedule like Node.js or Deno, we support current stable versions of Bun and may drop support for older versions in minor releases without considering it a breaking change.
### React Native
We support React Native environments with fetch polyfills provided by the framework. Since React Native does not follow a structured release schedule, we support current stable versions and may drop support for older versions in minor releases without considering it a breaking change.
### Cloudflare Workers
We support Cloudflare Workers runtime environments. Cloudflare Workers provides native fetch support. Since Cloudflare Workers does not follow a structured release schedule, we support current stable versions and may drop support for older versions in minor releases without considering it a breaking change.
### Important Notes
- **Experimental features**: Features marked as experimental may be removed or changed without notice
## Known Build Warnings
### `UNUSED_EXTERNAL_IMPORT` in Vite / Rollup / Nuxt
When bundling your app, you may see warnings like:
```
"PostgrestError" is imported from external module "@supabase/postgrest-js" but never used in "...supabase-js/dist/index.mjs".
"FunctionRegion", "FunctionsError", "FunctionsFetchError", "FunctionsHttpError" and "FunctionsRelayError" are imported from external module "@supabase/functions-js" but never used in "...".
```
**This is a false positive — your bundle is fine.** Here is why it happens:
`@supabase/supabase-js` re-exports `PostgrestError`, `FunctionsError`, and related symbols so you can import them directly from `@supabase/supabase-js`. However, our build tool merges all imports from the same package into a single import statement in the built output:
```js
// dist/index.mjs (simplified)
import { PostgrestClient, PostgrestError } from '@supabase/postgrest-js'
// ^ used internally ^ re-exported for you
```
Your bundler checks which names from that import are used _in the code body_, and flags `PostgrestError` as unused because it only appears in an `export` statement — not called or assigned. The export itself is the usage, but downstream bundlers don't track this correctly. This is a known Rollup/Vite limitation with re-exported external imports.
**Nothing is broken.** Tree-shaking and bundle size are unaffected.
To suppress the warning:
**Vite / Rollup (`vite.config.js` or `rollup.config.js`):**
```js
export default {
build: {
rollupOptions: {
onwarn(warning, warn) {
if (warning.code === 'UNUSED_EXTERNAL_IMPORT' && warning.exporter?.includes('@supabase/'))
return
warn(warning)
},
},
},
}
```
**Nuxt (`nuxt.config.ts`):**
```ts
export default defineNuxtConfig({
vite: {
build: {
rollupOptions: {
onwarn(warning, warn) {
if (warning.code === 'UNUSED_EXTERNAL_IMPORT' && warning.exporter?.includes('@supabase/'))
return
warn(warning)
},
},
},
},
})
```
## Contributing
We welcome contributions! Please see our [Contributing Guide](../../../CONTRIBUTING.md) for details on how to get started.
For major changes or if you're unsure about something, please open an issue first to discuss your proposed changes.
### Building
```bash
# From the monorepo root
pnpm nx build supabase-js
# Or with watch mode for development
pnpm nx build supabase-js --watch
```
### Testing
There's a complete guide on how to set up your environment for running locally the `supabase-js` integration tests. Please refer to [TESTING.md](./TESTING.md).
## Badges
[](https://coveralls.io/github/supabase/supabase-js?branch=master)
|