nextauth + firebase authentication

미친짓을 많이 하는 편이긴 한데 -_-;; 굳이 nextauth를 사용하면서 firebase authentication에 붙여봤어 무쓸모인가? ㅋㅋ 아 몰라 ㅋㅋ 뭔가 잘 정리되어 있고 nextjs에 최적화 되어 있는 nextauth를 사용하면서 일반 DB사용하면서 개고생하는게 아니라 firebase authentication 같은 기능으로 관리받고 싶었어! ㅋ

 

내용을 먼저 간단하게 설명하자면

1. firebase 프로젝트 새로 만들기, gcp 사용자 인증정보 새로 만들기(client id랑 client secret 받아야 구글 로그인 가능)

2. next.js에 nextauth설치 후 google login example 작성해서 테스트 해본 다음에

3. firebase 설치 후 init 했고

4. [...nextauth].ts에 signin callback이용해서 firebase authentication signin 했어.

위에서 나머지 내용들은 구글링 조금만 하면 다 나오니까 1-3번은 생략하고 4번만 보자.

 

[...nextauth].ts 파일에 아래 코드처럼 callback option을 추가해 줘.

callbacks: {
	...
    async signIn({ user, account, profile, email, credentials }) {
      try {
        const googleCredential = GoogleAuthProvider.credential(
          account?.id_token
        );
        const userCredential = await signInWithCredential(
          fbAuth,
          googleCredential
        ).catch((e) => {
          console.log(e);
          return false;
        });
        console.log("logged in:", userCredential);
        return userCredential ? true : false;
      } catch (e) {
        console.log(e);
        return false;
      }
    },
    ...

 

간단하게 설명하자면 로그인 버튼 컴포넌트에서 signIn() 수행하면 callback 등록된 signIn 함수가 실행돼. 이 때 account 변수를 통해서 로그인 정보가 넘어오는데 거기에 id_token이 포함되어 있어. 여기에서 google credential을 뽑고 그걸로 firebase sign in을 수행하는 거지. 계정이 없으면 firebase authentication에 뿅하고 생성되고 있으면 그냥 로그인되어서 firebase auth 정보를 읽어올 수 있는거지. 그럼 이 auth 정보 가지구 firebase store같은데에 접글할 수 있을거야.

firebase authentication에 nextauth login 정보가 뿅!

Firebase authentication 계정 사용 중지하고 테스트도 해봤어. 

계정 사용 중지로 테스트

Firebase auth 로그인 실패하면 signin callback에서 false 리턴하게 했어 이렇게 하면 아래 캡쳐처럼 nextauth가 자동으로 access denied 에러 페이지를 보여 준다구 ㅋㅋ

nextauth - access denied 에러 페이지

google만 해봤는데 다른 것들도 비슷하지 않을까 생각해. kakao는 firebase에서 지원하지 않으니깐 email로 토근 생성하고 signInWithCustomToken()으로 firebase auth에 로그인해야 하겠지? 다음에는 그것도 해봐야겠네. ㅎㅎ

이거.. 음... 아무래도 .... github에 만들어놔야 할 것 같은데 -_-;;; 아닌데... GCP랑 이런거 설정도 좀 부드럽게 넘어가지 않는 부분들이 있어서...

 

암튼 다들 힘내 ㅋ

 

아래는 차근 차근 따라하기 버젼이야 ㅎ

2022.06.02 - [Next.js] - nextauth + firebase authentication #1

nextauth + firebase authentication #1

2022.06.03 - [Next.js] - nextauth + firebase authentication #2

nextauth + firebase authentication #2