Inflearn Community Q&A

백엔드 취준생인데 프론트를 좀 할 일이 있어서 강의 듣고 있는데 Next-Auth 부분이 이해가 쉽지 않네요... 몇 가지 질문 드리고자 합니다.

1. session 객체에 어떤게 담기는건지 잘 모르겠습니다.

export default async function Home() {
    const session = await auth()
    if (session?.user) {
        redirect('/home')
        return null
    }
    return (
        <Main/>
    );
}

export const {
    handlers: { GET, POST },
    auth,
    signIn,
} = NextAuth({
    // 개발자가 직접 만든 화면에서 로그인 하도록 진행
    pages: {
        signIn: '/i/flow/login', // 로그인
        newUser: '/i/flow/signup' // 회원가입
    },
    providers: [
        CredentialsProvider({
            async authorize(credentials) {
                const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        id: credentials.usename,
                        password: credentials.password,
                    })
                })

                if (!authResponse.ok) {
                    return null
                }

                const user = await authResponse.json()

                return {
                    email: user.id,
                    name: user.nickname,
                    image: user.image,
                    ...user
                }
            }
        })
    ],
})

Home 에서 auth() 를 통해 불러온 session 객체에 CredentialsProvider 가 리턴한 객체가 담기는건가요?

그런데 그렇다고 하기엔 객체에 user 라는 속성이 없어서 아닌 것 같기도 해서 아닌 거 같다는 생각도 듭니다.

export default function Login() {
    const router = useRouter()
    const { data: session } = useSession();

    if (session?.user) {
        router.replace('/home')
        return null
    }

    router.replace("/i/flow/login")
    return (
        <Main />
    )
}

마찬가지로 여기서도 session 에 어떤게 담기는지 잘 모르겠습니다 ㅠㅠ auth() 로 리턴한 세션과 같은 객체가 담기는 것 같긴 한데 도대체 session 에 뭐가 담기는지 파악이 쉽지 않네요 ㅋㅋㅋ

그래서 session 객체의 user 를 클릭해서 들어가보니 다음과 같은 interface 가 나오네요.

export interface DefaultSession {
  user?: User
  expires: ISODateString
}

auth/core 에 있는 인터페이스인 것 같은데 이 인터페이스가 어느 시점에 등장(?) 하는 건지 잘 모르겠습니다.


2. 지금 진행하는 로그인 방식은 백엔드에 로그인 관련 API 가 있다고 가정하고 진행하는 것으로 저는 이해를 했는데요

export const handlers = [
    http.post(`${baseUrl}/api/login`, () => {
        console.log('로그인');
        return HttpResponse.json(User[1], {
            headers: {
                'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/'
            },
        })
    }),
    http.post(`${baseUrl}/api/logout`, () => {
        console.log('로그아웃');
        return new HttpResponse(null, {
            headers: {
                'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0'
            }
        })
    }),
    http.post(`${baseUrl}/api/users`, async ({ request }) => {
        console.log('회원가입');
        // return HttpResponse.text(JSON.stringify('user_exists'), {
        //     status: 403
        // })
        return HttpResponse.text(JSON.stringify('ok'), {
            headers: {
                'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/'
            },
        });
    })
];

이게 지금 api 를 mocking 한 건데 여기에 요청을 보내고 있으니까요.

그러면 이 API 에서 리턴한 유저(User[1]) 가 세션에 담기는 것인지 궁금하네요. (이것도 1번 질문하고 좀 연관이 되네요) 그러면 만약에 백엔드 API 가 로그인 성공했을 때 http body 에 별도의 객체를 리턴하지 않으면 어떻게 되나? 이런 궁금증도 생깁니다.

3. 그리고 로그아웃을 할 때는 왜 로그아웃 API 에 따로 요청을 보내지 않고 signOut 함수만 사용하는지 궁금합니다. 이것만 사용해도 쿠키가 삭제가 돼서 그런 것인가요? 그러면 백엔드 서버에 별도의 로그아웃 API 를 만들지 않아도 되는 것인지 궁금합니다.

장문의 질문글이 된 거 같은데, 뭔가 Next-Auth 를 처음 접하다보니 사용법이 좀 익숙치가 않네요.

AI 에 물어보거나 구글링을 해 봐도 좀 파악이 쉽지 않아 여기에 질문 남겨봅니다.

감사합니다.