Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

563172ec6315e116ca0e10dc71d30f42?s=128

τ μ [taumu]

March 19, 2022
Tweet

More Decks by τ μ [taumu]

Other Decks in Programming

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をい

    い感じにやってくれる