로그인 클릭시, Failed to construct URL: Invalid base URL 에러로 인해서 리다이렉트가 되지 않습니다
‘next-auth로 로그인하기’ 강의를 다 듣고 나서
로그인 버튼을 클릭했더니 아래의 에러가 발생하고
'/home'으로 리다이렉트가 되지 않습니다.
TypeError: Failed to construct 'URL': Invalid base URL
at signIn (react.js:172:19)
at async onSubmit (VM5774 LoginModal.tsx:29:13)
에러 로그를 보고 처음에는 URL 설정이 문제인가 싶었는데
URL은 문제가 없었습니다
#.env
AUTH_URL=http://localhost:9090
AUTH_SECRET=mustkeepinsecret
// auth.ts
CredentialsProvider({
async authorize(credentials) {
console.log(credentials);
const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
// credentials
id: credentials.username,
password: credentials.password,
}),
});
console.log(authResponse);
// 로그인 실패
if (!authResponse.ok) {
return null;
}
// 로그인 성공
const user = await authResponse.json();
return user;
},
}),
// src\\mocks\\handlers.ts
http.post('/api/login', () => {
console.log('로그인');
return HttpResponse.json(
{
userId: 1,
nickname: '제로초',
id: 'zerocho',
image: '/5Udwvqim.jpg',
},
{
headers: {
'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/',
},
},
);
}),
실제로 로그인 버튼을 클릭하면 터미널에 handlers.ts 에 작성한 console.log('로그인'); 가 제대로 출력이 되고
CredentialsProvide의 authorize에 작성한 console.log(credentials); 역시 제대로 출력이 됩니다
에러 메세지를 보면 signIn 관련 문제인 것 같은데 이 역시 강사님이 작성해주신 내용 그대로 작성했는데 뭐가 문제인지 모르겠네요ㅠ
const onSubmit: FormEventHandler<HTMLFormElement> = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setMessage('');
try {
await signIn('credentials', {
username: id,
password,
redirect: false,
});
// 로그인 성공하면 리다이렉션
router.replace('/home');
} catch (e) {
console.error(e);
setMessage('아이디와 비밀번호가 일치하지 않습니다');
}
};
답변 4
1
https://github.com/nextauthjs/next-auth/issues/9279
이 이슈인 것 같은데 이게 해결되야할 것 같습니다.
beta3 버전 설치하시거나 beta5 나오면 그걸로 올려보세요.
1
console.log(authResponse)도 제대로 뜨나요?
0
console.log(authResponse) 의 결과는 위와 같습니다.
console.log(await authResponse.json()) 의 결과도 아래와 같이 MSW로 지정한 데이터가 잘 나옵니다.
근데도 계속 로그인 버튼만 누르면 아래와 같은 에러가 발생하네요,,ㅠ

0
안녕하세요. 혹시 beta3버전으로 다운시켜서 해결하셨을까요?
2
답변 달아주셔서 감사합니다!
package.json에서 직접 수정한 후 node_module를 삭제 후 npm install로 다시 설치해줬는데, 계속 같은 에러가 나서 더 찾아보니 package-lock.json에는 4버전으로 남아있었더라구요! npm uninstall next-auth로 삭제 후 npm install next-auth@5.0.0-beta.3 로 재설치 하니 해결되었습니다.
0
삭제된 글입니다
0
안녕하세요!
서버 컴포넌트에서 사용하는 redirect뿐만 아니라
import { redirect } from 'next/navigation';
// redirect는 반드시 try, catch 밖에다
if (shoudlRedirect) redirect('/home');
클라이언트 컴포넌트에서 useRouter()로 사용하는 리다이렉트도 모두 다 try catch 밖에 사용하면 건가요?
강의내용에서 전자는 강사님이 언급해주셨는데
후자의 경우 강사님도 try문 안에 사용하셔서 질문드립니다!
그리고 try catch 외부로 redirect를 사용해도 에러는 계속 발생합니다ㅠ
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
139
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2






