HostBase

Frameworks

React (Vite)

A React + Vite app with sign-in and database queries.

This page is available in Polish only for now. The commands, code and API calls below are the same in every language — an English translation is on its way. Open the Polish page

Instalacja

npm create vite@latest moja-apka -- --template react-ts
cd moja-apka
npm install @supabase/supabase-js

Konfiguracja

# .env
VITE_SUPABASE_URL=https://abcdefghijklmnopqrst.host.ulewicz.space
VITE_SUPABASE_ANON_KEY=eyJhbGciOi...
// src/supabase.ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

Sesja użytkownika

import { useEffect, useState } from "react";
import type { Session } from "@supabase/supabase-js";
import { supabase } from "./supabase";

export function useSession() {
  const [session, setSession] = useState<Session | null>(null);
  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => setSession(data.session));
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setSession(s));
    return () => sub.subscription.unsubscribe();
  }, []);
  return session;
}

Zapytania

const { data, error } = await supabase
  .from("todos")
  .insert({ task: "Kupić mleko" })
  .select()
  .single();

Pamiętaj: w aplikacji SPA używaj wyłącznie klucza anon i zabezpieczaj dane politykami RLS.

PreviousNext.jsNext Flutter