ISSUEではFirebaseのGithub認証を採用しています。
これまで認証時に `signInWithPopup` を使っていましたが、運用していく上でいくつか問題があったので `signInWithRedirect` に変更しました。


# 問題1: iOSで `Unable to process request due to missing initial state. ` エラーが発生する

PCではログインできるのにiOSのsafariでGithubログインしようとするとエラーが発生します。
これは、iOSの「サイト越えトラッキングを防ぐ」機能が影響しています。

デフォルトでオンになってるので、スマホユーザーのほとんどがこのエラーに遭遇してしまいます。
ISSUEはwebなのでそこまで影響はありませんが、Twitter経由の流入もありますので困ります。


# 問題2: MacのChromeでもポップアップが途中で閉じてしまう時がある

iOSだけのバグかと思いきや、デバイスやブラウザに関わる起きてしまうエラーのようです。
例えば、chromeだとポップアップを制御できるようになっているので、ポップアップを禁止する設定がされてしまうと機能しなくなります。

# 開発元の対応

今なお(最新だと一昨日)、issue上で議論されていますが、
1年以上解決されないので、おそらくこの問題が解決される可能性は低いです。

![image](https://user-images.githubusercontent.com/19757050/161210429-fee20107-d01c-4ca5-a4c9-b2365ae39b82.png)


# 解決策
ポップアップは、いろんなところで制御されることが多くその度に解決策を逐一講じていくのは現実的ではないので、
`signInWithRedirect`を利用するのがおすすめです。

# 実装方法

ポイントは `signInWithRedirect` は返り値が `Promise<void>` なので、`getRedirectResult()` を使って、
認証情報を得ることです。

変更前
![img](/mosaic-code.jpg)

変更後
![img](/mosaic-code.jpg)

# 参考
[Unable to process request due to missing initial state.](https://github.com/firebase/firebase-js-sdk/issues/4256)
[Firebase Authenticationで"Unable to process request..."エラーに悩まされている話](https://zenn.dev/chorkaichan/articles/09373b26ee2a4c)
[【Firebase】ソーシャルログインでポップアップウィンドウはおすすめできない](https://uga-box.hatenablog.com/entry/2020/02/18/000000)

ISSUEではFirebaseのGithub認証を採用しています。
これまで認証時に `signInWithPopup` を使っていましたが、運用していく上でいくつか問題があったので `signInWithRedirect` に変更しました。


# 問題1: iOSで `Unable to process request due to missing initial state. ` エラーが発生する

PCではログインできるのにiOSのsafariでGithubログインしようとするとエラーが発生します。
これは、iOSの「サイト越えトラッキングを防ぐ」機能が影響しています。

デフォルトでオンになってるので、スマホユーザーのほとんどがこのエラーに遭遇してしまいます。
ISSUEはwebなのでそこまで影響はありませんが、Twitter経由の流入もありますので困ります。


# 問題2: MacのChromeでもポップアップが途中で閉じてしまう時がある

iOSだけのバグかと思いきや、デバイスやブラウザに関わる起きてしまうエラーのようです。
例えば、chromeだとポップアップを制御できるようになっているので、ポップアップを禁止する設定がされてしまうと機能しなくなります。

# 開発元の対応

今なお(最新だと一昨日)、issue上で議論されていますが、
1年以上解決されないので、おそらくこの問題が解決される可能性は低いです。

![image](https://user-images.githubusercontent.com/19757050/161210429-fee20107-d01c-4ca5-a4c9-b2365ae39b82.png)


# 解決策
ポップアップは、いろんなところで制御されることが多くその度に解決策を逐一講じていくのは現実的ではないので、
`signInWithRedirect`を利用するのがおすすめです。

# 実装方法

ポイントは `signInWithRedirect` は返り値が `Promise<void>` なので、`getRedirectResult()` を使って、
認証情報を得ることです。

変更前
```js
  const signIn = async (): Promise<void> => {
    const firebaseAuthUser = await auth.signInWithPopup(provider)
    const email = firebaseAuthUser.user!.email!
    const uid = firebaseAuthUser.user!.uid
    const user = await userRepository.find(uid)
    // ユーザーが未登録ならユーザーを登録する処理など ...
  }
```

変更後
```js
  const [signinAction, setSigninAction] = useState(false)

  useEffect(() => {
    const createUser = async () => {
      const firebaseAuthUser = await auth.getRedirectResult()
      if (!firebaseAuthUser?.user) return

      const email = firebaseAuthUser.user!.email!
      const uid = firebaseAuthUser.user!.uid
      const user = await userRepository.find(uid)
      // ユーザーが未登録ならユーザーを登録する処理など ...
    }
    createUser()
  }, [signinAction])

  const signIn = async (): Promise<void> => {
    await firebase.auth().signInWithRedirect(provider)
    setSigninAction(true)
  }
```

# 参考
[Unable to process request due to missing initial state.](https://github.com/firebase/firebase-js-sdk/issues/4256)
[Firebase Authenticationで"Unable to process request..."エラーに悩まされている話](https://zenn.dev/chorkaichan/articles/09373b26ee2a4c)
[【Firebase】ソーシャルログインでポップアップウィンドウはおすすめできない](https://uga-box.hatenablog.com/entry/2020/02/18/000000)

問題1: iOSで `Unable to process request due to missing initial state.` エラーが発

続きを読むには単価診断を受けてください 30秒

問題1: iOSで Unable to process request due to missing initial state. エラーが発

続きを読むには単価診断を受けてください 30秒

問題1: iOSで `Unable to process request due to missing initial state.` エラーが発