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

home2 게시판 Next.js 게시판 Next.js 에서 typeScript를 사용할때 next-auth 작성법

Next.js 에서 typeScript를 사용할때 next-auth 작성법

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

    권덕용
    참가자
    저는 Next.js에서 typeScript까지 사용중입니다.
    타입을 지정해주어야 하는데 어떻게 지정해야할지 모르겠습니다...
    
    
    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: process.env.GITHUB_CLIENTID as string,
                clientSecret: process.env.GITHUB_CLIENTSECRET as string,
            }),
            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
                    }
                    let password = credentials?.password;
                    
                    const pwcheck = await bcrypt.compare(password ? 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: process.env.NEXTAUTH_SECRET
    };
    export default NextAuth(authOptions);
    • 이 게시글은 권덕용에 의해 1 년, 2 월 전에 수정됐습니다.
    #120479

    권덕용
    참가자
    import { connectDB } from "@/util/database";
    import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
    import NextAuth, { AuthOptions } from "next-auth";
    import GithubProvider from "next-auth/providers/github";
    import CredentialsProvider from "next-auth/providers/credentials";
    import bcrypt from 'bcrypt';
    import { JWT } from "next-auth/jwt";
    // User 타입 정의
    interface User {
        name: string;
        email: string;
    }
    // 세션의 user 속성 타입 정의
    interface TokenUser {
        name: string;
        email: string;
    }
    
    
    export const authOptions : AuthOptions = {
        providers: [
            GithubProvider({
                clientId: process.env.NEXTAUTH_CLIENTID as string,
                clientSecret: process.env.NEXTAUTH_CLIENTSECRET as string,
            }),
            CredentialsProvider({
                //1. 로그인페이지 폼 자동생성해주는 코드 
                name: "credentials",
                credentials: {
                    email: { label: "email", type: "text" },
                    password: { label: "password", type: "password" },
                },
                //2. 로그인요청시 실행되는코드
                //직접 DB에서 아이디,비번 비교하고 
                //아이디,비번 맞으면 return 결과, 틀리면 return null 해야함
                async authorize(credentials): Promise<any> {
                    // if(!credentials || !credentials.email || !credentials.password){
                    //     return null as any
                    // }
                    let db = (await connectDB).db('forum');
                    let user = await db.collection('user_cred').findOne({ email: credentials?.email })
                    if (!user) {
                        console.log('해당 이메일은 없음');
                        return null
                    }
                    let password = credentials?.password;
                    if (!password) {
                        password = "";
                    }
                    const pwcheck = await bcrypt.compare(password, user.password);
                    if (!pwcheck) {
                        console.log('비번틀림');
                        return null
                    }
                    if (user) {
                        return user
                    } else {
                        return null
                    }
                }
            })
        ],
        //3. jwt 써놔야 잘됩니다 + jwt 만료일설정
        session: {
            strategy: 'jwt',
            maxAge: 30 * 24 * 60 * 60 //30일
        },
        callbacks: {
            jwt: async ({ token, user }: { token: any; user: User | null }): Promise<any> => {
                if (user) {
                    token.user = {};
                    token.user.name = user.name || null; 
                    token.user.email = user.email || null;
                }
                return token;
            },
            session: async ({ session, token }: { session: any; token: any }): Promise<any> => {
                session.user = token.user;
                return session;
            },
        },
        adapter: MongoDBAdapter(connectDB),
        secret: process.env.NEXTAUTH_SECRET
    };
    export default NextAuth(authOptions);
    여기까지 진행되었습니다ㅠㅠ
    callbacks: {
            jwt: async ({ token, user }: { token: any; user: User | null }): Promise<any> => {
                if (user) {
                    token.user = {};
                    token.user.name = user.name || null; 
                    token.user.email = user.email || null;
                }
                return token;
            },
            session: async ({ session, token }: { session: any; token: any }): Promise<any> => {
                session.user = token.user;
                return session;
            },
        },
    부분의 jwt 에서
    '({ token, user }: { token: any; user: User | null; }) => Promise<any>' 형식은 '(params: { token: JWT; user: User | AdapterUser; account: Account | null; profile?: Profile | undefined; trigger?: "signIn" | "signUp" | "update" | undefined; isNewUser?: boolean | undefined; session?: any; }) => Awaitable<...>' 형식에 할당할 수 없습니다.
    '__0' 및 'params' 매개 변수의 형식이 호환되지 않습니다.
    '{ token: JWT; user: User | AdapterUser; account: Account | null; profile?: Profile | undefined; trigger?: "signIn" | "signUp" | "update" | undefined; isNewUser?: boolean | undefined; session?: any; }' 형식은 '{ token: any; user: User | null; }' 형식에 할당할 수 없습니다.
    'user' 속성의 형식이 호환되지 않습니다.
    'User | AdapterUser' 형식은 'User | null' 형식에 할당할 수 없습니다.
    'import("c:/choijinyoung/next/forum/node_modules/next-auth/core/types").User' 형식은 'User' 형식에 할당할 수 없습니다.
    'name' 속성의 형식이 호환되지 않습니다.
    'string | null | undefined' 형식은 'string' 형식에 할당할 수 없습니다.
    'undefined' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322)
    이렇게 타입오류가 발생합니다ㅠㅠ알려주세요ㅠㅠ
     
    #120488

    codingapple
    키 마스터
    jwt나 session 함수들엔 타입 직접 안넣어도 알아서 잘될걸요
    #120606

    권덕용
    참가자
    .
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

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

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

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