8. PWA 앱 myBlog 사용자 인증 - signInWithEmailAndPassword, signOut, onAuthStateChanged

myBlog의 사용자 인증에 사용되는 Firebase Authentication의 메서드들 입니다.

• 로그인 - signInWithEmailAndPassword
• 로그아웃 - signOut
• 자동 로그인 - onAuthStateChanged
• 비밀번호 재설정 - sendPasswordResetEmail

로그인 - signInWithEmailAndPassword

Firebase Authentication에서 제공하는 메서드 createUserWithEmailAndPassword로
사용자의 이메일과 비밀번호를 기반으로 새로운 계정을 생성하였습니다.
이렇게 생성된 계정에 대해 로그인은 signInWithEmailAndPassword를 사용합니다.

signInWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로,
사용자가 이메일과 비밀번호를 사용해 로그인할 수 있도록 합니다.
이 메서드는 Firebase 프로젝트에 저장된 인증 정보와 입력된 사용자 정보를 비교하여 인증을 처리합니다.
로그인 성공 시 UserCredential 객체를 반환하고
이것은 회원 가입할 때 사용한 createUserWithEmailAndPassword가 반환하는 것과 같은 객체입니다.

signInWithEmailAndPassword 설명

signInWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로,
이메일과 비밀번호를 사용하여 기존 사용자 계정으로 로그인하는 기능을 제공합니다.

 

메서드 정의

• signInWithEmailAndPassword(auth, email, password)

매개변수

• auth: Firebase Authentication 인스턴스 (getAuth()로 가져옴)
• email: 사용자의 이메일 주소
• password: 사용자의 비밀번호

반환값

• Promise<UserCredential>
  UserCredential.user 객체에는 로그인된 사용자 정보 (uid, email, displayName 등)가 포함됨

성공 시 동작

• 로그인에 성공하면 Firebase Authentication에서 사용자의 정보를 불러옴
• userCredential.user 객체를 통해 UID, 이메일, 인증 상태 등을 확인 가능
• Firebase 콘솔에서 Authentication → Users에서 로그인된 사용자를 확인 가능

실패 시 발생하는 오류

• auth/user-not-found : 해당 이메일로 등록된 사용자가 없음
• auth/wrong-password : 비밀번호가 틀림
• auth/invalid-email : 이메일 형식이 잘못됨
• auth/too-many-requests : 로그인 시도 횟수가 많아 계정이 일시적으로 차단됨

로그아웃 - signOut

logout은 signOut을 사용합니다.
signOut 메서드는 Firebase Authentication에서 사용자를 로그아웃하는 기능을 제공합니다.
이 메서드는 현재 로그인된 사용자의 인증 세션을 종료하고,
클라이언트 측에서 저장된 인증 토큰을 삭제합니다.
이를 통해 사용자가 안전하게 로그아웃할 수 있습니다.

signOut 설명

signOut은 Firebase Authentication에서 제공하는 메서드로,
현재 로그인한 사용자를 로그아웃시키는 기능을 합니다.
이 메서드를 호출하면 Firebase 인증 세션이 종료되며,
onAuthStateChanged를 사용하면 로그인 상태 변화를 감지할 수 있습니다.

 

메서드 정의

• signOut(auth)

매개변수

• auth: Firebase Authentication 인스턴스 (getAuth()로 가져옴)

반환값

• Promise<void>
  성공하면 void를 반환하고, 에러가 발생하면 catch에서 처리 가능

로그아웃 후 동작

• signOut을 호출하면 Firebase 인증 세션이 초기화됨
• onAuthStateChanged에서 로그아웃 상태를 감지할 수 있음
• Firestore 또는 Vuex 등의 상태 관리를 사용했다면, 로그아웃 후 데이터를 초기화해야 함

자동 로그인 - onAuthStateChanged

이메일과 비밀번호를 입력하여 로그인 하고,
로그아웃하지 않은 상태에서 앱을 종료하였다면
다음에 접속할 때는 자동으로 로그인하도록 합니다.
로그인 인증 상태에 따른 자동 로그인 기능 구현을 위하여 onAuthStateChanged를 사용합니다.

onAuthStateChanged는 Firebase Authentication에서 제공하는 메서드로,
사용자의 인증 상태 변화를 실시간으로 감지하는 역할을 합니다.
사용자가 로그인하거나 로그아웃할 때, 또는 앱이 처음 로드될 때 트리거됩니다.
앱이 열릴 때 onAuthStateChanged를 호출하여
로그인 여부를 store의 state 변수 user에 설정을 합니다.
로그인을 성공하였다면 store의 state 변수 user에는 UserCredential 객체를 저장합니다.

이 메서드는 애플리케이션의 인증 상태를 지속적으로 모니터링하는 데 유용합니다.

onAuthStateChanged 설명

onAuthStateChanged는 Firebase Authentication에서 제공하는 메서드로,
사용자의 로그인 상태 변화를 감지하는 기능을 합니다.
즉, 로그인 / 로그아웃 / 인증 상태 변화가 발생하면 자동으로 콜백 함수가 실행됩니다.

 

메서드 정의

• onAuthStateChanged(auth, callback)

매개변수

• auth: Firebase Authentication 인스턴스 (getAuth()로 가져옴)
• callback: 로그인 상태가 변경될 때 실행될 함수

비밀번호 재설정 - sendPasswordResetEmail

비밀번호를 잊었을 때는 비밀번호를 재설정합니다.
비밀번호를 잊었다면 로그인을 할 수 없으니 로그인 창에 비밀번호 재설정 기능을 구현하도록 합니다.

sendPasswordResetEmail 설명

sendPasswordResetEmail은 Firebase Authentication에서 제공하는 메서드로,
사용자가 비밀번호를 잊었을 때 비밀번호 재설정 이메일을 전송하는 기능을 제공합니다.

 

메서드 정의

• sendPasswordResetEmail(auth, email)

매개변수

• auth: Firebase Authentication 인스턴스 (getAuth()로 가져올 수 있음)
• email: 비밀번호 재설정 이메일을 받을 사용자의 이메일 주소

반환값

• Promise<void>: 성공적으로 이메일이 전송되면 Promise가 해결됨 (resolved)
  실패하면 오류 메시지를 반환하며, catch에서 에러를 처리할 수 있음

성공 시 동작

• 사용자가 입력한 이메일로 비밀번호 재설정 링크가 포함된 이메일이 전송됩니다.
• 사용자가 이메일의 링크를 클릭하면 Firebase의 기본 비밀번호 재설정 페이지가 열립니다.
• 사용자가 새 비밀번호를 입력하면 해당 계정의 비밀번호가 업데이트됩니다.

실패 시 발생할 수 있는 오류

sendPasswordResetEmail을 사용할 때 발생할 수 있는 에러 코드는 다음과 같습니다.

• auth/invalid-email : 이메일 형식이 잘못됨
• auth/user-not-found : 해당 이메일로 가입된 사용자가 없음
• auth/network-request-failed : 네트워크 연결 문제 발생

sendPasswordResetEmail은 비밀번호를 잊은 사용자를 위한 Firebase 기능입니다.