Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-query-auth + gin-jwtでユーザ認証
Search
τ μ [taumu]
March 19, 2022
Programming
0
770
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
CI改善もDatadogとともに
taumu
0
250
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
taumu
2
1.4k
Other Decks in Programming
See All in Programming
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
130
KANNA Android の技術的課題と取り組み
watabee
0
170
Thank you <💅>, What's the Next?
ahoxa
1
590
Jakarta EE Meets AI
ivargrimstad
0
750
RuboCop: Modularity and AST Insights
koic
2
2.3k
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
150
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.7k
ComposeでのPicture in Picture
takathemax
0
130
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.1k
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
3
530
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Scaling GitHub
holman
459
140k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Writing Fast Ruby
sferik
628
61k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.4k
Producing Creativity
orderedlist
PRO
344
40k
Transcript
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をい
い感じにやってくれる