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

아 중간에 0은 오타입니다!

http://localhost:3000/i/flow/login에서

-> http://localhost:9090/i/flow/login?error=CredentialsSignin&code=no_user 이렇게 나옵니다.

 로그인 성공 시에는 http://localhost:9090 페이지로 갑니다

NEXT_PUBLIC_BASE_URL=http://localhost:9090

import ...
export const {
  handlers,
  auth,
  signIn,
} = NextAuth({
  pages: {
    signIn: '/i/flow/login',
    newUser: '/i/flow/signup',
  },
   callbacks: {
    async signIn({ user, account }) {
     // Allow OAuth without email verification
     if (account?.provider !== "credentials") return true;

     if (!user || !user.id) return false;
 
     //
     return true;
   },
  },
  providers: [
    Credentials({
      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,
          }),
        })

        console.log(authResponse.status, authResponse.statusText)
        if (!authResponse.ok) {
          const credentialsSignin = new CredentialsSignin();
          if (authResponse.status === 404) {
            credentialsSignin.code = 'no_user';
          } else if (authResponse.status === 401) {
            credentialsSignin.code = 'wrong_password';
          }
          throw credentialsSignin;
        }
  
        const user = await authResponse.json();
        console.log('user', user);

        return {
          id: user.id,
          name: user.nickname,
          image: user.image,
        }
      },
    }),
  ]
});

혹시 NEXT_AUTH_BASE_URL을 바꿔보시겠어요?

.env.local 파일에 http:localhost:9090 -> 3000으로 바꾸는 건가요?

NEXT_PUBLIC_API_MOCKING=enabled
NEXT_PUBLIC_BASE_URL=http://localhost:9090
API_MOCKING=hello
AUTH_URL=http://localhost:9090

네 맞습니다

제로초님 NEXT_PUBLIC_BASE_URL=http://localhost:3000으로 바꿔도 백엔드 요청 보낼 때는 nextjs가 http://localhost:9090 으로 보내주는 건가요?

아니면 백엔드 요청 보내는 곳에 url이 현재 ${NEXT_PUBLIC_BASE_URL}/.../... 이렇게 되어 있는데 http://localhost:9090으로 수정해야 할까요?

백엔드 요청 보내는 곳은 따로 9090으로 수정하셔야 합니다. 그런데 base_url 수정하니 /api/auth/error 부분 해결되신건가요?

url 수정 했는데 계속 9090으로 가서

기존 LoginModal.tsx에 callbackUrl을 추가했더니 에러시나 로그인 성공할 때 둘 다 http://localhost:3000으로 갔습니다!

const response = await signIn("credentials", {
   username: id,
   password,
   redirect: true,
   callbackUrl: '/home'
});

제로초님 그런데 이 callbackUrl은 'use server' 에서는 사용할 수 없는 건가요?

클라이언트 컴포넌트에서는 callbackUrl 옵션이 있었는데,

_lib/signUp.ts에서 redirect 부분을 callbackUrl로 수정하면 NEXT_REDIRECT 에러가 났습니다!

https://authjs.dev/reference/nextjs#parameters-17

지금 제가 할 때와 또 버전이 달라져서 동작이 달라진 것 같은데요.

redirect: false가 원래 현재 페이지에서 쿼리스트링으로 에러를 받는 옵션입니다.

callbackUrl은 없어지고 redirectTo가 생겼고요. redirectTo는 기본값이 현재 페이지 주소라서 적어줄 필요가 없긴 합니다.

redirect 부분을 callbackUrl로 수정했다는 건 무슨 말씀이신가요? redirect는 true, false만 됩니다.

현재 소스코드 기준 ch3-1, ch3-2 폴더에서 로그인/회원가입 했을 때 잘 되는 것 확인했습니다. npm update로 전부 최신버전으로 올려도 잘 됩니다.

.env는 다음과 같이 했고요.

NEXT_PUBLIC_BASE_URL=http://localhost:9090

LoginModal.tsx

'use client'
const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault();
    try {
      const response = await signIn("credentials", {
        username: id,
        password,
        redirect: true,
        callbackUrl: '/home'
      });
      
    } catch (err) {
     console.log(err);
    }
  };

_lib/signUp.ts

 try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, {
     ..
    });
    
    console.log(response.status);
    ..
    shouldRedirect = true;

    await signIn("credentials", {
      username: formData.get('id'),
      password: formData.get('password'),
      redirect: false
    });

  } catch (err) {
    ..
  }

  if (shouldRedirect) {
    redirect('/home'); // try/catch문 안에서 X
  }

LoginModal.tsx에 한 것처럼 _lib/signup.ts 에도

callbackUrl 옵션을 추가해서 /home으로 리다이렉트 되게 하고 싶었는데

NEXT_REDIRECT 에러가 발생했습니다.

'use server';
 
try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, {
      method: 'post',
      body: formData,
      credentials: 'include',
    });
    
    ...
    await signIn("credentials", {
      username: formData.get('id'),
      password: formData.get('password'),
      redirect: true,
      callbackUrl: '/home'
    });

  } catch (err) {
    console.error(err);
    return { message: null };
  }

Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:49:19)
   ...
 {
  digest: 'NEXT_REDIRECT;replace;http://localhost:3000/home;303;',
  mutableCookies: p {
    _parsed: Map(4) {
      'authjs.csrf-token' => [Object],
      'connect.sid' => [Object],
      'authjs.callback-url' => [Object],
      'authjs.session-token' => [Object]
    },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

callbackUrl이 redirectTo로 변경되었군요..

깃허브에 올려주신 기존 코드대로 해보겠습니다ㅠ 감사합니다!