인프런 커뮤니티 질문&답변
작성한 질문수
회원가입 리다이렉트 오류
작성
·
395
·
수정됨
0
현재 상태는 201로 불러와도 redirect가 되지 않습니다.
console.log()로 찍어보니 await signIn 이후로는 console.log()가 찍히지가 않았습니다.
axios로 바꿔봐도 그대로이고 버전도 @auth/core 버전도 바꿔보았는데 꿈쩍 않습니다 ㅠ 물론 DB에도 정상적으로 데이터가 저장되고요.. 시간만 날리다가 도저히 안되겠기에 질문 남깁니다..
signup.ts
"use server";
import { signIn } from "@/auth";
import { redirect } from "next/navigation";
// import axios from "axios";
export default async (prevState: any,formData: FormData) => {
// 입력값이 없거나 || 빈칸이 존재하지않을때
if (!formData.get("id") || !(formData.get("id") as string)?.trim()) {
return { message: "no_id" };
}
if (!formData.get("name") || !(formData.get("name") as string)?.trim()) {
return { message: "no_name" };
}
if (!formData.get("password") || !(formData.get("password") as string)?.trim()) {
return { message: "no_password" };
}
if (!formData.get("image")) {
return { message: "no_image" };
}
formData.set("nickname", formData.get("name") as string);
let shouldRedirect = false;
try {
const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,{
method : 'post',
body: formData,
credentials: "include", // 쿠기 전달 가능캐 함
});
console.log("회원가입상태 : ",response.status);
// 회원가입시 이미 가입되어있을때
if (response.status === 403) {
return { message: "user_exists" };
}
shouldRedirect = true;
await signIn("credentials", {
username: formData.get('id'),
password: formData.get('password'),
redirect: false,
})
} catch (err) {
console.error(err);
return {message : null};
}
console.log("11")
if (shouldRedirect) {
console.log("리다이랙트");
redirect("/home");
}
return { message: null};
};
답변 2
0
회원가입 후 로그인이 안 되시는 것 같은데요. 로그인 시에는 어디까지는 제대로 되는지 확인이 필요합니다. auth.ts에서 어느부분까지 콘솔이 찍히는지 확인해보세요.
클라이언트는 signup.ts 이부분에서 출력이 되고 있습니다.
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";
export const {
handlers: {GET,POST},
auth,
signIn,
} = NextAuth({
pages: {
signIn: '/i/flow/login',
newUser: '/i/flow/signup',
},
providers: [
CredentialsProvider({
async authorize(credentials) {
const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id : credentials.username,
password : credentials.password,
}),
})
if (!authResponse.ok) {
return null
}
const user = await authResponse.json()
return {
email : user.id,
name : user.name,
image : user.image,
...user,
}
},
}),
],
});auth.ts에서는 특별하게 건든것이 없습니다..
제가 authorize에서 어디까지 실행되는지 콘솔로그 찍어보라고 한 이유는 거기서 문제가 있기 때문에 로그인이 안 되고있는 겁니다. signIn에서 안된다는 건 authorize 함수에서 에러가 나고있는 겁니다. fetch 전후로 콘솔로그 찍어보세요. authResponse.json() 뒤에도요
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";
import {NextResponse} from "next/server";
import axios from 'axios'
export const {
handlers: { GET, POST },
auth,
signIn,
} = NextAuth({
pages: {
signIn: '/i/flow/login',
newUser: '/i/flow/signup',
},
providers: [
CredentialsProvider({
async authorize(credentials) {
console.log("authorize function started");
const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: credentials.username,
password: credentials.password,
}),
})
console.log("fetch executed");
if (!authResponse.ok) {
console.log("authorization failed");
return null
}
const user = await authResponse.json()
console.log('user', user);
return {
email: user.id,
name: user.nickname,
image: user.image,
...user,
}
},
}),
]
});authResponse 이후의 console.log가 찍히질 않네요..
네 그럼 fetch가 문제라는 걸 확인한 겁니다.
process.env.NEXT_PUBLIC_BASE_URL이랑 credentials도 로그찍어보시고
백엔드 콘솔에도 에러 없는지 한 번 봐보세요.
제가 mac을 사용하는데 게시해주신 링크에서 확인해보니 redis-server 를 따로 켜준 후 npm run start:dev를 켜는 것이였군요 ㅠㅠ 늦은시간까지 도움주셔서 감사합니다. 좋은하루 보내세요 :)
0
안녕하세요, 인프런 AI 인턴입니다. Jinhye Kim님의 질문에 대해 관련된 기존 질문을 찾아보았습니다. 질문의 주요 내용은 회원가입 후 signIn 함수 이후 redirect가 작동하지 않는 문제와 관련있어 보입니다.
잠재적인 해결 방안을 제시한 다음 링크를 확인해보시기 바랍니다:
- 로그인 문제 - 이 게시글에서는 next-auth 라이브러리를 사용할 때 발생할 수 있는 로그인 관련 리다이렉트 문제를 다루고 있습니다. 특히 signIn 후 router.replace나 redirect가 예상대로 동작하지 않는 이슈를 지적하고 있네요. 비록 상황은 조금 다르지만 로그인 후 페이지 이동 처리에 대해 유용한 정보를 얻을 수 있을 것입니다.
게시물에서는 특정 버전의 라이브러리에 문제가 있을 수 있음을 언급하고 있으며, 로그인 후 리다이렉트 처리 방법에 대한 내용도 포함되어 있습니다. 질문자님의 경우 signIn 함수와 redirect 작업 사이에 문제가 발생하는 것으로 보이는데요, 라이브러리의 버전을 살펴보고 해당 게시글의 방법대로 시도해보시는 것이 도움이 될 수 있습니다.
질문자님의 문제와 가장 유사한 부분은 signIn 함수가 성공적으로 실행된 후 페이지 이동, 즉 redirect가 정상적으로 이뤄지지 않는 부분입니다. 오류 메시지나 console.log를 통해 어디까지 코드가 실행되는지 확인한 후, 해당 게시글에서 제시한 해결책을 시도해 볼 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
클라이언트 console.log
서버 console