Come usare Supabase Auth per permettere agli utenti di accedere alla tua applicazione web

Codice di implementazione

Copia e incolla questo codice nel tuo editor preferito e inserisci le tue credenziali pubbliche per la connessione a Supabase. Ricorda di aggiungere le tabelle come nel video per evitare errori, come colonne non trovate o di tipo dato sbagliato:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supabase Email & Password Auth</title>
    <!-- Libreria Supabase JS via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
    <h1>Supabase Authentication Example</h1>

    <!-- STATO UTENTE CORRENTE -->
    <section>
        <h2>1. Stato Sessione</h2>
        <div id="userInfo">Verifica stato in corso...</div>
        <br>
        <button onclick="checkUser()">Aggiorna Stato Utente</button>
        <button onclick="handleSignOut()">Logout</button>
    </section>

    <hr>

    <!-- REGISTRAZIONE -->
    <section>
        <h2>2. Registrazione (Sign Up)</h2>
        <form id="signUpForm" onsubmit="handleSignUp(event)">
            <label for="signUpEmail">Email:</label>
            <input type="email" id="signUpEmail" required><br><br>

            <label for="signUpPassword">Password:</label>
            <input type="password" id="signUpPassword" required minlength="6"><br><br>

            <button type="submit">Crea Account</button>
        </form>
    </section>

    <hr>

    <!-- LOGIN -->
    <section>
        <h2>3. Accesso (Sign In)</h2>
        <form id="signInForm" onsubmit="handleSignIn(event)">
            <label for="signInEmail">Email:</label>
            <input type="email" id="signInEmail" required><br><br>

            <label for="signInPassword">Password:</label>
            <input type="password" id="signInPassword" required><br><br>

            <button type="submit">Accedi</button>
        </form>
    </section>

    <hr>

    <!-- OUTPUT DEBUG -->
    <section>
        <h2>4. Risposta Supabase (Debug)</h2>
        <pre id="outputLog">Nessuna operazione eseguita</pre>
    </section>

    <script>
        let supabaseClient = null;

        // 1. Inizializzazione Client
        function initSupabase() {
            const SUPABASE_URL = 'SUPABASE_URL';
            const SUPABASE_KEY = 'SUPABASE_PUBLIC_KEY';

            try {
                supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
                console.log('Client Supabase inizializzato.');

                // Ascolta i cambiamenti di stato dell'autenticazione in tempo reale
                supabaseClient.auth.onAuthStateChange((event, session) => {
                    console.log('Evento Auth:', event);
                    updateUI(session?.user || null);
                });

                checkUser();
            } catch (err) {
                console.error('Errore inizializzazione client:', err);
            }
        }

        function checkClient() {
            if (!supabaseClient) {
                alert('Client Supabase non inizializzato!');
                return false;
            }
            return true;
        }

        // 2. Controllo Stato Sessione
        async function checkUser() {
            if (!checkClient()) return;

            const { data: { user }, error } = await supabaseClient.auth.getUser();
            if (error && error.name !== 'AuthSessionMissingError') {
                console.error('Errore recupero utente:', error);
            }
            updateUI(user);
        }

        function updateUI(user) {
            const userInfoEl = document.getElementById('userInfo');
            if (user) {
                userInfoEl.innerHTML = `<strong>Autenticato come:</strong> ${user.email} <br><strong>ID Utente:</strong> <code>${user.id}</code>`;
            } else {
                userInfoEl.innerHTML = '<em>Nessun utente autenticato.</em>';
            }
        }

        function logOutput(data) {
            document.getElementById('outputLog').textContent = JSON.stringify(data, null, 2);
        }

        // 3. Registrazione (signUp)
        async function handleSignUp(event) {
            event.preventDefault();
            if (!checkClient()) return;

            const email = document.getElementById('signUpEmail').value;
            const password = document.getElementById('signUpPassword').value;

            const { data, error } = await supabaseClient.auth.signUp({
                email: email,
                password: password
            });

            if (error) {
                alert('Errore Sign Up: ' + error.message);
                logOutput(error);
            } else {
                alert('Registrazione effettuata! Se la conferma email è attiva sul tuo progetto Supabase, controlla la tua casella di posta.');
                logOutput(data);
                document.getElementById('signUpForm').reset();
            }
        }

        // 4. Login (signInWithPassword)
        async function handleSignIn(event) {
            event.preventDefault();
            if (!checkClient()) return;

            const email = document.getElementById('signInEmail').value;
            const password = document.getElementById('signInPassword').value;

            const { data, error } = await supabaseClient.auth.signInWithPassword({
                email: email,
                password: password
            });

            if (error) {
                alert('Errore Sign In: ' + error.message);
                logOutput(error);
            } else {
                alert('Login effettuato con successo!');
                logOutput(data);
                document.getElementById('signInForm').reset();
            }
        }

        // 5. Logout (signOut)
        async function handleSignOut() {
            if (!checkClient()) return;

            const { error } = await supabaseClient.auth.signOut();
            if (error) {
                alert('Errore Logout: ' + error.message);
                logOutput(error);
            } else {
                alert('Logout completato!');
                logOutput({ status: 'Logged out successfully' });
            }
        }

        // Avvio automatizzato
        initSupabase();
    </script>
</body>
</html>

Una volta fatto ciò puoi eseguire il file in un browser per provarlo e vedere se funziona correttamente.

Se non funziona

Controlla questi punti:

Verifica che SUPABASE_URL e la chiave pubblica siano corrette.
Controlla che la tabella products esista e abbia le colonne name e description.
Se visualizzi Failed to fetch, verifica la connessione internet e l'URL del progetto Supabase.
Controlla le policy RLS: disattivate in questo tutorial per scopi didattici, non disattivare mai le RLS in ambienti di produzione se previste nell'architettura.
Apri il file tramite un server locale o direttamente nel browser.

Puoi utilizzare LLM e coding agent per trovare errori. Oppure contattami per richiedere supporto allo sviluppo.