인프런 커뮤니티 질문&답변

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