회원기능만들기 중 오류

[주종현]

[next-auth][warn][EXPERIMENTAL_API] 
`getServerSession` is used in a React Server Component.
https://next-auth.js.org/configuration/nextjs#getServerSession}
https://next-auth.js.org/warnings#EXPERIMENTAL_API
[next-auth][warn][NEXTAUTH_URL] 
https://next-auth.js.org/warnings#nextauth_url
[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwe/compact/decrypt.js:20:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwt/decrypt.js:12:100)\n' +
    '    at Object.decode (webpack-internal:///(sc_server)/./node_modules/next-auth/jwt/index.js:44:53)\n' +
    '    at async Object.session (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:157:37)\n' +
    '    at async getServerSession (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:86:21)\n' +
    '    at async RootLayout (webpack-internal:///(sc_server)/./app/layout.js:31:19)',
  name: 'JWEInvalid'
}
null
[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwe/compact/decrypt.js:20:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(sc_server)/./node_modules/jose/dist/node/esm/jwt/decrypt.js:12:100)\n' +
    '    at Object.decode (webpack-internal:///(sc_server)/./node_modules/next-auth/jwt/index.js:44:53)\n' +
    '    at async Object.session (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:157:37)\n' +
    '    at async getServerSession (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:86:21)\n' +
    '    at async RootLayout (webpack-internal:///(sc_server)/./app/layout.js:31:19)',
  name: 'JWEInvalid'
}
null

register 페이지를 들어가면 터미널에 이렇게 찍히는데 registe와 signup 모두 복붙한 코드인데도 이렇게 뜨네요

그리고 list페이지에서 detail페이지로 넘어간 후 다시 list 페이지로 돌아오기 위해 nav바에 있는 list 버튼을 눌렀을때는 정상적으로 돌아오는데 뒤로가기로 돌아가려하면 페이지가 무한 로딩되며 응답이 끊어집니다

둘다 원인을 찾아보려 노력했지만 제 수준에서는 힘드네요

[codingapple]

nextauth 설정파일에 복붙할 때 뭔가 오타가 있거나
JWT 사용중이면 설정파일에 secret : '어쩌구'가 없으면 저런거 뜹니다

[주종현]

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 = {
  providers: [
    GithubProvider({
      clientId: 'cf67469df6abc03c2896',
      clientSecret: 'd79187d249f8ac30b79070e2d66e60b70d0ce8fb',
    }),

    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('user_cred').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: 'qwer1234'  
};
export default NextAuth(authOptions);

이게 지금 사용하고 있는 nextauth.js 코드입니다 그냥 복붙한것 같은데 오타난게 있을까요?

그리고 리스트로 뒤로가기 할 때 페이지가 멈추는건 어떤 이유에서 일까요?

'use client'

import Link from "next/link"

export default async function ListItem({ result }) {
  console.log(result)
  return (
    <div>
      {result.map((a, i) =>
        <div className="list-item" key={i}>
          <Link href={'/detail/' + result[i]._id}>{result[i].title}</Link>
          <Link href={'/edit/' + result[i]._id} className="list-btn">✏️</Link>
          <span onClick={(e) =>
            fetch('/api/delete', { method: 'POST', body: result[i]._id })
              .then(() => {
                e.target.parentElement.style.opacity = 0
                setTimeout(() => {
                  e.target.parentElement.style.display = "none"
                }, 1000);
              })
          }>🗑️</span>
          <p>1월 1일</p>
        </div>
      )}
    </div>
  )
}

이게 listitem 코드입니다

[codingapple]

await getServerSession 쓰는 곳 문법도 잘 되어있나 확인합시다 
list 페이지 조작시 터미널이나 콘솔창 에러같은거 확인해봅시다

[글쓴이]

글