Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

topic/delete cookie and use getIdToken #568

Merged
merged 20 commits into from
Jan 30, 2025

Conversation

TsurutaYoshiki
Copy link
Collaborator

PR の目的

  • アクセストークンをcookieに保存して使用するのではなく、auth.currentuser?.getIdToken(true) を使ったaccessToken の取得に切り替えました

経緯・意図・意思決定

  • cookieの削除
    • アクセストークンをcookieに保存していましたが、削除しました
    • 該当ファイル
      • web/src/pages/App/AppPage.jsx
      • web/src/pages/Login/LoginPage.jsx
      • web/src/services/tcApi.js
        • コメントにあったcookieの説明を削除しました
  • 認証状態の永続性を「session」タイプになるように設定しました
  • auth.currentUser?.getIdToken(true)への変更
  • cookieに保存されているアクセストークンではなく、auth.currentUser?.getIdToken(true)から取得したアクセストークンを使用するように変更しました
  • 該当ファイル
    • auth.currentUser?.getIdToken(true)

@TsurutaYoshiki TsurutaYoshiki marked this pull request as ready for review January 21, 2025 05:25
Copy link
Collaborator

@mshim03 mshim03 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index.js の CookiesProvider を削除できそうです

import { CookiesProvider } from "react-cookie";

またそれを実行すると、 package.json の react-cookie 自体を削除できそうに見えます。問題なさそうなら削除をお願いいたします

@TsurutaYoshiki
Copy link
Collaborator Author

@mshim03
以下のcookieに関するコードを削除しました

  • web/package.json、web/package-lock.json
    • npm uninstall react-cookie を行いからcookieに関するライブラリーを削除しました
  • web/src/index.jsx
    • index.jsx の CookiesProvider を削除しました
  • web/src/pages/App/AppPage.jsx
    • エラーメッセージでcookieの文言を使用していましたが、削除しました
  • web/src/pages/Login/LoginPage.jsx
    • cookiesOptionsを使用している箇所がないため削除しました

@TsurutaYoshiki
Copy link
Collaborator Author

@mshim03
以下の3点を修正しました

  • tcApi.jsの preparedHeaders の中で、auth.currentUser?.getIdToken(true) を使用するように変更
    • 今までreduxのstoreに保存されていたアクセストークンを参照していましたが、auth.currentUser?.getIdToken(true)から参照するようにしました
  • store.authの削除
    • storeに保存されているアクセストークンを使用しなくなったので、web/src/slices/auth.jsを削除しました
    • web/src/pages/App/AppPage.jsxにあるuseEffectについても削除しました
  • useSkipUntilAuthTokenIsReadyの削除
    • store.authを削除するのに伴い、useSkipUntilAuthTokenIsReadyについても削除しました

@@ -6,7 +6,7 @@ import {
browserSessionPersistence,
} from "firebase/auth";

import { setAuthToken } from "../slices/auth";
// import { setAuthToken } from "../slices/auth";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コメントアウト行は削除してください

search: location.search,
message: "Please login to continue.",
},
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tryLogin()して、エラーならloginページにnavigate、
の処理は消してはいけないと思います。

@TsurutaYoshiki
Copy link
Collaborator Author

2点修正しました

  • firebaseApi.jsのコメントアウトの削除
  • web/src/pages/App/AppPage.jsxで削除していたtryLoginを元に戻しました。

@@ -49,7 +35,7 @@ export function App() {
}
};
_checkToken();
}, [cookies, dispatch, location, navigate, skip, tryLogin]);
}, [location, navigate, tryLogin]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_checkToken()を定義する必要が無くなった気がします。下記のように書けますでしょうか。

useEffect(async () => {
try {

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

上記のコードのようにしたところ以下の警告が出ました
Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

_checkToken()を定義したままにします。

mshim03
mshim03 previously approved these changes Jan 24, 2025
Copy link
Collaborator

@mshim03 mshim03 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@TsurutaYoshiki
Copy link
Collaborator Author

TsurutaYoshiki commented Jan 28, 2025

@mshim03

  • tcApi.jsのprepareHeadersでtokenの取得方法を変えたことによるエラーについて対処しました
  • エラーの内容
    • `auth.currentUser?.getIdToken(true)を使用してtokenを取ってくるように変更したところ、awaitで待っているにも関わらず、tokenがセットされる前にRTKQの処理が始まってしまいました。権限がない状態でAPI通信をしていたため、エラーが出力されていました。
  • 対策
    • Skipの処理を復元しました。(hooks/auth.js)
    • auth.currentUserがない時はskip処理が実行されて、RTKQ処理が始まらないようにしています。

@TsurutaYoshiki TsurutaYoshiki marked this pull request as draft January 28, 2025 08:35
@TsurutaYoshiki
Copy link
Collaborator Author

@mshim03

  • ブラウザ更新するとログアウトする問題について対処しました。
  • tryLoginを使用するのをやめて、onAuthStateChangedを使用して、セッションがあるか判別するように変更しました
  • useSkipUntilAuthUserIsReady()でauth.cuurentUserを使用してskip条件を作成していましたが、onAuthStateChangedで検知した状態をReduxのstateに持つ方式に変更しました。それに伴いhoook/auth.js/useSkipUntilAuthUserIsReady()自体を廃止し、直接コンポーネントのskip条件に入れるように修正しました。

@TsurutaYoshiki TsurutaYoshiki marked this pull request as ready for review January 29, 2025 08:39
Copy link
Collaborator

@mshim03 mshim03 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

全体的に良いと思います
useEffect の依存配列の修正漏れと、フックについて確認お願いします

@@ -16,7 +16,8 @@ export function PTeamLabel(props) {

const [pteamSettingsModalOpen, setPTeamSettingsModalOpen] = useState(false);

const skip = useSkipUntilAuthTokenIsReady();
const skip = !useSelector((state) => state.auth.authUserIsReady);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!useSelector((state) => state.auth.authUserIsReady); がコードの中に散らばってますが、元も useSkipUntilAuthTokenisReady のように独自フックにロジックを押し込めた方がいいかもしれません

_checkToken();
}, [cookies, dispatch, location, navigate, skip, tryLogin]);
});
}, [location, dispatch, navigate, tryLogin]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tryLogin はもう不要ではないでしょうか

@TsurutaYoshiki
Copy link
Collaborator Author

@mshim03
以下3点を修正しました

  • AppPage.jsxのuseEffectにあったtryLoginを削除しました
  • 各コードに散らばっていた!useSelector((state) => state.auth.authUserIsReady); をhooks/auth/useSkipUntilAuthUserisReadyに集約しました
  • AppBar.jsxのLogOutとLoginPage.jsxのuseEffectにsignOutの処理を追加しました

Copy link
Collaborator

@mshim03 mshim03 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mshim03 mshim03 merged commit 6094b07 into main Jan 30, 2025
5 checks passed
@mshim03 mshim03 deleted the topic/delete-cookie-and-use-getIdToken branch January 30, 2025 06:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants