Supabase

@ginjou/with-supabase provides a Ginjou fetcher and a Ginjou auth provider for Supabase.

Most apps pass the same Supabase client to both.

It does not change the higher-level Ginjou API. It only connects those hooks to the Supabase JavaScript client.

Installation

Install @supabase/supabase-js together with the adapter.

pnpm add @ginjou/with-supabase @supabase/supabase-js

yarn add @ginjou/with-supabase @supabase/supabase-js

npm install @ginjou/with-supabase @supabase/supabase-js

bun add @ginjou/with-supabase @supabase/supabase-js

Fetcher

Use createFetcher() with a Supabase client.

Register it through defineFetchersContext().

import { defineFetchersContext } from '@ginjou/vue'
import { createFetcher } from '@ginjou/with-supabase'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
    'https://your-project.supabase.co',
    'your-anon-key',
)

defineFetchersContext({
    default: createFetcher({ client: supabase }),
})

Pagination

List pagination uses Supabase range().

The adapter calls:

For totals, getList() uses Supabase count mode from meta.count and returns count || 0.

Filters

The adapter maps Ginjou filters to Supabase PostgREST filter helpers.

These operators use the generic filter() fallback.

These operators are not supported and throw instead of being translated.

Sorters

Sorters are applied through Supabase order().

Normal fields use order(field, { ascending }).

Related table fields can use dot notation.

When dot notation is used, the adapter also expands the select string so Supabase can order through the related table.

Meta

These meta fields are verified in the adapter.

Use meta.idColumnName when the record key is not stored in an id column.

import { useGetOne } from '@ginjou/vue'

useGetOne({
    resource: 'orders',
    id: 'order-001',
    meta: {
        idColumnName: 'order_id',
    },
})

Use meta.select to control the returned columns and relations.

import { useGetList } from '@ginjou/vue'

useGetList({
    resource: 'posts',
    meta: {
        select: 'id,title,author:users(id,name)',
    },
})

Use meta.count to choose the Supabase count mode for getList().

import { useGetList } from '@ginjou/vue'

useGetList({
    resource: 'posts',
    meta: {
        count: 'planned',
    },
})

Auth

Use createAuth() with the same Supabase client.

Most apps reuse the client they already passed to createFetcher().

Register it through defineAuthContext().

import { defineAuthContext } from '@ginjou/vue'
import { createAuth } from '@ginjou/with-supabase'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
    'https://your-project.supabase.co',
    'your-anon-key',
)

defineAuthContext(createAuth({ client: supabase }))

Login

login() dispatches to one of the Supabase auth client methods based on type.

Password login:

import { useLogin } from '@ginjou/vue'

const { mutateAsync: login } = useLogin()

await login({
    type: 'password',
    params: {
        email: 'user@example.com',
        password: 'password123',
    },
})

OAuth login:

import { useLogin } from '@ginjou/vue'

const { mutateAsync: login } = useLogin()

await login({
    type: 'oauth',
    params: {
        provider: 'github',
    },
})

Logout

logout() maps to client.auth.signOut().

It forwards the optional logout params to Supabase.

Identity

getIdentity() maps to client.auth.getUser().

It returns the Supabase user object.

Check Authentication

check() maps to client.auth.getSession().

Auth failures are returned as part of the result instead of being thrown.

Check Error

checkError() uses Supabase isAuthError().