NextAuth 로그인 실패시 에러 처리하기

개요

Next.js에서 NextAuth를 이용해 로그인/회원가입 기능을 구현할 때,
존재하지 않는 아이디 이거나 비밀번호가 일치하지 않을 시 등의 상황에서 적절한 검증이 필요하다.

처음엔 이런 오류를 처리하려면 어떻게 해야 할지 고민이 많았는데, 해결 방법을 찾다가 redirect 옵션을 발견 했다.
그래서 redirect가 어떤 역할을 하는지에 대해 포스팅 하려고 한다. 

---

redirect

redirect는 우선 credentials및 email providers에서만 제공되는 옵션이다.

NextAuth의 signIn() 함수에는 여러가지 옵션이 있는데 그 중에서 redirect라는 옵션이 있다.

redirect은 boolean값인 true값과 false값을 가질 수 있는데 만약 사용하지 않는다면 true값과 동일한 기능을 한다.

 

✅ redirect: true → 로그인 성공 시 자동으로 특정 페이지로 이동

✅ redirect: false → 로그인 후 이동하지 않고, 응답 객체(res)를 반환

---

1. redirect : true

redirect가 true 또는 설정되어 있지 않을 때는 페이지가 자동으로 이동되게 되어있다.

signIn() 함수에는 callbackUrl이라는 옵션이 존재하는데 이 옵션의 미설정시의 기본값은 "/"으로 redirect가 true일시 callbackUrl의 값으로 이동하게 된다.

signIn("credentials", 
  { 
      email: "test@example.com",
      password: "password123",
    , redirect : true // 생략 가능
    , callbackUrl: "/" // 생략 가능
  }
);

---

❓ 로그인시 다른 경로로 이동하려면 어떻게 해야할까?

 

만약에 로그인을 완료하고 "/" 경로가 아닌 다른 경로로 이동해야 한다면 어떻게 해야할까?

callbackUrl 부분만 이동하고 싶은 경로로 바꿔주기만 하면 되는 걸까? 그것은 아니다.

이를 해결하기 위해선 [...nextAuth].ts 파일을 확인해야 한다.

 

 

[...nextAuth].ts

callbacks: {
    async redirect({ url, baseUrl }) {
      return baseUrl
    },
...
}

 

 

해당 파일을 설정 했다면 위의 값으로 되어있을 것이다.

 

✅ url → 사용자가 로그인 후 이동하려는 목적지

✅ baseUrl → 현재 사이트의 기본 URL

 

그래서 우리는 baseUrl과 url을 같이 설정 해줘야 한다.

callbacks: {
  async redirect({ url, baseUrl }) {
    // Allows relative callback URLs
    if (url.startsWith("/")) return `${baseUrl}${url}`
    // Allows callback URLs on the same origin
    else if (new URL(url).origin === baseUrl) return url
    return baseUrl
  }
}

 

공식문서에 나와있는 내용으로 url("/example")이 존재한다면 baseUrl(http://example.com)과 url(/example)을 붙여서 반환하고, url("/example")의 .orign(http://example.com)이 baseUrl(http://example.com)과 일치 한다면 url을 반환 한다.

위 2개의 조건을 만족하지 않는다면 baseUrl을 반환한다.

2가지의 경우를 나눠서 처리하는 이유는 보안을 위해서이다.

---

❓ 만약에 로그인에 실패했을 시에는 어떻게 될까?

그냥 작성된 코드가 잘 실행되지만 로그인이 되지않고, Nextauth에서 제공되는 error페이지로 자동으로 이동하게 된다.

이것을 제어하기 위해 redirect:false 값을 사용해서 로그인 실패시 우리하 원하는 처리를 할 수 있도록 해야한다.

 

---

2. redirect : false

redirect : false를 설정하면 로그인 후 이동하지 않고, 응답 객체(res)를 반환 해서 res를 통해 error 상태를 체크 할 수 있다.

res.error가 있다면 페이지가 자동으로 이동되지 않고, 아래 코드와 같이 사용자에게 정보를 제공하고 다시 로그인을 시도할 수 있도록 한다.(페이지 이동x) 로그인에 성공한다면 설정된 callbackUrl로 이동하고, 로그인이 완료 된다.

const res = await signIn("credentials", {
        email: "test@example.com",
      	password: "password123",,
        redirect: false,
      });

      if (res?.error) {
        alert(
          "아이디 또는 비밀번호가 잘못 되었습니다.\n아이디와 비밀번호를 정확히 입력해 주세요."
        );
        return;
      }

 

마무리

어떤 라이브러리의 기능을 찾는게 참 어렵다.

여러 방법을 시도해 보고 찾은 기능이지만 다른 사람들은 쉽게 이 기능을 구현 했으면 좋겠다.

나의 블로그를 찾아서,,