FirebasePlugin.ts

import Phaser from 'phaser'
import { initializeApp } from 'firebase/app'
import {
	getFirestore,
	Firestore,
	setDoc,
	doc,
	getDoc,
	DocumentSnapshot,
	addDoc,
	collection,
	query,
	orderBy,
	limit,
	getDocs
} from 'firebase/firestore'

import {
	getAuth,
	createUserWithEmailAndPassword,
	Auth,
	signInWithEmailAndPassword,
	onAuthStateChanged,
	Unsubscribe,
	signInAnonymously
} from 'firebase/auth'

const firebaseConfig = {
	apiKey: "AIzaSyCNY1Z33txk0vWuWRjZ379KboKLzdo54x0",
	authDomain: "phaser3-firebase-example.firebaseapp.com",
	projectId: "phaser3-firebase-example",
	storageBucket: "phaser3-firebase-example.appspot.com",
	messagingSenderId: "385070757997",
	appId: "1:385070757997:web:b7700e4ce25e627d862764",
	measurementId: "G-D8EPY50453"
}

export default class FirebasePlugin extends Phaser.Plugins.BasePlugin
{
	private readonly db: Firestore
	private readonly auth: Auth

	private authStateChangedUnsubscribe: Unsubscribe
	private onLoggedInCallback?: () => void

	constructor(manager: Phaser.Plugins.PluginManager)
	{
		super(manager)

		const app = initializeApp(firebaseConfig)
		this.db = getFirestore(app)
		this.auth = getAuth(app)

		this.authStateChangedUnsubscribe = onAuthStateChanged(this.auth, (user) => {
			if (user && this.onLoggedInCallback)
			{
				this.onLoggedInCallback()
			}
		})
	}

	destroy()
	{
		this.authStateChangedUnsubscribe()

		super.destroy()
	}

	onLoggedIn(callback: () => void)
	{
		this.onLoggedInCallback = callback
	}

	async saveGameData(userId: string, data: { name: string, score: number })
	{
		await setDoc(doc(this.db, 'game-data', userId), data)
	}

	async loadGameData(userId: string)
	{
		const snap = await getDoc(
			doc(this.db, 'game-data', userId)
		) as DocumentSnapshot<{ name: string, score: number }>

		return snap.data()
	}

	async createUserWithEmail(email: string, password: string)
	{
		const credentials = await createUserWithEmailAndPassword(this.auth, email, password)
		return credentials.user
	}

	async signInUserWithEmail(email: string, password: string)
	{
		const credentials = await signInWithEmailAndPassword(this.auth, email, password)
		return credentials.user
	}

	async signInAnonymously()
	{
		const credentials = await signInAnonymously(this.auth)
		return credentials.user
	}

	getUser()
	{
		return this.auth.currentUser
	}

	async addHighScore(name: string, score: number)
	{
		await addDoc(collection(this.db, 'high-scores'), { name, score })
	}

	async getHighScores()
	{
		const q = query(
			collection(this.db, 'high-scores'),
			orderBy('score', 'desc'),
			limit(10)
		)

		const snap = await getDocs(q)
		return snap.docs.map(ref => ref.data())
	}
}

TitleScreen.ts

import Phaser from 'phaser'

export default class TitleScreen extends Phaser.Scene
{
	constructor()
	{
		super('titlescreen')
	}

	create()
	{
		if (this.firebase.getUser())
		{
			this.scene.start('game')
			return
		}

		this.firebase.onLoggedIn(() => {
			this.scene.start('game')
		})
	}
}

vite-env.d.ts

/// <reference types="vite/client" />

declare namespace Phaser
{
	interface Scene
	{
		firebase: import('./plugins/FirebasePlugin').default
	}
}