[...nextauth]파일 세션 함수 관련 문의

[김도균]

선생님 안녕하세요 제가 next.js 강의를 완강하고 저의 자체 제작 프로젝트를 하나 만들려고 기획중이고

기존에 배웠던 부분에서 살짝 업그레이드 하여 로그인 시 저만의 페이지를 로드 하게끔 코드를 짜려고 했습니다 

import NextAuth from 'next-auth';
import CredentialsProvider from "next-auth/providers/credentials";
import {connectDB} from "@/util/mongoDbDatabase";
import {MongoDBAdapter} from "@next-auth/mongodb-adapter";
import CustomCredentialsProvider from "@/app/CredentialsProvider";

export const options = {
    providers: [

        CredentialsProvider({
                name: "credentials",
            // 사용자 정의 로그인 페이지의 CredentialsProvider 초기화
                async authorize(credentials) {
                    // 사용자 정의 로그인 로직을 구현
                    // 예: credentials.email과 credentials.password를 사용하여 사용자 인증 확인
                    const client = await connectDB
                    const db = client.db("yoong")
                    const user = await db.collection("member").findOne({userId : credentials.userId, password : credentials.password})
                    // 인증이 성공하면 사용자 정보 반환

                    if(!user){
                        return null
                    }

                    return user;

                },

        }),
    ],

    session: {
        strategy: 'session',
        maxAge: 30 * 24 * 60 * 60 //30일
    },

    callbacks: {
        async session(session, user) {
            const client = await connectDB
            const db = client.db("yoong")
            db.collection("session").insertOne(user)
            return session;
        },
    },
        adapter : await MongoDBAdapter(await connectDB),
        secret : process.env.NEXTAUTH_SECRET,

    // NextAuth.js의 다양한 설정 옵션들 추가 가능
};

// 커스텀 로그인 페이지를 사용하여 로그인 화면을 렌더링
const CustomLoginPage = () => {
    return (
        <div>
            <CustomCredentialsProvider/>
        </div>
    );
};

export default NextAuth(options);
export const CustomLogin = CustomLoginPage;

그래서 해당 방식으로 로그인 페이지를 구현했고

'use client'
import {useState} from "react";
import {signIn} from "next-auth/react";
import {useRouter} from "next/navigation";

export default function CustomCredentialsProvider({session}) {
    let [id, setId] = useState("")
    let [password, setPassword] = useState("")
    let router = useRouter()
    async function handleSignIn(){

        const result = await signIn('credentials', {
            redirect: false, // 로그인 성공 시 자동으로 페이지를 이동하지 않도록 설정
            userId: id,
            password: password,
            callbackUrl: 'http://localhost:3000/main'
        });

        if(result.error !== undefined && result.error !== null && result.error !== ""){
            alert("로그인에 실패했습니다 사유 : " + result.error)
        }else{
            alert("로그인 성공 : " + result)
            console.log(result)
            await router.push("/main")
        }
    }

    return (
        <div className="main">
            < img src="/ProjectYoongMain.png" className="main-image"></img>
            <div className="login">
                <h1>Welcome To PJYoong</h1>
                <div className="input-login">
                    <p>ID</p>
                    <input type="text" onChange={(e)=>{setId(e.target.value)}} placeholder="아이디를 입력하세요" style={{right: 20 + "px"}}></input>
                </div>
                <div className="input-login">
                    <p>PW</p>
                    <input type="password" onChange={(e)=>{setPassword(e.target.value)}} placeholder="비밀번호를 입력하세요"></input>
                </div>
                <div className="f-right">
                    <button type="button" onClick={
                        handleSignIn
                    }>로그인</button>
                </div>
            </div>
        </div>
    )
}

해당 컴포넌트에서 간략하게 로그인 및 로그인 검수까지 할 수 있게끔 구현을 해놨습니다 그런데 문제가 로그인 자체는 잘 되는데
(실제로 위에 컴포넌트에서 로그를 출력했을 때 잘 되는 점 확인) 

callbacks: {
async session(session, user) {
const client = await connectDB
const db = client.db("yoong")
db.collection("session").insertOne(user)
return session;
},
}, 

여기 콜백 안에 있는 세션 함수에 접근을 못하더라구요 (로그 찍어보고 했는데 아예 로그도 안나옵니다)

이에 대해서 혹시 제가 틀리거나 문제가 될만한 부분이 있을지 문의드립니다

이게 오류가 나오면 오류 찾으면서 어떻게든 해결해볼텐데 오류가 안나오니까 해결이 좀 어렵더라구요 

그럼 부탁드리겠습니다

[codingapple]

useSession() 이나 getServerSession() 사용시에 아마 실행될걸요

[김도균]

export default async function MainLayout({children}){
    let session = await getServerSession(options)

    console.log(session)

    return (
        <html lang="en">
        <body>
        <TopMenu session={session}/>
        {children}
        </body>
        </html>

    )

}

해당 부분에서 로그인을 하고 들어갔을때 콘솔을 확인해봤을때 콘솔에 null이 나와서요 ㅡㅡ 왜 그런건지 잘 모르겠습니다

[codingapple]

로그인시 DB에 session document는 저장 잘되나 쿠키는 생성되나 확인해봅시다

[김도균]

넵 해보았습니다만 우선 callbacks 에 아래 처럼 세션을 MongoDB에 저장 해달라고 구현을 했었지만 sessions 테이블에는 아무것도 저장되어있지 않았습니다

async session(session, user) {
    const client = await connectDB
    const db = client.db("yoong")
    db.collection("sessions").insertOne(user)
    return session;
}

또한 쿠키 확인 시에도 로그인 관련 정보는 없었고 

LocalStrorage에는 로그인과 연관이 되어있는지는 모르겠고 LocalStrorage 관련 로그인 정보 구현도 따로 하지 않았는데

아래의 정보는 확인되고 있습니다(일단 trigger에 signout이라고 써있어서 로그인 관련이 아닐까 하는 생각은 듭니다)

data: {trigger: "signout"}
 
event: "session"
timestamp: 1709585378

이 외 로그 출력시 로그인 정보에 대한 로그는 출력이 되지 않고 있습니다

[codingapple]

  adapter : MongoDBAdapter(connectDB), 로 바꿔봅시다 어댑터 잘해놓으면 DB에 세션생성 알아서됩니다

[글쓴이]

글