Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Programming
0
34
react-query-auth + gin-jwtでユーザ認証
τ μ [taumu]
March 19, 2022
Tweet
Share
More Decks by τ μ [taumu]
See All by τ μ [taumu]
総合トップグロースに向けた負債返済のお話
taumu
0
750
Gatsby + React + Redux によるゼロリスク・ハイリターンな個人開発
taumu
2
1.2k
Other Decks in Programming
See All in Programming
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
240
Jetpack Composeでの画面遷移
iwata_n
0
180
Reactは何を提供するLibraryなのか?
taro28
3
420
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.3k
git on intellij
hiroto_kitamura
0
170
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
250
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
360
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
120
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
190
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Agile that works and the tools we love
rasmusluckow
319
19k
Infographics Made Easy
chrislema
233
17k
Gamification - CAS2011
davidbonilla
75
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Embracing the Ebb and Flow
colly
73
3.4k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Clear Off the Table
cherdarchuk
79
280k
Side Projects
sachag
450
37k
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をい
い感じにやってくれる