react-query-auth + gin-jwtでユーザ認証

Transcript

1. react-query-auth + gin-jwtで ユーザ認証 t-morisawa / taumu
2. アジェンダ ✦ ユーザ認証デモ ✦ 全体図 ✦ react-query-authについて
3. ユーザ認証のデモ ✦ ログイン ✦ ログアウト ✦ ログインチェック （セッション切れの 場合ログアウト）
4. ユーザ認証のデモ ✦ ログイン ✦ ログアウト ✦ ログインチェック （セッション切れの 場合ログアウト）
5. 全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログイン / サインアップ id/pass jwt ローカルスト レージに保存 JWTの署名・エンコード を行ってくれるので、 自前実装は不要👍
6. 全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログアウト ローカルストレージの JWT削除 ログアウトのインターフェースは 提供されているが、実装は自分で用意 する必要あり。 ex. Cookieの削除、JWTのブラックリ スト化
7. 全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログインチェック response=falseの場合、ローカルストレー ジのJWTを削除してログアウト ログインチェックは 随時実行してくれる 自前での呼び出し不要👍 JWT User/false +85ͷվ᜵νΣοΫ΍
   ظݶνΣοΫΛ࣮ߦ
8. 全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログインフロントエンド用の インターフェース 自動ログインチェック機能 ログインバックエンド用の インターフェース JWTの作成・チェック
9. react-query-authʹ͍ͭͯ ✦ https://zenn.dev/taumu/articles/9a979429fde590
10. ·ͱΊ ✦ react-query-auth + gin-jwtでユーザ認証 ✦ JWTやユーザ認証に関する知識が乏しくても、ライブラリのレールに 沿って実装すれば、認証機構が実装できる ✦ react-query-authはログインチェックAPIのキャッシュ・refetchをい い感じにやってくれる