• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Next.js 게시판 카카오소셜로그인 에

카카오소셜로그인 에

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #104933

    이준영
    참가자
    prisma 와 mongodb를 사용했습니다.
    
    // This is your Prisma schema file,
    // learn more about it in the docs: https://pris.ly/d/prisma-schema
    generator client {
      provider = "prisma-client-js"
    }
    datasource db {
      provider = "mongodb"
      url      = env("DATABASE_URL")
    }
    model User {
      id String @id @default(auto()) @map("_id") @db.ObjectId
      name String?
      email String? @unique
      emailVerified DateTime?
      hashedPassword String?
      createdAt DateTime @default(now())
      updatedAt DateTime @updatedAt
      accounts Account[]
    }
    model Account {
      id String @id @default(auto()) @map("_id") @db.ObjectId
      userId String @db.ObjectId
      type String
      provider String
      providerAccountId String
      refresh_token String? @db.String
      access_token String? @db.String
      expires_at Int?
      refresh_token_expires_in Int?
      token_type String?
      scope String?
      id_token String? @db.String
      session_state String?
      user User @relation(fields: [userId], references: [id], onDelete: Cascade)
      @@unique([provider, providerAccountId])
    }
    
    이런 식으로 prisma를 제작하였고,
    
    
    import bcrypt from 'bcrypt'
    import NextAuth from "next-auth";
    import CredentialsProvider from "next-auth/providers/credentials";
    import KakaoProvider from 'next-auth/providers/kakao'
    import NaverProvider from "next-auth/providers/naver";
    import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
    import { PrismaAdapter } from "@next-auth/prisma-adapter";
    import { connectDB } from "@/util/database";
    import prisma from "@/lib/prismadb";
    export const authOptions = {
      providers: [
        KakaoProvider({
          clientId: process.env.KAKAO_CLIENT_ID,
          clientSecret: process.env.KAKAO_CLIENT_SECRET,
        }),
        NaverProvider({
          clientId: process.env.NAVER_CLIENT_ID,
          clientSecret: process.env.NAVER_CLIENT_SECRET
        }),
        CredentialsProvider({
          name: "credentials",
            credentials: {
              email: { label: "email", type: "text", placeholder: "이메일을 입력해 주세요." },
              password: { label: "password", type: "password", placeholder: "비밀번호를 입력해 주세요." },
          },
          //2. 로그인요청시 실행되는코드
          //직접 DB에서 아이디,비번 비교하고 
          //아이디,비번 맞으면 return 결과, 틀리면 return null 해야함
          async authorize(credentials) {
            if (!credentials?.email || !credentials?.password) {
              throw new Error('Invalid Credentials');
            }
            const user = await prisma.user.findUnique({
              where: {
                email: credentials.email
              }
            });
            if (!user || !user?.hashedPassword) {
              throw new Error('Invalid Credentials');
            }
            const pwCheck = await bcrypt.compare(
              credentials.password,
              user.hashedPassword
            );
            if (!pwCheck) {
              throw new Error('Invalid Credentials');
            }
            return user;
          }
        })
      ],
      callbacks: {
        //4. jwt 만들 때 실행되는 코드 
        //jwt에 토큰들과 만료기간,user를 담아 보냄
        async jwt({ token, account, user }) {
          if (account && user) {
            // return {
            //   accessToken: account.access_token,
            //   accessTokenExpires: account.expires_at,
            //   refreshToken: account.refresh_token,
            //   user: user,
            // }
            // token.user = {}
            // token.user.id = user
            // token.user.name = user.name;
            // token.user.email = user.email;
            token.user = user;
            token.provider = account.provider;
            token.accessToken = account.access_token;
            token.accessTokenExpires = account.expires_at;
            token.refreshToken = account.refresh_token;
          }
          return token;
        },
        //5. 유저 세션이 조회될 때 마다 실행되는 코드
        //jwt토큰정보를 session에 유지시키게 됨
        async session({ session, token }) {
          session.user = token.user;
          session.provider = token.provider;
          session.accessToken = token.accessToken;
          session.accessTokenExpires = token.accessTokenExpires;
          session.error = token.error;
          return session;
        },
      },
      
      secret : process.env.NEXTAUTH_SECRET,
      session: {
        strategy: 'jwt',
        maxAge: 1 * 2 * 60 * 60 //2시간
      },
      pages: {
        signIn: "/login",
      },
      adapter : PrismaAdapter(prisma),
      debug: process.env.NODE_ENV == 'development',
    };
    export default NextAuth(authOptions);
    이런 식으로 nextauth를 제작했습니다.
    근데 네이버 소셜로그인은 누르면 account와 user에 다 잘 들어가는데 카카오 소셜로그인은
    http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F&error=OAuthAccountNotLinked
    이런 에러가 뜹니다. 카카오에서 제공하는 정보와 prisma에 정보가 안맞아서 그런가 생각도 해보았는데 잘모르겠어서 질문드립니다!!
     
     
    #104942

    codingapple
    키 마스터
    원래 같은 이메일로 다른 소셜로그인 하려고 하면 OAuthAccountNotLinked 에러뜨면서 막아주는 식으로 동작할걸요
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠