[TroubleShooting] NextAuth에서 token과 session

일단 가장 큰 문제점은 JS로 NextAuth를 구현할때는 다른 코드를 따라하기 급급했고,

코드의 의미를 파악하지 못한상태에서 그저 진행했던 것 같다.

역시 에러를 만나야지 코드를 하나하나 살펴보다가 코드에대해 이해하게 되는것 같다.

에러야 고마워 !!!

 

일단 나는 google을 이용해서 oauth를 구현했고,

 GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),

 

NextAuth에서 제공하는 폼만으로도 Oauth구현창에서 내가 만든 아이디로 로그인을 할수있다.

뭐 물론 이제 회원가입하는 창도 만들고 해야겠지만.... 

일단 이전에 만들어놨던 간단하고도 수많은 아이디를 이용하기로 했다.

 

name: "credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },

 

 async authorize(credentials) {
        let db = (await connectDB).db("market");
        let me = await db
          .collection("user_cred")
          .findOne({ email: credentials?.email });
        //console.log(user);
        //console.log(credentials);
        //입력한게 db에 있는거랑 같으면 db에 있는걸로 리턴해라
        if (credentials?.email === me?.email) {
          return me?.email;
        } else {
          return null;
        }
      },

 

입력한 email과 db의 email이 일치하는지 확인하는 방법을 이용했다.

물론 비밀번호도 확인하는 방법을 추가 할것이다.

일단은 jwt랑 session이런 부분들 때문에 email만 맞춰본거다.

 

이제 콜백함수를 넣어야 하는데 

jwt와 session이 있다.

jwt는 JSON 웹 토큰이 생성되거나 (즉, 로그인 시) 업데이트될 때마다 호출될것이고

session은 세션이 확인될때마다 호출될것이다.

 

여기서 나에게 가장 큰 문제가 발생했는데

credentials를 이용할때와 oauth로 로그인할때 데이터의 형태도 다르고 원하는 형태로 데이터가 들어가지 않았었다.

{
  user: {
    name: '1231',
    email: '1321',
    picture: '123321',
    sub: '2131',
    iat: 1231,
    exp: 1321,
    jti: '1231231'
  },
  expires: '12131'
}

 

위의 형태로 들어가길 원했지만

 

{
  email: {
    name: '1231',
    email: '1321',
    picture: '123321',
    sub: '2131',
    iat: 1231,
    exp: 1321,
    jti: '1231231'
  },
  expires: '12131'
}

 

{
  email: '123',
  iat: 13123,
  exp: 13123,
  jti: '2313'
}

 

이런식으로 데이터가 들어가는 형태였던 것으로 기억한다.

 

그러다 코드를 구현중 account의 존재를 알게되었다

account는 NextAuth에서 제공하는 콜백 함수의 파라미터 중 하나로, 사용자가 로그인한 소셜계정에 대한 정보를 포함하고 있다고 한다. 

그래서 if문을 이용해서 조건을 만들어서 나눴다.

 

callbacks: {
    jwt: async ({
      token,
      user,
      account,
    }) => {
      if (user) {
        if (account.provider === "google") {
        } else {
          token = {};
          token.email = user;
          token.name = user;
        }
      }
      return token;
    },
    session: async ({ session, token }) => {
      if (token) {
        session.user = token;
      }
      return session;
    },
  },

 

그랬더니 데이터의 형태가 아주 아름다워졌다. (원하는 데이터의 형태로 나왔다.)

{
  user: {
    name: '121212',
    email: '1212',
    picture: '1211212',
    sub: '1121',
    iat: 1212,
    exp: 1212,
    jti: '121212'
  },
  expires: '1212'
}


{
  name: '121212',
  email: '121212',
  picture:'121212',
  sub: '121212',
  iat: 1212,
  exp: 1212,
  jti: '121212'
}

 

그래서 로그인된 정보도 useSession을 이용해서 잘 확인할수 있게 되었다.!!!

문제해결완료!!!