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
160
Vue3+Firebase Auth環境で苦労した話
IIHARA
January 30, 2024
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Docusで知り合い向け学習サイト作ってみた
gityosan
0
71
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
160
Nuxt3にStorybookを正しく入れてみた
gityosan
0
710
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
460
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
380
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
81
Other Decks in Programming
See All in Programming
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
110
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.2k
Duke on CRaC with Jakarta EE
ivargrimstad
1
540
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
510
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
450
SpringBootにおけるオブザーバビリティのなにか
irof
1
830
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.7k
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
150
ビカム・ア・コパイロット
ymd65536
1
190
Cloudflare Workersで進めるリモートMCP活用
syumai
13
1.8k
抽象データ型について学んだ
ryounasso
0
190
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fireside Chat
paigeccino
37
3.5k
Done Done
chrislema
184
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
The Invisible Side of Design
smashingmag
299
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
14
870
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
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
ご清聴ありがとうございました