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
73
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
170
Nuxt3にStorybookを正しく入れてみた
gityosan
0
730
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
520
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
400
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
89
Other Decks in Programming
See All in Programming
Reactの歴史を振り返る
tutinoko
1
140
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.6k
AI Ramen Fight
yusukebe
0
120
QA x AIエコシステム段階構築作戦
osu
0
210
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
Jakarta EE Meets AI
ivargrimstad
0
380
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.7k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
220
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Embracing the Ebb and Flow
colly
86
4.8k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Designing Experiences People Love
moore
142
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Six Lessons from altMBA
skipperchong
28
3.9k
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
ご清聴ありがとうございました