[React Native] react-native-fbsdk-next 사용시 LoginButton 관련 문제

지난 글에서 페이스북 로그인을 위한 react-native-fbsdk-next의 설정과 관련된 포스팅을 했습니다.

[React Native] Facebook 연동 Login 적용하기 in 안드로이드

 

시키는대로 완벽하게 셋팅을 마친 이후에도 여러가지 문제를 겪어서 글로 남겨봅니다.

기본적인 예제 코드에서는 LoginButton 버튼을 아래와 같이 활용하고 있습니다.

<LoginButton
    onLoginFinished={
      (error, result) => {
        if (error) {
          console.log("login has error: " + result.error);
        } else if (result.isCancelled) {
          console.log("login is cancelled.");
        } else {
          AccessToken.getCurrentAccessToken().then(
            (data) => {
              console.log(data.accessToken.toString())
            }
         )
       }
     }
  }
  onLogoutFinished={() => console.log("logout.")}
/>

제가 겪었던 문제는 다음과 같습니다.

 

첫 번째로는 개발 중 한번이라도 reload하게 되면, 그 다음부터는 로그인을 성공적으로 마친 이후에도 onLoginFinished가 실행되지 않는 문제 - 이 문제는 react-native-fbsdk때 부터 있었던것으로 보이는데, 해결책을 찾기 어려웠습니다. https://github.com/facebookarchive/react-native-fbsdk/issues/687

onLoginFinished never is fired · Issue #687 · facebookarchive/react-native-fbsdk

 

두 번째는 로그인 성공 후 accessToken은 정상적으로 받아올 수 있지만, 프로필 정보가 null로 반환되는 문제였습니다.

await Profile.getCurrentProfile();

await를 해 줘도 해당 함수의 반환값이 null이었습니다.

 

 

그래서 해결책은 뭐냐?

사실 매우 간단합니다. 바로 LoginButton을 사용하지 않고, LoginManager를 사용하는 것 입니다.

import { LoginManager } from 'react-native-fbsdk-next';

LoginManager.logInWithPermissions(["public_profile"]).then(
      async (result) => {
        if (result.isCancelled) {
          Alert.alert('로그인 취소', 'login cancelled');
        } else {
          const accessToken = await getAccressToken();
          const profile = await Profile.getCurrentProfile();
          console.log(accessToken);
          console.log(profile);
        }
      },
      (error) => {
        Alert.alert('로그인 실패', error);
      }
    );

위와 같이 작성하니 모든 문제가 해결되었습니다. 코드를 뜯어보지 않아서 + RN 숙련도가 낮아서 이유는 파악하지 못했지만, 급하신 분들은 이렇게 해결할 수 있다고 알아가시면 좋겠습니다.