Authentication

Untuk membuat aunthentication pada next.js ada beberapa cara yang bisa digunakan:

• Menggunakan external library
• Custom authentication

Namun untuk saat ini akan menggunakan authentication dengan bantuan library yaitu Next Auth

pertama install library terlebih dahulu

npm install next-auth

tambahkan provider di pages/_app.tsx sebagai berikut

import "@/styles/globals.css";
import React from "react";
import { SessionProvider, useSession } from "next-auth/react";

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    // Tambahkan dibawah ini
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

kemudian buat file pada path ./pages/api/auth/[...nextauth].ts

Didalam file tersebut tuliskan kode

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    /**
     * menyediakan authentication dengan kustom auth
     * bisa menggunakan provider dari beberapa vendor seperti github, google dll
     */
    CredentialsProvider({
      name: "credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "text" },
      },
      // buat function untuk authentication
      async authorize(credentials: any) {
        /**
         * buat logic untuk memanggil data dari database
         * atau untuk custom auth
         */
        return {
          name: credentials.email,
          email: credentials.email,
        };
      },
    }),
  ],
  /**
   * buat path untuk signIn, signOut dll
   */
  pages: {
    signIn: "/auth/login",
    signOut: "/auth/register",
    error: "",
    newUser: null,
  },
  /**
   * untuk mengamankan token dan akses getToken di middleware
   */
  secret: process.env.NEXTAUTH_SECRET,
});

Membuat halaman login

Sekarang saatnya membuat halaman login untuk user

buat file pada ./pages/auth/login.tsx dan tuliskan kode berikut

import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";
import React from "react";

export default function Login() {
  const session = useSession();
  const [form, setForm] = React.useState({
    email: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const target = e.target;
    setForm({ ...form, [target.name]: target.value });
  };

  /**
   * function untuk handle submit
   */
  const submit = async () => {
    signIn("credentials", {
      email: form.email,
      password: form.password,
      // callback digunakan untuk redirect ketika login success
      callbackUrl: "/admin",
    }).then((response) => {
      console.log(response);
    });
  };

  React.useEffect(() => {
    /**
     * untuk mendapatkan session
     * bisa digunakan sesuai kebutuha
     */
    console.log(session);
  }, []);
  return (
    <div>
      <h3>Login</h3>
      <input
        type="text"
        placeholder="email"
        name="email"
        onChange={handleChange}
      />
      <input
        type="text"
        placeholder="password"
        name="password"
        onChange={handleChange}
      />
      <button onClick={submit}>Login</button>
    </div>
  );
}