@supabase/auth-helpers-qwik

0.0.3 verified Sat Apr 25 auth: no javascript

Beta Qwik-specific auth utilities for Supabase, version 0.0.3. Provides convenience helpers for implementing user authentication in Qwik applications, leveraging resumability and the Qwik framework's unique architecture. Requires peer dependency @supabase/supabase-js ^2.0.4. As a beta package, it may have breaking changes without notice. It is part of the broader supabase/auth-helpers ecosystem, targeting Qwik specifically. Differentiators include integration with Qwik's $() async patterns and server-side rendering capabilities.

Common errors

error Cannot find module '@supabase/auth-helpers-qwik' or its corresponding type declarations. ↓

cause Package not installed or type resolution not configured.

fix

Install the package: npm install @supabase/auth-helpers-qwik and ensure tsconfig includes 'node' in types.

error Uncaught (in promise) TypeError: supabase.auth.getSession is not a function ↓

cause Supabase client not initialized or wrong import.

fix

Ensure you use createClient from this package and not from @supabase/supabase-js directly.

Warnings

breaking Package is in beta (0.0.3); breaking changes may occur without major version bump. ↓

fix Pin to exact version and monitor releases.

gotcha useSupabaseClient requires a parent provider for the Supabase client context. ↓

fix Ensure your app wraps with a provider that calls createClient.

gotcha The package is ESM-only and cannot be used with require() or in CommonJS contexts. ↓

fix Use import statements and ensure your project is configured for ESM.

gotcha The package uses Qwik's $() pattern; mixing with non-$ functions may cause issues. ↓

fix Wrap async operations in $() or use useAsync$ appropriately.

Install

npm install supabase-auth-helpers-qwik

yarn add supabase-auth-helpers-qwik

pnpm add supabase-auth-helpers-qwik

Imports

createClient

wrong

const createClient = require('@supabase/auth-helpers-qwik')

correct

import { createClient } from '@supabase/auth-helpers-qwik'

ESM only; package does not provide CJS exports.

AuthSession

wrong

import { AuthSession } from '@supabase/supabase-js'

correct

import { AuthSession } from '@supabase/auth-helpers-qwik'

Type for the auth session context; available from this package.

useSupabaseClient

wrong

import { useSupabaseClient } from '@supabase/supabase-js'

correct

import { useSupabaseClient } from '@supabase/auth-helpers-qwik'

Hook or composable specific to Qwik; not a React hook.

Quickstart

Shows basic usage: create a Supabase client via context, fetch session on mount, and conditionally display user info.

import { createClient, useSupabaseClient, AuthSession } from '@supabase/auth-helpers-qwik';
import { component$, useMount$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const supabase = useSupabaseClient();
  const session = useSignal<AuthSession | null>(null);

  useMount$(async () => {
    const { data: { session: s } } = await supabase.auth.getSession();
    session.value = s;
  });

  return (
    <div>
      {session.value ? (
        <p>Logged in as {session.value.user?.email}</p>
      ) : (
        <p>Not logged in</p>
      )}
    </div>
  );
});