[Next] React Facebook Login 구현과 CSS 커스텀

Facebook Login을 구현하기 위해 먼저 appId를 발급받아야 한다. 

 

https://developers.facebook.com/?locale=ko_KR

Meta for Developers

 

위 url에서 발급받을 수 있으며, 발급받는 과정은 생략하겠다. 

 

npm install react-facebook-login

타입스크립트일 경우 @types/react-facebook-login    

명령어를 통해 라이브러리를 설치해준다. 

 

나같은 경우 peer dependencies 에러가 발생했는데 그럴 경우 뒤에 

--legacy-peer-deps 를 붙여주면 해결할 수 있다.

 

이후

 

import를 해준다.

 

디자인 커스텀이 필요할 경우 

import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'

 

위처럼 /dist/facebook-login-render-props를 연결해주어야 한다.

 

import 한 뒤에는

 

   <FacebookLogin
      appId={`${process.env.NEXT_PUBLIC_FACEBOOK_APP_ID}`}
      fields="name,email,picture"
      callback={handleSuccessFacebookLogin}
      render={(renderProps) => (
        <SocialLoginButtons onClick={renderProps.onClick}>
          <Icon src="/images/icons/facebook_icon" extension="png" size={['22px', '22px']} />
          {t('social.facebook')}
        </SocialLoginButtons>
      )}
    />

위와 같이 컴포넌트 형태로 사용할 수 있다. 

 

 

appId에는 발급받은 appID를 넣어주면 된다. (민감한 정보이기에 .env파일에 넣어서 사용하는 것을 권장한다.)

fields는 받아올 정보이다. 

callback에 로그인 시 호출할 함수를 넣어주면 된다. 해당 함수는 response를 파라미터로 받고, 파라미터에 토큰과 유저 정보가 들어있다.

나는 응답에 있는 토큰을 API에 보내 유효성을 체크했다. 

render에는 커스텀 할 컴포넌트를 넣어주면 된다. renderProps를 파라미터로 받으며, renderProps.onClick을 커스텀한 컴포넌트의 onClick 값으로 연결해주면 된다. 

 

완성.

 

 

 

 

 

 

 

--------------8월 18일 추가 

 

 

위에서 사용한 라이브러리의 의존성 문제가 발생하여 배포가 되지 않는 이슈가 있었다. 

 

https://github.com/greatSumini/react-facebook-login

GitHub - greatSumini/react-facebook-login: Well-Typed React Component for Facebook Login

해당 문제를  해결하기 위해 라이브러리를 바꿔서 적용해주었다! 

 

사용법은 거의 동일하다.