NextAuth 구글 로그인 취소시 무한 로딩 에러 발생 (도와주세요 초고수님들 ㅜㅜ)

Question

저희 프로젝트에 일반 로그인과 구글 로그인을 만들으려합니다.제가 이해한 게 정확히 맞는지는 잘 모르겠지만 일반 로그인시에 CredentialsProvider에 값을 넣어 session 을 생성할 예정이고 (여기까진 잘 됐습니다)구글 로그인에 성공하면 그 구글 계정이 저희의 유저 테이블의 이메일 컬럼을 비교한 후 데이터가 있다면 로그인에 성공하려 합니다.어영부영 거기까진 구현이 되었는데 이 구글 로그인 화면에서 취소를 누르면 access_denied 에러가 발생하면서 해당 화면에서 계속 무한로딩이 발생합니다. ㅠㅠ어떻게 해결할 수 있을까요?NEXTAUTH_URL, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET 도 env 파일에 선언해두었고구글 클라우드의 Authorized redirect URIs도 정의되어있는 상태입니다 아래는 [...nextauth].ts 코드입니다 import NextAuth from &#34;next-auth&#34;; import GoogleProvider from &#34;next-auth/providers/google&#34;; import CredentialsProvider from &#34;next-auth/providers/credentials&#34;; import axios from &#34;axios&#34;; import jwt from &#34;jsonwebtoken&#34;; interface DecodedToken { id: string; userName: string; userLevel: string; empno: string; } const googleClientId &#61; process.env.GOOGLE_CLIENT_ID; const googleClientSecret &#61; process.env.GOOGLE_CLIENT_SECRET; if (!googleClientId || !googleClientSecret) { throw new Error(&#34;Google Client ID or Secret is missing!&#34;); } export default NextAuth({ providers: [ GoogleProvider({ clientId: googleClientId, clientSecret: googleClientSecret, authorization: { params: { prompt: &#34;consent&#34;, // 항상 계정 선택 화면을 표시하도록 강제 }, }, async profile(profile) { console.log(&#34;구글 로그인 프로필 정보:&#34;, profile); // 구글 프로필 정보 찍기 const { email } &#61; profile; try { //이메일을 사용하여 서버에서 추가 정보를 받아옵니다. const response &#61; await axios.post( &#96;http://127.0.0.1:8080/api/MOBI000/User/userByEmail?email&#61;${email}&#96; ); console.log(response); const token &#61; response.data; // 응답에서 토큰을 추출 console.log(token); // JWT 디코딩 const decodedToken &#61; jwt.decode(token) as DecodedToken; console.log(decodedToken); // 디코딩된 토큰에서 필요한 정보를 추출 const { id, userName, userLevel, empno } &#61; decodedToken; // 서버에서 받아온 정보로 user 객체를 반환 console.log(userName); return { id, userName, userLevel, empno, token, }; } catch (error) { console.error(&#34;Error in profile:&#34;, error); // 여기서 로그인 페이지로 리다이렉트 throw new Error(&#34;로그인 실패: 사용자 정보를 가져올 수 없습니다.&#34;); } }, }), CredentialsProvider({ name: &#34;Credentials&#34;, credentials: { id: { label: &#34;ID&#34;, type: &#34;text&#34; }, userName: { label: &#34;UserName&#34;, type: &#34;text&#34; }, userLevel: { label: &#34;UserLevel&#34;, type: &#34;text&#34; }, empno: { label: &#34;EmpNo&#34;, type: &#34;text&#34; }, token: { label: &#34;Token&#34;, type: &#34;text&#34; }, }, async authorize(credentials) { if ( credentials?.id && credentials?.userName && credentials?.userLevel && credentials?.empno && credentials?.token ) { return { id: credentials.id as string, userName: credentials.userName as string, userLevel: credentials.userLevel as string, empno: credentials.empno as string, token: credentials.token as string, }; } return null; }, }), ], pages: { signIn: &#34;/MOBI000/Login&#34;, // 로그인 페이지 error: &#34;/MOBI000/Login&#34;, // 로그인 오류 페이지 }, session: { strategy: &#34;jwt&#34;, // 세션 관리 방식 maxAge: 3600, // 1시간 (초 단위) 만료시간 }, callbacks: { async signIn({ account, profile, user }) { if (!user) { // 사용자 정보가 없으면 로그인 실패 처리 throw new Error(&#34;로그인 실패: 사용자 정보가 없습니다.&#34;); } return true; }, async jwt({ token, user }) { if (user) { token.id &#61; user.id as string; token.userName &#61; user.userName as string; token.userLevel &#61; user.userLevel as string; token.empno &#61; user.empno as string; token.token &#61; user.token as string; } return token; }, async session({ session, token }) { if (token) { session.user.id &#61; token.id as string; session.user.userName &#61; token.userName as string; session.user.userLevel &#61; token.userLevel as string; session.user.empno &#61; token.empno as string; session.user.token &#61; token.token as string; } return session; }, }, });

NextAuth 구글 로그인 취소시 무한 로딩 에러 발생 (도와주세요 초고수님들 ㅜㅜ)

0개의 답변

Q&A 목록