⚠️ Usage of this package isn't advised considering the new auth helpers (https://supabase.com/docs/guides/auth/auth-helpers) provided by supabase.

use-supabase-hooks

use-supabase-hooks contains react hooks for common supabase functions, with type safety!

Website: https://use-supabase-hooks.vercel.app

Installation

use-supabase-hooks is available as a npm package, you can install it using your preferred package manager.

$ npm i use-supabase-hooks

Usage

Currently use-supabase-hooks exports a total of 8 hooks, using them is pretty straight forward. The list of hooks along with their usage is below:

using the useUser hook:

import { useUser } from "use-supabase-hooks";

const { user, loading, error } = useUser(client);

In the above example, client is the Supabase client, and the hook returns the current user, loading and error state.

using the useAuth hook

Signing Up using email and password combination:

import { useAuth } from "use-supabase-hooks";

const { signIn, signUp } = useAuth(client);

const { user, session, error } = await signIn({
  email: "[email protected]",
  password: "dusty-bun",
});

Signing In using email and password combination:

import { useAuth } from "use-supabase-hooks";

const { signIn } = useAuth(client);

const { user, session, error } = await signIn({
  email: "[email protected]",
  password: "dusty-bun",
  redirectTo: "http://localhost:3000/dashboard",
});

Signing In using third party providers

import { useAuth } from "use-supabase-hooks";

const { signIn } = useAuth(client);

const { user, session, error } = await signIn({
  provider: "google", // accepts any valid supabase provider
  redirectTo: "http://localhost:3000/dashboard",
});

using the useSelectData hook:

import { useSelectData } from "use-supabase-hooks";

const { data, loading, error } = useSelectData(client, "users", {
  picks: ["name", "email"], // columns to pick
  eqs: ["id", 1], // equality conditions
});

using the useInsertData hook:

import { useInsertData } from "use-supabase-hooks";

const { data, loading, error } = useInsertData(client, "users", data: {
  id: 1,
  name: "Eddie Munson",
  email: "[email protected]",
});

using the useUpdateData hook:

import { useUpdateData } from "use-supabase-hooks";

const { data, loading, error } = useUpdateData(client, "users", data: {
  id: 1,
  name: "Eddie the Banished",
  email: "[email protected]",
}, eqs: ["id", 1]);

using the useUpsertData hook:

import { useUpsertData } from "use-supabase-hooks";

const { data, loading, error } = useUpsertData(client, "users", data: {
  id: 1,
  name: "Steve Harrington",
  email: "[email protected]",
});

using the useDeleteData hook:

import { useDeleteData } from "use-supabase-hooks";

const { data, loading, error } = useDeleteData(client, "users", eqs: ["id", 1]);

And thats a wrap for this one! Hope you find this useful!