[TypeScript] 리액트 파이어베이스 소셜 로그인 트위터 추가하기

Today, What I learned?

파이어베이스로 소셜로그인 기능을 추가하던 중 구글과 깃허브는 쉽게 되었지만, 애플은 애플 개발자에 등록이 되어있어야 하고..

카카오는 카카오 인증 후 파이어베이스로 보내서 파이어베이스의 토큰을 받아올 수 있도록 해야 하고.. (시간이 좀 더 여유로울 때 도전해보고 싶음)

트위터를 추가해 보자! 싶어서 트위터를 추가하는 과정을 기록해 본다.

 

 

파이어베이스 인증 부분에 트위터 추가

먼저 파이어베이스 로그인 제공업체에서 트위터를 사용설정으로 추가해 주기.

 

 

아래 파이어베이스 공식 문서에 따라 하나하나 해가면 되는데, 일단 사용할 웹(혹은 앱)을 트위터 개발자 애플리케이션에 등록해주어야 한다.

 

https://firebase.google.com/docs/auth/web/twitter-login?hl=ko

JavaScript에서 Twitter를 사용하여 인증  |  Firebase

 

아마 트위터 로그인해서 다시 저기를 들어가면 처음에 개발자 등록도 해줘야 할 것이다.. 좀 복잡함 😇

이 부분은 캡처를 못함 ㅠㅠ

 

 

그리고 개발자 등록 후에 어떤 용도로 사용할 것인지에 대한 것도 영어로 구구절절 적어서 등록하여 API키를 받아야 한다...

대충 적을 수 없다. 200자 이상 써야하기 때문..! 

 

참고했던 아래 글에서 사진과 함께 설명을 볼 수 있다~ 

https://limitt.tistory.com/145

트위터 twitter API 개발자 계정 신청 및 apps 등록 후기 : 바로 승인 성공

 

 

앱을 등록했을 때 나오는 API키가 이렇게 나온다. 이 키와 비밀번호를 파이어베이스 부분에 넣어준다.

 

 

 

파이어베이스의 Callback URL을 트위터에 등록

이제 콜백 URL을 등록해주어야 하는데!.. 이걸 어디서 하느냐! 

 

생성한 앱 설정에 들어가서 내려보면 User authentication Settings라는 부분이 있다.

처음에는 아래와 같이 셋업을 하세요 상태다. 

 

Set up 버튼을 눌러서 들어가면 요런 화면이 나온다.

 

내려보면 App info 라는 부분이 있는데, 여기에 파이어베이스의 콜백 URL과 배포된 웹 주소를 넣어주면 된다.

 

 

코드 적용

그럼 이제 설정은 끝났고!.. 구글이나 깃허브 provider 추가해 주었듯이 TwitterAuthProvider를 import 하여 사용하면 된다.

const signInWithSocial = (social: string) => {
    let provider: any;

    if (social === 'github') {
      provider = new GithubAuthProvider();
    } else if (social === 'twitter') {
      provider = new TwitterAuthProvider();
    } else {
      provider = new GoogleAuthProvider();
    }
    ...

 

트위터로 처음 로그인 하는 것이 아니다 보니 바로 로그인이 된다 ㅎ 

아무튼 잘 되는 것을 볼 수 있다!