FirebaseのSNSでのサインアップ／サインインに使用するProviderを動的に変更したい。

Question

前提

FirebaseでSNSアカウントによるサインアップとサインイン機能を実装しています。
ReactとTypeScriptを使用しています。

auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())

上記のコードでGoogleアカウントによるサインアップとサインインは可能になります。

実現したいこと

サインアップとサインインに使えるSNSのアカウントごとにauth.signInWithPopup(...)を書かなければいけないため、押したSNSボタンに合わせて動的にProviderを切り替えたいです。

該当のソースコード

const SNS = ["Google", "Twitter", "Facebook"]
const SNSButton = SNS.map((item, index)=>(
  <div key={index}>
    <button onClick={signClick} name={item}>{item}</button>
  </div>
)

const signClick =()=> {
  if(sign === "Up") return signUp();
  // signはグローバルステートです。サインアップ、サインインを開くボタンを押す際に、setStateしています。
  signIn();
}

const signUp =()=> {
  auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
  ...
}

const signIn =()=> {
  auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
  ...
}

return(
  <>
    <h2>Sign {sign}</h2>
    <div>{SNSButton}</div>
  </>
)

試したこと

ProviderをStateで管理して、signClick関数内でボタンのname属性を取得し、取得したname属性に沿ってswitchでProviderをsetStateしました。

const googleProvider = new firebase.auth.GoogleAuthProvider();
const twitterProvider = new firebase.auth.TwitterAuthProvider();
const facebookProvider = new firebase.auth.FacebookAuthProvider();
const [provider, setProvider] = useState(googleProvider);

const signClick = (e: any)=> {
  const { name } = e.target;
  switch (name) {
    case "Google":
      setProvider(googleProvider);
      break;
    case "Twitter":
      setProvider(twitterProvider);
      break;
    case "Facebook":
      setProvider(facebookProvider);
      break;
    default:
      setProvider(googleProvider);
  }
  if(sign === "Up") return signUp();
  signIn();
}

const signUp =()=> {
  auth.signInWithPopup(provider)
  ...
}

const signIn =()=> {
  auth.signInWithPopup(provider)
  ...
}

上記コードは下記の問題点があります。

• switchのsetProvider(twitterProvider)にのみIDE（VSCode）が下記のエラーを表示します

型 'TwitterAuthProvider' の引数を型 'SetStateAction<GoogleAuthProvider>' のパラメーターに割り当てることはできません。

• signClick関数の引数eがany型

VSCodeがReact.MouseEvent<HTMLButtonElement, MouseEvent>を推論してくれますが、これを設定するとconst { name } = e.targetに下記のエラーが表示されます

プロパティ 'name' は型 'EventTarget' に存在しません。

• そもそもsetProviderできていないです

switchのTwitterケースだけコメントアウトし、signUp関数頭でconsole.log(provider)を記述し、Facebookボタンを押したところ、Facebookアカウントのポップアップではなく、Googleアカウントのポップアップが表示されました。
「name属性が取得できておらず、初期値またはswitchのデフォルトが適用されているのかな」と思い、switchの直前にconsole.log(name)を記述し、Facebookボタンを押したところ、コンソールにはFacebookと表示されました。

---

実装方法にこだわりはないので、switchを使用することやProviderをstateで管理するなど、試したことに書いた方法論に執着は無いです。
実現したいことが実現でき、かつシンプルに書けることが理想なので、よりよい方法があれば解決策と合わせあてご教示いただきたいです。

Answer 1

switchのsetProvider(twitterProvider)にのみIDE（VSCode）が下記のエラーを表示します

providerおよびsetProviderの型はuseStateの初期値として渡されたものから推論されます。

// providerの型はGoogleAuthProviderに推論される
const [provider, setProvider] = useState(googleProvider);

GoogleAuthProvider型のstateに対してTwitterAuthProvider型の変数をセットしようとしているのでエラーになっているわけです。useStateの呼び出しの際にジェネリクスに明示的に型を指定すれば解決するでしょう。providerはどれもAuthProviderというinterfaceを実装しているようなのでそれを指定します。

https://firebase.google.com/docs/reference/js/firebase.auth.AuthProvider

// providerの型はAuthProviderに推論される
const [provider, setProvider] = useState<AuthProvider>(googleProvider);

signClick関数の引数eがany型

targetではなくcurrentTargetを参照してください。イベントをバインドした要素(ここではbutton要素)そのものを指すのはcurrentTargetのほうです。nameはもちろん、他のプロパティも参照できるようになります。

そもそもsetProviderできていないです

useStateでproviderを保持するのをやめて、
signClickからsignUpやsignInのほうに引数でproviderを渡す形にするとどうでしょうか。

const signClick = (e: React.MouseEvent<HTMLButtonElement>)=> {
  const { name } = e.currentTarget;
  let provider: AuthProvider;
  switch (name) {
    case "Google":
      provider = googleProvider;
      break;
    case "Twitter":
      provider = twitterProvider;
      break;
    case "Facebook":
      provider = facebookProvider;
      break;
    default:
      provider = googleProvider;
  }
  if(sign === "Up") return signUp(provider);
  signIn(provider);
}

const signUp =(provider)=> {
  auth.signInWithPopup(provider)
  ...
}

const signIn =(provider)=> {
  auth.signInWithPopup(provider)
  ...
}

Comments

[whoiwhoi]

実装できました！＆試したことの問題点の解決策をご教示くださりありがとうございました。