react-query-auth + gin-jwtで ユーザ認証 t-morisawa / taumu

アジェンダ ✦ ユーザ認証デモ ✦ 全体図 ✦ react-query-authについて

ユーザ認証のデモ ✦ ログイン ✦ ログアウト ✦ ログインチェック （セッション切れの 場合ログアウト）

ユーザ認証のデモ ✦ ログイン ✦ ログアウト ✦ ログインチェック （セッション切れの 場合ログアウト）

全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログイン / サインアップ id/pass jwt ローカルスト レージに保存 JWTの署名・エンコード を行ってくれるので、 自前実装は不要👍

全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログアウト ローカルストレージの JWT削除 ログアウトのインターフェースは 提供されているが、実装は自分で用意 する必要あり。 ex. Cookieの削除、JWTのブラックリ スト化

全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログインチェック response=falseの場合、ローカルストレー ジのJWTを削除してログアウト ログインチェックは 随時実行してくれる 自前での呼び出し不要👍 JWT User/false +85ͷվ᜵νΣοΫ΍ ظݶνΣοΫΛ࣮ߦ

全体図 フロントエンド バックエンド react + react-query + react-query-auth go + gin + gin-jwt ログインフロントエンド用の インターフェース 自動ログインチェック機能 ログインバックエンド用の インターフェース JWTの作成・チェック

react-query-authʹ͍ͭͯ ✦ https://zenn.dev/taumu/articles/9a979429fde590

·ͱΊ ✦ react-query-auth + gin-jwtでユーザ認証 ✦ JWTやユーザ認証に関する知識が乏しくても、ライブラリのレールに 沿って実装すれば、認証機構が実装できる ✦ react-query-authはログインチェックAPIのキャッシュ・refetchをい い感じにやってくれる