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
Vue3+Firebase Auth環境で苦労した話
Search
IIHARA
January 30, 2024
Programming
0
180
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
74
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
170
Nuxt3にStorybookを正しく入れてみた
gityosan
0
750
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
550
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
410
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
91
Other Decks in Programming
See All in Programming
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
19
11k
旅行プランAIエージェント開発の裏側
ippo012
2
890
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
0
110
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
Rancher と Terraform
fufuhu
2
240
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
290
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
210
Cache Me If You Can
ryunen344
2
650
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Into the Great Unknown - MozCon
thekraken
40
2k
Producing Creativity
orderedlist
PRO
347
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
For a Future-Friendly Web
brad_frost
180
9.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
KATA
mclloyd
32
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Being A Developer After 40
akosma
90
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Transcript
Vue3+Firebase Auth 環境で苦労した話 第3 木曜LT 会 #1 飯原帆隆/ 株式会社メタップスホールディングス
目次 01 自己紹介 02 前提状況 03 最終的な実装 第3 木曜LT 会
#1 2
飯原帆隆 メタップスホールディングス( 株) エンジニア 23 新卒で入社後、re:shine 開発を担当 Vue/Nuxt Rails Lit
を主に書きます X: https://twitter.com/iihara_gityo Github: https://github.com/Gityosan Qiita: https://qiita.com/Gityosan Zenn: https://zenn.dev/iihara 第3 木曜LT 会 #1 / 自己紹介 3
メタップスホールディングス 「UNLEASH THE WORLD( 世界を解き放つ) 」をビジョンに re:shine とSRE:shine の二つのサービスを展開 第3
木曜LT 会 #1 / 自己紹介 4
None
None
re:shine ではフロントでVue3 とFirebaseAuth を利用 リロード時などに上手くハンドリングできない事象が発生 第3 木曜LT 会 #1 /
前提状況 7
main.ts でvue-router のbeforeEach フックにmiddleware(routing-guard) を 登録しリロード時や遷移時に適切なルーティングができるようにしてい た。 firebase のonAuthStateChanged はfirebase
と接続ができた時やログイ ン・ログアウト時に登録したcallback を実行するがmiddleware と非同期的 に実行されていたため、callback の実行タイミングによってログインして いるのに未ログイン状態と判定されることがあった。 第3 木曜LT 会 #1 / 前提状況 8
第3 木曜LT 会 #1 / 前提状況 9
→ middleware(routing-guard) の処理をonAuthStateChanged の callback 内に移動 (provide/inject を用いた状態管理を行っている場合、middleware で状態管理 している変数を上手く呼び出せないため、そこからしてもcallback
内に移 動する必要がある) 第3 木曜LT 会 #1 / 最終的な実装 10
ご清聴ありがとうございました