Skip to content

Instantly share code, notes, and snippets.

@yuiseki
Last active October 25, 2020 09:05
Show Gist options
  • Save yuiseki/cb1775c8105cdd09412e40642de5066d to your computer and use it in GitHub Desktop.
Save yuiseki/cb1775c8105cdd09412e40642de5066d to your computer and use it in GitHub Desktop.
useTwitterAndFirebaseAuth in expo react native
import React, { useCallback, useEffect, useState } from 'react';
import { useTwitter } from 'react-native-simple-twitter';
const useTwitterAndFirebaseAuth = () => {
# 認証済みかどうかを確認している最中か否か
const [signInChecking, setSignInChecking] = useState<boolean>(true);
# 認証済みか否か
const [signedIn, setSignedIn] = useState<boolean>(false);
# twitter user data
const [twitterUser, setTwitterUser] = useState<firebase.firestore.DocumentData>();
# firestoreで使うTwitterでログインしたユーザーの情報を保存するコレクション名
cosnt twitterUserCollectionName = 'TwitterUser';
# react-native-simple-twitter
const { twitter, TWModal } = useTwitter({
onSuccess:(user, accessToken) => {
onTwitterLoginSuccess(user, accessToken)
}
});
const setCurrentTwitterUser = async () => {
try{
const user = firebase.auth().currentUser;
if(user){
# ログイン済みユーザーの、Twitter上での情報を取得する
const doc = await firebase.firestore().collection(twitterUserCollectionName).doc(user.uid).get();
if(doc){
setTwitterUser(doc.data());
setSignInChecking(false);
setSignedIn(true);
}
}else{
setSignInChecking(false);
setSignedIn(false);
}
}catch(e){
console.log(e);
}
}
# hook initialize
useEffect(() => {
# 重要!!
let isMounted = true;
twitter.setConsumerKey(config.twitter.apiKey, config.twitter.apiSecret);
const unsubscribe = firebase.auth().onAuthStateChanged(() => {
# 重要!!
# isMounted === trueのときにしかsetStateするべきではない
if(isMounted){
setCurrentTwitterUser();
}
});
# 重要!!
# cleanup関数をreturnする
return () => {
isMounted = false;
unsubscribe();
};
}, [])
# twitter login modal dialogを開く関数
const toTwitterLogin = useCallback(async () => {
try {
setSignInChecking(true);
setSignedIn(false);
await twitter.login();
} catch(e) {
setSignInChecking(false);
setSignedIn(false);
console.log(e.errors);
}
}, []);
# twitterへのログイン成功時に呼ばれるコールバック関数
const onTwitterLoginSuccess = useCallback(async (user, accessToken) => {
setSignInChecking(true);
setSignedIn(false);
// firebaseで認証する
var credential = firebase.auth.TwitterAuthProvider.credential(accessToken.oauth_token, accessToken.oauth_token_secret);
await firebase.auth().signInWithCredential(credential);
// firestoreにユーザー情報をつっこむ
const userData = Object.assign(user, accessToken);
if(firebase.auth().currentUser){
const uid = firebase.auth().currentUser?.uid;
await firebase.firestore().collection(twitterUserCollectionName).doc(uid).set(userData, { merge: true })
setSignInChecking(false);
setSignedIn(true);
}
}, []);
# ログアウトする関数
const toTwitterLogout = useCallback(async () => {
await firebase.auth().signOut();
}, []);
return {signInChecking, setSignInChecking, signedIn, setSignedIn, TWModal, toTwitterLogin, toTwitterLogout, twitterUser};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment