0Pricing
React Academy · Pelajaran

Penyedia Kredensial & Login Kustom

Autentikasi pengguna terhadap basis data dengan penyedia kredensial dan formulir login kustom.

Penyedia Kredensial & Login Kustom adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Kapan Menggunakan Penyedia Kredensial

Gunakan penyedia kredensial saat Anda melakukan autentikasi terhadap basis data sendiri, yaitu email + kata sandi, bukan terhadap penyedia OAuth. Penanganan hashing kata sandi dan keamanan harus dilakukan dengan cermat.

Menentukan Penyedia Kredensial

Tambahkan Credentials ke array penyedia. Fungsi authorize menerima kredensial yang dikirimkan dan mengembalikan objek pengguna atau null.

import Credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcryptjs';

export const { handlers, auth } = NextAuth({
  providers: [
    Credentials({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        const user = await db.user.findUnique({ where: { email: credentials.email as string } });
        if (!user) return null;
        const valid = await bcrypt.compare(credentials.password as string, user.passwordHash);
        if (!valid) return null;
        return { id: user.id, name: user.name, email: user.email };
      },
    }),
  ],
});

Formulir Masuk Kustom

Buat formulir masuk sebagai Komponen Klien yang memanggil signIn('credentials', { email, password }) dari next-auth/react.

'use client';
import { signIn } from 'next-auth/react';

export function LoginForm() {
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    const result = await signIn('credentials', {
      email: form.get('email'),
      password: form.get('password'),
      redirect: false, // handle redirect manually
    });
    if (result?.error) setError('Invalid email or password');
    else router.push('/dashboard');
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="error">{error}</p>}
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">Sign in</button>
    </form>
  );
}

redirect: false untuk Penanganan Kesalahan

Berikan redirect: false ke signIn() untuk menerima objek hasil dan menangani kesalahan dalam komponen, bukan mengarahkan pengguna ke halaman kesalahan.

const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
  // result.error is 'CredentialsSignin' for auth failures
  setError('Invalid email or password');
}

Validasi Zod dalam authorize

Validasi kredensial dengan Zod di dalam fungsi authorize sebelum mengakses basis data.

import { z } from 'zod';

const schema = z.object({ email: z.string().email(), password: z.string().min(8) });

async authorize(credentials) {
  const parsed = schema.safeParse(credentials);
  if (!parsed.success) return null;
  const { email, password } = parsed.data;
  // ... db lookup
}

Strategi Sesi untuk Kredensial

Penyedia kredensial memerlukan strategi sesi JWT (tidak memerlukan adaptor basis data untuk sesi). Tetapkan session: { strategy: 'jwt' } secara eksplisit.

export const { handlers, auth } = NextAuth({
  session: { strategy: 'jwt' },
  providers: [Credentials({ ... })],
});

Menambahkan Kolom Kustom ke Sesi

Teruskan data pengguna tambahan melalui callback JWT dan sesi agar dapat diakses di useSession().

callbacks: {
  async jwt({ token, user }) {
    if (user) { token.id = user.id; token.role = user.role; }
    return token;
  },
  async session({ session, token }) {
    session.user.id = token.id as string;
    session.user.role = token.role as string;
    return session;
  },
},

Pembuatan Hash Kata Sandi

Selalu buat hash kata sandi dengan bcrypt sebelum menyimpannya. Jangan pernah menyimpan kata sandi dalam teks biasa.

import bcrypt from 'bcryptjs';

// On registration:
const passwordHash = await bcrypt.hash(password, 12);
await db.user.create({ data: { email, passwordHash } });

// On login (in authorize):
const valid = await bcrypt.compare(submittedPassword, user.passwordHash);

Pembatasan Laju Upaya Masuk

Lindungi titik akhir kredensial dari serangan coba-coba berulang dengan membatasi laju upaya masuk menggunakan middleware atau penyimpanan dalam memori.

// middleware.ts or in a rate-limiting library
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({ redis: Redis.fromEnv(), limiter: Ratelimit.slidingWindow(10, '10 s') });

// Check in authorize before DB query:
const { success } = await ratelimit.limit(credentials.email as string);
if (!success) return null;

Alur Pendaftaran

Pendaftaran terpisah dari Auth.js — buat pengguna di basis data Anda (dengan kata sandi yang telah di-hash) melalui Server Action atau rute API, lalu masuk sebagai pengguna tersebut dengan signIn('credentials', ...).

Pemeriksaan Singkat

Mengapa Anda harus meneruskan redirect: false saat memanggil signIn() dalam formulir masuk kustom?

Rangkuman

Penyedia kredensial memanggil fungsi authorize Anda dengan data formulir yang dikirimkan. Validasi dengan Zod, bandingkan kata sandi yang telah di-hash dengan bcrypt, lalu kembalikan objek pengguna atau null. Gunakan redirect: false dalam formulir untuk menangani kesalahan secara kustom, dan selalu gunakan strategi JWT dengan kredensial.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyedia Kredensial & Login Kustom” gratis?

Ya — teks lengkap “Penyedia Kredensial & Login Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyedia Kredensial & Login Kustom”?

Autentikasi pengguna terhadap basis data dengan penyedia kredensial dan formulir login kustom. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Penyedia Kredensial & Login Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menyiapkan Auth.js dalam App Router Next.js
  2. Pengelolaan Sesi & Hook useSession
  3. Penyedia Kredensial & Login Kustom
  4. Perlindungan Rute Berbasis Middleware
← Kembali ke React Academy