import { initializeApp } from 'firebase/app';
import { firebaseConfig } from '../env';

export const initFirebase = () => {
	return initializeApp(firebaseConfig);
};

위와 같이 사용하면 됨. 결과는 key 값들 가져옴.

app.js에서 가져오는게 좋겠고

인증하기

Firebase -> Authentification

1. 시작하기

이메일 비밀번호, 사용하고 저장해주면 됨

2. 사용하는 방법

firebase 문서에서 signInWithEmailAndPassword 를 찾아 아래와 같이 사용한다.

auth.js

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

export const signIn = async ({ email, password }) => {
	const { user } = await signInWithEmailAndPassword(
		getAuth(),
		email,
		password,
	);
	return user;
};

저러면 user 정보로 잘 가져오는 것을 확인할 수 있다.

LogBox 무시

LogBox.ignoreLogs(['AsyncStorage has been extracted from react-native core']);

위와 같이 사용하면 LogBox를 무시할 수 있다. 당연히 남용은 금물

로그인 실패 시 Alert

export const getAuthErrorMessage = errorCode => {
	switch (errorCode) {
		case AuthErrorCodes.USER_DELETED:
			return '계정을 찾을 수 없습니다.';
		case AuthErrorCodes.INVALID_EMAIL:
			return '유효하지 않은 이메일 주소입니다.';
		case AuthErrorCodes.INVALID_PASSWORD:
			return '잘못된 비밀번호입니다.';
		default:
			return '로그인에 실패하였습니다.';
	}
};

위와 같이 AuthErrorCodes 에서 Validate 넘겨서 Alert Message 만들어주면 됨.

try {
	const user = await signIn(form);
	console.log(user);
} catch (error) {
	const message = getAuthErrorMessage(error.code);
	Alert.alert('로그인 실패', message);
}

회원가입 기능 만들기

createUserWithEmailAndPassword 를 사용하면 됨.

export const signUp = async ({ email, password }) => {
	const { user } = await createUserWithEmailAndPassword(
		getAuth(),
		email,
		password,
	);
	return user;
};

그 외엔 로그인과 동일하게 처리해주면 됨.

상태변수 수정에 대하여

예를들어 아래와 같은 코드가 있다고 가정하자.

dispatch({ type: AuthFormTypes.TOGGLE_LOADING });
try {
	const user = await signUp(form);
	setUser(user);
} catch (error) {
	const message = getAuthErrorMessage(error.code);
	Alert.alert('회원가입 실패', message);
}
dispatch({ type: AuthFormTypes.TOGGLE_LOADING });

그러면 setUser가 정상적으로 진행되었을 때 Stack 자체가 하나는 unmount 하나는 mount 되면서

그 이후에 dispatch 함수는 실행이 되지 않는다. (상태변수는 수정이 되지 않는다.)

그래서 실패한 경우에만 dispatch를 넣어주면 된다.

dispatch({ type: AuthFormTypes.TOGGLE_LOADING });
try {
	const user = await signUp(form);
	setUser(user);
} catch (error) {
	const message = getAuthErrorMessage(error.code);
	Alert.alert('회원가입 실패', message, [
		{
			text: '확인',
			onPress: () => dispatch({ type: AuthFormTypes.TOGGLE_LOADING }),
		},
	]);
}

로그인 유지하기

firebase에서 로그인 유지하는 기능이 있음.

onAuthStateChanged()를 사용할 것! 그리구 expo48 버전부터는 AsyncStorage랑 같이 써야한다고 함.

export const onAuthStateChanged = callback => {
	return onAuthStateChangedFirebase(getAuth(), callback);
};

일단 위와 같이 함수 만들어서

• 참고로 onAuthStateChangedFirebase 는 onAuthStateChanged as onAuthStateChangedFirebase, 위와 같이 가져왔음. (이름 같게 만들고 싶어서)

const unsubscribe = onAuthStateChanged(user => {
	if (user) {
		setUser(user);
	}
	setIsReady(true);
	unsubscribe();
});

위와 같이 사용해주면, 해당 사용자가 변경되었는지를 감지하여준다.

그 후에 setIsReady (SplashScreen 제거) 해줌으로써 로직 마무리