[Chat App] 회원가입 (next-auth, signIn callback)

지금은 로그인 방식이 OAuth만으로 되어있고 별도의 Credential은 적용하지 않고있다.

간단한 로그인 회원가입이 되길 원하는데 ... 어떻게 해야할까??  

 

next-auth가 제공하는 callback 중에 signIn을 한 번 뜯어보자.  

https://next-auth.js.org/configuration/callbacks

Callbacks | NextAuth.js

공식문서를 확인해보면 signIn callback만 존재하고, singUp callback은 존재하지 않는다. 따로 커스텀을 하던지 해야할것같다.

 

	...
    callbacks: {
        signIn: async ({ user, account, profile, email, credentials }) => {
          console.log("user:", user);
          console.log("account:", account);
          console.log("profile:", profile);
          console.log("email:", email);
          console.log("credentials:", credentials);
          return true;
        },
    }
    ...

 

signIn callback의 인자는 위와 같이 user, account, profile, email, credentials를 제공하는데 어떤 값들이 들어오는지 콘솔을 찍어봤다.

 

대강 이런 값들이 들어온다. 아마도 OAuth 로그인 과정에서 Google 쪽 api에서 처리되는 과정은 다 끝난 상태이고 위 사진의 값들을 받아온 상태인것같다.

 

signIn callback의 반환 값을 강제로 false를 줘버리면 다음 페이지로 리다이렉트 된다.

음 그렇다면 OAuth로그인 과정에서 prisma를 이용해서 회원 유무를 판단하고, 없으면 가입처리를 하고 바로 로그인 또는 다시 로그인페이지로 리다이렉트 시키고, 있으면 로그인 처리를 할 수 있지 않을까??

 

위의 공식문서에서 확인해보면

조건에 따라 signIn 처리를 할 수 있고, redirect를 원한다면 return '/:path'를 통해서 리다이렉트도 할 수 있는 듯 하다.

 

회원가입

자 위의 자료를 토대로 회원가입 로직을 구성해보자.

1. 로그인 버튼을 누른다.
2. OAuth 로그인
3. signIn callback에서 파라미터로 날아오는 user 이메일과 데이터베이스안의 user의 이메일을 비교(데이터베이스 user에 현재 로그인 한 유저가 있는지 확인)
4. 없으면, 디비에 유저를 생성해주고 login 페이지로 리다이렉트
5. 있으면 로그인 성공

이대로 로그인 로직을 구성해보면 아래와 같다.

...
  callbacks: {
    signIn: async ({ user, account, profile, email, credentials }) => {
      if (!user || !user.email) {
        return false;
      }
      const findUser = await prisma.user.findFirst({
        where: { email: user.email },
      });

      if (!findUser) {
        await prisma.user.create({
          data: {
            email: user.email,
            name: user.name,
          },
        });
        return "/login";
      }
      return true;
    },
 ...

findUser를 signIn callback에서 콘솔을 찍으며 확인해보면, 최초 로그인(회원가입)시에는 null임을 확인할 수 있고, 두번째 로그인시에는 { id: 2, email: 'wonillism@gmail.com', name: 'wopark' } 값이 출력되는것을 확인할 수 있다.

그리고 prisma studio에서도 잘 추가된 것을 확인할 수 있다.