Aplikasi Web Fullstack Next.js 15 · Pelajaran

Mengintegrasikan NextAuth.js

Sediakan NextAuth.js untuk pengesahan mudah dengan pelbagai penyedia dan log masuk berasaskan kelayakan.

Pelajaran 1 daripada 412 langkah

Mengintegrasikan NextAuth.js ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah NextAuth.js?

Selamat datang ke integrasi NextAuth.js! Pustaka berkuasa ini memudahkan pengesahan dalam aplikasi Next.js, menjadikan fungsi log masuk mudah ditambahkan.

NextAuth.js menyokong pelbagai strategi pengesahan, daripada log masuk sosial (seperti Google dan GitHub) hingga sistem berasaskan kelayakan tersuai, semuanya dengan persediaan minimum.

Ia mengendalikan pengurusan sesi, JWT dan panggilan balik yang selamat, sekali gus menyembunyikan banyak kerumitan dalam pembinaan sistem pengesahan yang selamat.

Memasang NextAuth.js

Mula-mula, mari tambahkan NextAuth.js pada projek Next.js anda. Buka terminal dalam direktori akar projek anda dan jalankan perintah berikut:

npm install next-auth

Menyediakan Laluan API Pengesahan

NextAuth.js memerlukan laluan API khas untuk mengendalikan semua permintaan pengesahan. Untuk App Router, cipta fail di app/api/auth/[...nextauth]/route.js.

Fail ini mengeksport handler yang digunakan oleh NextAuth.js untuk memproses permintaan log masuk, log keluar dan sesi. Pada mulanya, kita akan menyediakannya tanpa penyedia.

import NextAuth from "next-auth";

export const authOptions = {
  providers: [], // Your authentication providers go here
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Menambahkan Penyedia OAuth Google

Mari integrasikan Google sebagai penyedia OAuth. Anda perlu memasang pakej penyedia khusus dan kemudian menambahkannya pada authOptions.

Pastikan anda telah menyediakan ID dan rahsia klien OAuth Google dalam Google Cloud Console.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// Install: npm install @next-auth/google

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Melindungi Kelayakan (.env.local)

Amat penting untuk memastikan kunci API dan rahsia anda selamat. Simpannya dalam fail .env.local di direktori akar projek anda.

Anda memerlukan NEXTAUTH_SECRET (rentetan rawak yang panjang) untuk menandatangani token dan menyulitkan kuki, bersama-sama dengan kelayakan Google anda.

GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
NEXTAUTH_SECRET=a_very_long_and_random_string_for_security

Penyedia Sesi Klien

Untuk menyediakan data sesi kepada komponen klien, anda perlu membungkus aplikasi anda dengan SessionProvider. Untuk App Router, cipta komponen klien seperti app/providers.jsx:

"use client";

import { SessionProvider } from "next-auth/react";

export default function AuthProvider({ children }) {
  return <SessionProvider>{children}</SessionProvider>;
}

Mengintegrasikan AuthProvider

Sekarang, import dan gunakan AuthProvider tersuai anda dalam fail susun atur akar (app/layout.js). Ini memastikan semua komponen dalam aplikasi anda boleh mengakses konteks sesi.

import AuthProvider from "./providers"; // Adjust path as needed

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Mengakses Data Sesi (useSession)

Dalam mana-mana komponen klien, Anda boleh menggunakan cangkuk useSession daripada next-auth/react untuk mengakses data sesi pengguna semasa.

Ia menyediakan objek session (jika pengguna telah log masuk) dan status (contohnya, 'loading', 'authenticated', 'unauthenticated').

"use client";

import { useSession } from "next-auth/react";

export default function UserInfo() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <p>Loading user info...</p>;
  }

  if (session) {
    return (
      <div>
        <p>Welcome, {session.user.name}!</p>
        <p>Email: {session.user.email}</p>
      </div>
    );
  }

  return <p>Please sign in.</p>;
}

Tindakan Antara Muka Pengguna untuk Pengesahan

Untuk membolehkan pengguna log masuk dan log keluar, NextAuth.js menyediakan fungsi signIn dan signOut. Anda boleh mengimport fungsi ini dan menggunakannya dengan butang atau pautan.

signIn() boleh menerima ID penyedia (contohnya, 'google') untuk menentukan kaedah log masuk.

"use client";

import { useSession, signIn, signOut } from "next-auth/react";

export default function AuthButtons() {
  const { data: session } = useSession();

  if (session) {
    return (
      <button onClick={() => signOut()} style={{ padding: '10px' }}>
        Sign Out
      </button>
    );
  }
  return (
    <button onClick={() => signIn("google")} style={{ padding: '10px' }}>
      Sign In with Google
    </button>
  );
}

Melangkaui OAuth: Penyedia Credentials

Walaupun penyedia OAuth mudah digunakan, NextAuth.js turut menyokong CredentialsProvider untuk borang log masuk nama pengguna/kata laluan tersuai.

Anda perlu melaksanakan fungsi authorize sendiri untuk mengesahkan input pengguna berbanding pangkalan data anda, sekali gus memberikan kawalan penuh terhadap proses log masuk.

// ... in your authOptions.providers array
CredentialsProvider({
  name: "Credentials",
  credentials: {
    email: { label: "Email", type: "email" },
    password: { label: "Password", type: "password" }
  },
  async authorize(credentials, req) {
    // Here you'd query your database to validate credentials
    // If valid, return a user object; otherwise, return null
    // Example: const user = await getUserByEmailAndPassword(credentials.email, credentials.password);
    // if (user) { return user; } else { return null; }
    return null; // Placeholder
  }
})

Kuiz Persediaan NextAuth.js

Anda telah mempelajari langkah utama untuk mengintegrasikan NextAuth.js. Mari semak pemahaman Anda dengan pantas.

Jawab dalam pelajaran interaktif

Imbas Kembali: Integrasi NextAuth.js

Syabas! Anda telah mempelajari cara mengintegrasikan NextAuth.js ke dalam aplikasi Next.js Anda:

Memasang pakej next-auth.
Menyediakan laluan API dinamik untuk pengesahan (app/api/auth/[...nextauth]/route.js).
Mengkonfigurasi penyedia OAuth sosial seperti Google.
Melindungi kelayakan menggunakan .env.local.
Membungkus aplikasi Anda dengan SessionProvider untuk mengakses sesi dari pihak klien.
Menggunakan useSession untuk mendapatkan data pengguna serta melaksanakan fungsi signIn/signOut.

NextAuth.js memudahkan proses menambahkan pengesahan yang kukuh pada projek Next.js Anda dengan ketara!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengintegrasikan NextAuth.js” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Mengintegrasikan NextAuth.js”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengintegrasikan NextAuth.js”?

Sediakan NextAuth.js untuk pengesahan mudah dengan pelbagai penyedia dan log masuk berasaskan kelayakan. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Mengintegrasikan NextAuth.js” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Aplikasi Web Fullstack Next.js 15