https://guiyomi.tistory.com/123

Firebase auth

firebase auth에서는 회원가입 및 로그인, 로그아웃, 사용자 정보 수정 등을 위한 다양한 인증 관련 메소드를 제공한다.

메소드를 사용하기 위해서는 firebase/auth에서 필요한 메소드를 import하여 사용.

일반적으로 Firebase auth를 사용하는 경우는, 이메일 인증 없이 이메일을 이용한 회원가입, 로그인 등의 구현을 위해 사용한다.

현재 접속한 사용자 인증 정보 가져오기

firebase/auth => getAuth 메소드로 가져올 수 있음.

인증 메소드를 호출하기 위해서는 getAuth로 가져온 Auth 객체를 반드시 인자로 넘겨줘야한다.

impoer {getAuth} from 'firebase/auth';
const auth = getAuth()
console.log('auth : ', auth)

현재 접속한 사용자의 프로필 정보 가져오기

getAuth 메소드로 얻어온 auth 객체의 currentUser 속성에 접근하면 프로필을 정보를 가져올 수 있음.

impoer {getAuth} from 'firebase/auth';

const auth = getAuth()
const user = auth.currentUser;

console.log(user.photoURL) // 프로필 사진 URL
console.log(user.phoneNumber) // 휴대폰 번호
console.log(user.metadata) // 사용자 메타데이터(createAt, creationTime, lastLoginAt, lastSignInTime)
console.log(user.email) // 유저 Email
console.log(user.displayName) // 유저 표시 이름
console.log(user.emailVerified) // 유저 이메일 인증 여브 (boolean)
console.log(user.isAnonymous) // 익명 여부 (boolean)

=> 로그인 제공 업체로부터 프로필 정보를 가져올 수도 있음.

impoer {getAuth} from 'firebase/auth';

const auth = getAuth()
const user = auth.currentUser;
const providerData = user.providerData;

providerData.forEach(profile => {
	console.log(user.profile.providerId) // 유저 ID
	console.log(user.profile.uid) // 유저 고유의 UID
	console.log(user.displayName) // 유저 표시 이름
    console.log(user.email) // 유저 이메일
	console.log(user.photoURL) // 프로필 사진 URL
} )

회원가입

별도의 이메일 인증 없이 이메일, 비밀번호 값만 사용하여 회원가입을 처리하는 경우

createUserWithEmailAndPassword 메소드를 사용한다.

• 사용법
  auth객체와 email, password를 createUserWithEmailAndPassword의 인자로 넘겨주면 끝.

createUserWithEmailAndPassword를 포함한 대부분의 메소드들은 비동기로 동작한다. 때문에 순차적 실행을 위해서는 async/await 키워드를 사용할 것.

firebase auth에서 비밀번호가 6자리 미만인 경우에는 등록되지 않게 자체적으로 유효성검사가 들어가있다.

impoer {getAuth, createUserWithEmailAndPassword} from 'firebase/auth';

const join = async(email, password) => {
	try {
    	const auth = getAuth();
      	const {user} = await createUserWithEmailAndPassword( auth, email, password );
      	const {sTsTokenManager, uid} = user; // sTsTokenManager이 뭔지 알아보기..
      	setAuthInfo( {uid, email, authToken : sTsTokenManager} );
      bavigate('/'); // 회원가입 성공시, 메인 화면으로
    }
  catch ( {code, message} ) {
	const error = New Error()
    console.log(error);
}