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
800
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
CI改善もDatadogとともに
taumu
0
290
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
taumu
2
1.4k
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
Reactの歴史を振り返る
tutinoko
1
150
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
210
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
CDK引数設計道場100本ノック
badmintoncryer
2
590
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
610
69k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Adaptive Systems
keathley
43
2.7k
Facilitating Awesome Meetings
lara
54
6.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Raft: Consensus for Rubyists
vanstee
140
7k
Producing Creativity
orderedlist
PRO
346
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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をい
い感じにやってくれる