2022.06.02 - [Next.js] - nextauth + firebase authentication #1
nextauth + firebase authentication #1
nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝
engschool.tistory.com
이전 글에 이어서 계속할게. nextjs에다가 nextauth로 google 로그인 하는 것까지 했어. GCP 설정도 했고. 이제 firebase authentication 활성화하고 연결해 붙이는 것까지 해보자구.
이전까지 구글 로그인은 됐는데 해당 로그인 정보가 남아있지 않았지. 그러니까 회원가입같은 개념 말이야. 그런 회원 정보를 저장하기 위해 DB를 사용하기도 하고 AWS나 GCP, Azure와 같은 글로벌 클라우드의 authentication 기능을 활용하기도 해. 회원 정보 DB를 직접관리하는 건 구축이나 관리가 어렵기도 하고 보안상 문제가 발생할 수도 있으니까 글로벌 기업 기술력 믿고 가는거지. 그런데 nextauth에는 DB 연결을 위한 각종 DB Adaptor만 지원하고 클라우드의 authentication은 지원하지 않지... 애당초 할 필요가 없나? ㅋㅋ 암튼 이걸 하고 있는 거야~ GCP firebase authentication을 사용할거구.
먼저 할 걸 간단히 설명해보자면 firebase authentication 활성화하고 firebase initialization 코드 작성해줄거야. 그리고 나서 [...nextauth].ts 에 signin callback 추가해 주면 끝이야. 자 해보자구.
firebase에 authentication 탭에 들어가서 그냥 냅다 시작하기 버튼 눌러. 그리고 구글 버튼 눌러!
그리고 사용 설정 활성화 해주고 저장 누르면 설정이 완료야! 쉽지!
쏘이지!
authentication 설정은 끝났고 다음으로는 nextjs앱에서 firebase initialization을 해줄거야. firebase initialization하려면 config 정보가 있어야 하는데 Firebase project 설정으로 들어가서 가장 하단에 프로젝트에 앱을 추가하면 쉽게 볼 수 있어.
웹 앱 버튼 누르고
앱 닉네임 입력하고 앱 등록 버튼 누르면
내 웹에 넣을 firebaseConfig를 확인할 수 있지.
그럼 firebase 초기화 해주자. 먼저 firebase 모듈 설치해주고
yarn add firebase루트 폴더에 javascripts라는 폴더 하나를 만들고 거기에 firebaseConfig.js라는 파일을 생성한 다음 초기화 코드 복붙! 그리고 약간만 변경해주자고 아래 코드 처럼.
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import {getAuth} from "firebase/auth";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "자기꺼 입력해 제발~",
authDomain: "자기꺼 입력하자 제발~",
projectId: "nextauth-fb-authentication",
storageBucket: "nextauth-fb-authentication.appspot.com",
messagingSenderId: "637775452025",
appId: "아무도 안알려줄거임~"
};
// Initialize Firebase
export const fbApp = initializeApp(firebaseConfig);
export const fbAuth = getAuth(fbApp);이제 [...nextauth].ts에 signIn() callback을 추가해 주자.
...
import { fbAuth } from "../../../javascripts/firebaseConfig";
import { GoogleAuthProvider, signInWithCredential } from "firebase/auth";
...
export default NextAuth({
...
callbacks: {
async signIn({ user, account, profile, email, credentials }) {
try {
//account 변수에서 id_token을 가지고 google auth credential 생성
const googleCredential = GoogleAuthProvider.credential(
account?.id_token
);
//생성된 credential로 signInWithCredential 실행
const userCredential = await signInWithCredential(
fbAuth,
googleCredential
).catch((e) => {
console.log(e);
return false;// 로그인 중 에러 발생 -> false 반환
});
return userCredential ? true : false;//로그인 성공여부 반환
} catch (e) {
console.log(e);
return false;
}
},
},
...
})각 설명은 코드에 있으니까 참고하는데 요약하자면 nextauth의 signIn()를 수행하면 login 정보를 변수로 넘겨주면서 [...nextauth].ts에 등록된 signin callback이 실행되는데 로그인에 성공하면 true를 실패하면 false를 반환하면 돼. 넘어온 변수 중에 account 변수에 google auth 정보가 들어 있는데 그 중 id_token으로 credential을 만들고 그 credential로 firebase에 로그인 하는 거지. 이 때 실패하면 false 성공하면 true 반환하면 끝. 쏘이지? 노이지? 더 이뿐 방법은 몰라. 알면 좀 알려주고 ㅎㅎ
자 이제 테스트 해보자. 서버 리스타트하고 화면도 리프레시 하고 다시 로그인 시도!
로그인 성공하면 아래 성공화면이 뜰거야. (안되고 auth 에러 같은거 뜨면 서버 껐다 켜, 리프레시 잘 시키고)
Firebase authentication에도 잘 추가되었는지 확인 고고.
난 잘 추가되어 있네. 이렇게 하면 별도의 회원용 DB를 구축하고 관리할 필요없이 firebase의 도움을 받아 사용할 수 있다규~ 음.. 난 이거 좋은 거 같음 ㅋㅋㅋ 내가 next.js에 로그인 로직도 nextauth가 해주고! 회원 정보 관리도 구글이 해주고! ㅋㅋ 을마나 좋아!
마지막으로 로그인 실패도 한번 해보자구. 먼저 authentication에 등록되어 있는 계정을 사용 중지 상태로 만들고 다시 로그인 시도 고고!
아래와 같이 access denied 화면을 볼 수 있으면 잘 동작하는 거겠지? ㅎㅎ
계정을 사용 상태로 되돌리면 다시 로그인이 잘되는 것도 확인할 수 있어. 이리 저리 테스트 해보자구 ㅋㅋ
자 완료!
firebase에서 지원안하는 kakao나 line 이런 애들만 좀 신경써주면 될 것 같구만 ㅎㅎ 다음에는 kakao 해봐야겠다 히히
'Next.js > nextauth' 카테고리의 다른 글
| next-auth cognito login (0) | 2022.06.23 |
|---|---|
| next.js + AWS amplify auth login (0) | 2022.06.21 |
| nextauth + firebase authentication #1 (1) | 2022.06.02 |
| nextauth + firebase authentication (0) | 2022.06.02 |
| Nextjs에 nextauth.js로 로그인 구현하기 (5) | 2022.05.31 |