inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

next-auth로 로그인하기

로그인 클릭시, Failed to construct URL: Invalid base URL 에러로 인해서 리다이렉트가 되지 않습니다

해결된 질문

2443

kraf

작성한 질문수 14

5

‘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('아이디와 비밀번호가 일치하지 않습니다');
    }
  };

react next.js react-query next-auth msw

답변 4

1

제로초(조현영)

https://github.com/nextauthjs/next-auth/issues/9279

이 이슈인 것 같은데 이게 해결되야할 것 같습니다.

beta3 버전 설치하시거나 beta5 나오면 그걸로 올려보세요.

0

kraf

오 그렇네요... next auth 이슈를 직접 찾아보는 방법이 있었군요! 감사합니다

1

제로초(조현영)

console.log(authResponse)도 제대로 뜨나요?

0

kraf

console.log(authResponse) 의 결과는 위와 같습니다.

 

console.log(await authResponse.json()) 의 결과도 아래와 같이 MSW로 지정한 데이터가 잘 나옵니다.

 

근데도 계속 로그인 버튼만 누르면 아래와 같은 에러가 발생하네요,,ㅠ

 

 

 

1

제로초(조현영)

LoginModal.tsx 27줄 코드가 뭔가요?

0

kraf

아, 27번째 줄은 console.error(e) 출려부분이더라구요. 혹시 몰라서 해당 컴포넌트 로직 부분을 캡처해서 올리겠습니다!

0

강윤지

안녕하세요. 혹시 beta3버전으로 다운시켜서 해결하셨을까요?

0

kraf

안녕하세요! 네 강사님 말씀대로 beta3으로 낮춰서 해결했습니다 혹시 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

kraf

안녕하세요!

서버 컴포넌트에서 사용하는 redirect뿐만 아니라

import { redirect } from 'next/navigation';

  // redirect는 반드시 try, catch 밖에다
  if (shoudlRedirect) redirect('/home');

 

클라이언트 컴포넌트에서 useRouter()로 사용하는 리다이렉트도 모두 다 try catch 밖에 사용하면 건가요?

 

강의내용에서 전자는 강사님이 언급해주셨는데

후자의 경우 강사님도 try문 안에 사용하셔서 질문드립니다!

그리고 try catch 외부로 redirect를 사용해도 에러는 계속 발생합니다ㅠ

1

제로초(조현영)

아, 이건 서버 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

138

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