credential 로그인 페이지를 변경하려고 하는데요

[Marina]

<login/page.js >

import Link from "next/link";
import React from "react";

export default function Login() {
  return (
    <div
      className="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5"
      tabindex="-1"
      role="dialog"
      id="modalSignin"
    >
      <div className="modal-dialog" role="document">
        <div className="modal-content rounded-4 shadow">
          <div className="modal-header p-5 pb-4 border-bottom-0">
            <h1 className="fw-bold mb-0 fs-2">로그인</h1>
            <button
              type="button"
              className="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>

          <div className="modal-body p-5 pt-0">
            <form method="post" action="/api/auth/signin">
              <div className="form-floating mb-3">
                <input
                  type="email"
                  className="form-control rounded-3"
                  id="floatingInput"
                  name="email"
                  placeholder="name@example.com"
                  required
                />
                <label for="floatingInput">Email address</label>
              </div>
              <div className="form-floating mb-3">
                <input
                  type="password"
                  className="form-control rounded-3"
                  id="floatingPassword"
                  name="password"
                  placeholder="Password"
                  required
                />
                <label for="floatingPassword">Password</label>
              </div>

              <button
                className="w-100 mb-2 btn btn-lg rounded-3 btn-danger"
                type="submit"
              >
                로그인
              </button>
              <button className="w-100 mb-2 btn btn-lg rounded-3 btn-primary">
                <Link
                  href="/register"
                  style={{ color: "white", textDecoration: "none" }}
                >
                  회원가입
                </Link>
              </button>
              <small className="text-body-secondary">
                비밀번호를 잊어버렸으면 여기로!
                <Link href="/register"> 비밀번호 찾기</Link>
              </small>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

<[...nextauth].js>

import { connectDB } from "@/util/database";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcrypt";

export const authOptions = {
  pages: {
    signIn: "/login",
  },

  providers: [
    CredentialsProvider({
      //1. 로그인페이지 폼 자동생성해주는 코드
      name: "credentials",
      credentials: {
        email: { label: "email", type: "text" },
        password: { label: "password", type: "password" },
      },

      //2. 로그인요청시 실행되는코드
      //직접 DB에서 아이디,비번 비교하고
      //아이디,비번 맞으면 return 결과, 틀리면 return null 해야함
      async authorize(credentials) {
        let db = (await connectDB).db("forum");
        let user = await db
          .collection("member")
          .findOne({ email: credentials.email });
        if (!user) {
          console.log("해당 이메일은 없음");
          return null;
        }
        const pwcheck = await bcrypt.compare(
          credentials.password,
          user.password
        );
        if (!pwcheck) {
          console.log("비번틀림");
          return null;
        }
        return user;
      },
    }),
  ],

  //3. jwt 써놔야 잘됩니다 + jwt 만료일설정
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60, //30일
  },

  callbacks: {
    //4. jwt 만들 때 실행되는 코드
    //user변수는 DB의 유저정보담겨있고 token.user에 뭐 저장하면 jwt에 들어갑니다.
    jwt: async ({ token, user }) => {
      if (user) {
        token.user = {};
        token.user.name = user.name;
        token.user.email = user.email;
      }
      return token;
    },
    //5. 유저 세션이 조회될 때 마다 실행되는 코드
    session: async ({ session, token }) => {
      session.user = token.user;
      return session;
    },
  },

  adapter: MongoDBAdapter(connectDB),
  secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);

login/page.js 파일로 credentials 을 변경하고자 합니다. 

pages에 경로를 집어 넣으니 만든 로그인 창이 뜨는데 로그인을 시도하면 동작하지 않습니다. 

[codingapple]

페이지안에서 signIn() 함수기능도 구현해야합니다 https://www.youtube.com/watch?v=hADeo48SATU 이런거 참고합시다

[글쓴이]

글