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
750
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
CI改善もDatadogとともに
taumu
0
230
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
taumu
2
1.4k
Other Decks in Programming
See All in Programming
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.2k
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
300
Going Structural with Named Tuples
bishabosha
0
200
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
趣味全開のAITuber開発
kokushin
0
190
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
620
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
820
Agentic Applications with Symfony
el_stoffel
2
270
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.7k
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
100
AI Agents with JavaScript
slobodan
0
210
Do Dumb Things
mitsuhiko
0
410
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
Visualization
eitanlees
146
16k
Done Done
chrislema
183
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
520
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
It's Worth the Effort
3n
184
28k
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をい
い感じにやってくれる