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
790
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
CI改善もDatadogとともに
taumu
0
280
総合トップグロースに向けた負債返済のお話
taumu
0
1.1k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
taumu
2
1.4k
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
ふつうの技術スタックでアート作品を作ってみる
akira888
0
200
WindowInsetsだってテストしたい
ryunen344
1
200
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
ニーリーにおけるプロダクトエンジニア
nealle
0
630
CursorはMCPを使った方が良いぞ
taigakono
1
190
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
エンジニア向け採用ピッチ資料
inusan
0
170
Deep Dive into ~/.claude/projects
hiragram
10
1.9k
技術同人誌をMCP Serverにしてみた
74th
1
440
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building an army of robots
kneath
306
45k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Agile that works and the tools we love
rasmusluckow
329
21k
Embracing the Ebb and Flow
colly
86
4.7k
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A Tale of Four Properties
chriscoyier
160
23k
Gamification - CAS2011
davidbonilla
81
5.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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をい
い感じにやってくれる