로그인 페이지 폼을 자동생성하지 않고 직접 디자인 하려면

[SEO]

CredentialsProvider({ //1. 로그인페이지 폼 자동생성해주는 코드  
name: "credentials", credentials: { email: { label: "email", type: "text" }, 
password: { label: "password", type: "password" }, },

자돟생성하지 말고 loginPage/page.js 에서 로그인 페이지를 직접 디자인하고 싶으면 어떻게 하면 되나요?
아니면 따로 스타일을 주는 방법이 있나요?

[codingapple]

https://mycodings.fly.dev/blog/2023-06-07-how-to-nextjs-nextauth-custom-login-page
이런거 따라합시다

[SEO]

따라해봤는데 잘 됩니다.

하지만 로그인 실패 시 404페이지로 이동하는데 이걸 막고
무언가 이벤트를 추가하고 싶으면      
const result = await signIn("credentials", {
      email: emailRef.current,
      password: passwordRef.current,
      redirect: true,
      callbackUrl: "/",
    });
  }

if (!user) {
          console.log('해당 이메일은 없음');
          return null
        }
        const pwcheck = await bcrypt.compare(credentials.password, user.password);
        if (!pwcheck) {
          console.log('비번틀림');
          return null
        }
        return user

여기서 로그인 실패시 '로그인 실패'라고 로그인 페이지에 나올 수 있도록
코드를 변경하려면 어떻게 해야 할까요 fetch는 catch로 잡으면 되는데 폼을 통한
요청에는 또 어떤 식으로 오류가 나거나 실패했을 경우 확인이 가능할까요?

[codingapple]

const result 변수 출력해보면 성공실패 알수있을거같은데 
실패하면 페이지 이동시키거나 UI같은거 띄워달라고 코드짭시다

[SEO]

auth의 콜백 함수도 건드려보고 에러 페이지도 바꿔보고
이메일 비번 검사 시 에러도 던져보고 해봤는데 아무것도 안 되고 여전히 404페이지로 넘어가서
그냥 redirect: true, 부분을 false로 바꾸고 에러가 나면 ui실행, 에러가 나지 않으면
페이지 리로드로 겉모습은 똑같은 로그인을 완성했습니다.

redirect: true,를 유지하면서 문제를 해결하고 싶었는데 실패했습니다.
결과만 같으면 상관없겠다고 생각하지만 뭔가 찜찜합니다.

[codingapple]

pages 폴더안쓰고 app폴더안에 nextauth설정파일 만들면 그럴수도 있다는군요
NEXTAUTH_URL 환경변수 잘있나도 확인해봅시다

[SEO]

말씀하신 것 중에 NEXTAUTH_URL 환경변수 설정이 없어서 env파일에 추가하고
테스트를 해봤는데 여전히 로그인 실패 시 404페이지로 이동합니다.

로그인 페이지 만들 때 저는 팝업 형식의 컴포넌트 안에서 signin 변수를 사용했는데 
혹시 page.js 안에서 만들지 않아서 이런 식의 404페이지 이동이 생기는 걸까요?

  pages: {
    signIn: "/signin",
    error: '/auth/error'
  }, 
nextauth 설정 파일엔 이렇게 해놓고 signin 폴더 안에 page가 아닌 컴포넌트로 사용했습니다.
함수 자체는 잘 동작하는데 문제가 있을까요?

[codingapple]

깃헙에 app 폴더에 로그인기능 만들면 그렇다는 소리가 있습니다

[글쓴이]

글