Toko Kue: Halaman Login & Registrasi (Supabase Auth)

Toko Kue: Halaman Login & Registrasi (Supabase Auth) | Dasar Supabase (Backend as a Service) | Mahir.dev | Mahir.dev Academy

src/app/auth/signup/

page.tsx

tsx

// src/app/auth/signup/page.tsx
"use client"; // Karena ini akan jadi form interaktif
 
import React, { useState, FormEvent } from 'react';
import { supabase } from '@/lib/supabase-client'; // Client Supabase kita
import { useRouter } from 'next/navigation';
import Link from 'next/link';
 
export default function SignUpPage() {
  const [email, setEmail] = useState

tsx

// src/app/auth/signin/page.tsx
"use client";
 
import React, { useState, FormEvent } from 'react';
import { supabase } from '@/lib/supabase-client';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
 
export default function SignInPage() {
  const [email, setEmail] = useState(''

tsx

// Di dalam SignUpPage komponen, fungsi handleSignUp:
  const handleSignUp = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError(null);
    setMessage(null);
    setLoading(true);
 
    if (password !== confirmPassword) {
      setError("Password dan konfirmasi password tidak cocok!");
      setLoading(false);
      return;
    }
    if (password.length < 6) { // Supabase punya aturan minimal password (default 6)
      setError("Password minimal harus 6 karakter.");
      setLoading(false);
      return;
    }
 
    // Panggil Supabase Auth untuk sign up
    const { data, error: signUpError } = await supabase.auth.signUp({
      email: email,
      password: password,
      // Kamu bisa nambahin data tambahan (metadata) di sini kalau mau:
      // options: {
      //   data: {
      //     nama_lengkap: 'Budi Awal', // Ini akan masuk ke user_metadata di Supabase
      //   }
      // }
    });
 
    setLoading(false);
 
    if (signUpError) {
      setError(signUpError.message);
      console.error("Error Sign Up:", signUpError);
    } else if (data.user && data.user.identities && data.user.identities.length === 0) {
      // Kasus user sudah ada tapi belum konfirmasi email (jika konfirmasi email diaktifkan)
      // Atau kasus lain di mana user object ada tapi identities kosong
      setMessage("User mungkin sudah terdaftar tapi belum dikonfirmasi. Silakan cek email Anda atau coba login.");
      // Atau setError("Pengguna sudah ada atau butuh konfirmasi.")
    } else if (data.user) {
      // Cek apakah konfirmasi email diperlukan (dari settingan Supabase Auth-mu)
      if (data.user.email_confirmed_at) {
         setMessage("Pendaftaran berhasil! Anda akan diarahkan ke halaman login.");
         setTimeout(() => router.push('/auth/signin'), 2000); // Arahkan ke login setelah 2 detik
      } else {
         setMessage("Pendaftaran berhasil! Silakan cek email Anda untuk konfirmasi akun sebelum login.");
      }
    } else if (!data.session && !data.user) {
      // Kasus aneh jika user dan session null tapi tidak ada error eksplisit dari signUpError
      // Seringkali ini karena email sudah terdaftar atau konfigurasi lain
      setError("Email mungkin sudah terdaftar atau ada masalah lain. Coba login atau gunakan email lain.");
    }
  };

tsx

// Di dalam SignInPage komponen, fungsi handleSignIn:
  const handleSignIn = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError(null);
    setLoading(true);
 
    // Panggil Supabase Auth untuk sign in
    const { data, error: signInError } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });
 
    setLoading(false);
 
    if (signInError) {
      setError(signInError.message);
      console.error("Error Sign In:", signInError);
    } else if (data.user) {
      // Login berhasil!
      // 'data.session' juga bakal ada di sini
      console.log("Login berhasil:", data.user);
      // Arahkan ke halaman utama atau dashboard setelah login
      router.push('/'); // Ganti dengan path halaman setelah login yang sesuai
      // Kamu mungkin juga mau nge-refresh halaman atau data di app setelah ini
    } else {
        setError("Login gagal. Cek kembali email dan password Anda.");
    }
  };

tsx

// src/app/components/navbar.tsx (Contoh)
"use client";
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { supabase } from '@/lib/supabase-client';
import { User } from '@supabase/supabase-js';
import { useRouter } from 'next/navigation';
 
export default function Navbar() {
  const [user, setUser] = useState<User | null>(null);
  const router = useRouter();
 
  useEffect(() => {
    async function checkUser() {
      const { data: { session } } = await supabase.auth.getSession();
      setUser(session?.user ?? null);
    }
    checkUser();
 
    const { data: authListener } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
    });
 
    return () => {
      authListener?.unsubscribe();
    };
  }, []);
 
  const handleSignOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) console.error('Error signing out:', error);
    else router.push('/auth/signin'); // Arahkan ke halaman login setelah logout
  };
 
  return (
    <nav className="bg-gray-800 p-4 text-white flex justify-between items-center">
      <Link href="/" className="font-bold text-xl">Toko Kue</Link>
      <div>
        {user ? (
          <>
            <span className="mr-4">Halo, {user.email}</span>
            <button onClick={handleSignOut} className="bg-red-500 hover:bg-red-600 px-3 py-1 rounded">
              Logout
            </button>
          </>
        ) : (
          <>
            <Link href="/auth/signin" className="mr-3 hover:underline">Masuk</Link>
            <Link href="/auth/signup" className="bg-green-500 hover:bg-green-600 px-3 py-1 rounded">Daftar</Link>
          </>
        )}
      </div>
    </nav>
  );
}

Buka Pintu Toko Kue: Bikin Halaman Login & Registrasi Pake Supabase Auth!

Langkah 1: Menyiapkan Halaman dan Komponen Form Dasar

a. Halaman Registrasi (`src/app/auth/signup/page.tsx`)

Langkah 2: Implementasi Logika Supabase Auth

a. Logika `handleSignUp` di `SignUpPage`

b. Logika `handleSignIn` di `SignInPage`

Jangan Lupa Settingan Email di Supabase!

Kuis Halaman Login & Registrasi (Supabase Auth)

Diskusi Pelajaran

Toko Kue: Halaman Login & Registrasi (Supabase Auth)

Buka Pintu Toko Kue: Bikin Halaman Login & Registrasi Pake Supabase Auth!

Langkah 1: Menyiapkan Halaman dan Komponen Form Dasar

a. Halaman Registrasi (src/app/auth/signup/page.tsx)

b. Halaman Login (src/app/auth/signin/page.tsx)

Langkah 2: Implementasi Logika Supabase Auth

a. Logika handleSignUp di SignUpPage

b. Logika handleSignIn di SignInPage

Langkah 3: Mengelola Sesi Pengguna & Menampilkan Status Login (Singkat)

Jangan Lupa Settingan Email di Supabase!

Kuis Halaman Login & Registrasi (Supabase Auth)

Diskusi Pelajaran

a. Halaman Registrasi (`src/app/auth/signup/page.tsx`)

b. Halaman Login (`src/app/auth/signin/page.tsx`)

a. Logika `handleSignUp` di `SignUpPage`

b. Logika `handleSignIn` di `SignInPage`