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
490
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
総合トップグロースに向けた負債返済のお話
taumu
0
1k
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
taumu
2
1.3k
Other Decks in Programming
See All in Programming
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3.1k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
150
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
270
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
290
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
430
PostmanでAPIの動作確認が楽になった話
h455h1
0
110
プールにゆこう
irof
2
120
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
410
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
The Invisible Customer
myddelton
114
12k
Making Projects Easy
brettharned
107
5.5k
4 Signs Your Business is Dying
shpigford
175
21k
Building an army of robots
kneath
300
41k
Six Lessons from altMBA
skipperchong
19
3k
For a Future-Friendly Web
brad_frost
171
8.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
We Have a Design System, Now What?
morganepeng
42
6.7k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
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をい
い感じにやってくれる