password reset and magic link

.envrc

@@ -0,0 +1 @@
+dotenv

.gitignore

@@ -7,6 +7,9 @@ node_modules
 /dist
 .wrangler
 
+# npm
+package-lock.json
+
 # OS
 .DS_Store
 Thumbs.db

README.md

@@ -30,3 +30,11 @@ npm install -D @mierune/sveltekit-firebase-auth-ssr
 3. **Implement sign-in and sign-out functionality** in your application. (Example: TODO)
 4. Use the user information and implement database integration if needed.
 5. Ensure that the required environment variables are set in the execution environment.
+
+
+## Development
+
+```bash
+direnv allow
+pnpm dev-in-emulator
+```

package.json

@@ -14,7 +14,8 @@
 		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"start-firebase-emulator": "firebase emulators:start --project fukada-delete-me",
+		"start-emulator": "firebase emulators:start --project fukada-delete-me",
+		"dev-in-emulator": "firebase emulators:exec --project fukada-delete-me 'pnpm run dev'",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"test:integration": "playwright test",

src/api/auth.ts

@@ -2,18 +2,14 @@ import type { Context } from 'hono';
 import { getCookie } from 'hono/cookie';
 import { createMiddleware } from 'hono/factory';
 import { HTTPException } from 'hono/http-exception';
+import { env } from 'hono/adapter';
 import {
 	getAuth,
 	InMemoryStore,
 	ServiceAccountCredential,
 	WorkersKVStoreSingle
 } from '$lib/firebase-auth/server';
 
-import { PUBLIC_FIREBASE_PROJECT_ID } from '$env/static/public';
-import { env } from '$env/dynamic/private';
-
-const serviceAccountCredential = new ServiceAccountCredential(env.GOOGLE_SERVICE_ACCOUNT_KEY);
-
 export type CurrentUser = {
 	uid: string;
 	name: string;
@@ -25,21 +21,47 @@ export interface AuthVariables {
 
 const memKeyStore = new InMemoryStore();
 
-export const authMiddleware = createMiddleware(async (c, next) => {
+export const authMiddleware = createMiddleware<{
+	Bindings: Env & {
+		PUBLIC_FIREBASE_PROJECT_ID: string;
+		GOOGLE_SERVICE_ACCOUNT_KEY: string;
+		PUBLIC_FIREBASE_AUTH_EMULATOR_HOST: string;
+	};
+	Variables: AuthVariables;
+}>(async (c, next) => {
+	// 環境変数
+	const {
+		PUBLIC_FIREBASE_PROJECT_ID,
+		GOOGLE_SERVICE_ACCOUNT_KEY,
+		PUBLIC_FIREBASE_AUTH_EMULATOR_HOST
+	} = env(c);
+
+	let serviceAccountCredential: ServiceAccountCredential | undefined;
+	try {
+		serviceAccountCredential = new ServiceAccountCredential(GOOGLE_SERVICE_ACCOUNT_KEY);
+	} catch {
+		if (!PUBLIC_FIREBASE_AUTH_EMULATOR_HOST) {
+			console.error('FIREBASE_SERVICE_ACCOUNT_KEY is not set. Authentication will not work.');
+		}
+	}
+
 	const sessionCookie = getCookie(c, 'session');
 	if (sessionCookie) {
 		const kv = c.env?.KV;
 		const keyStore = kv ? WorkersKVStoreSingle.getOrInitialize('pubkeys', kv) : memKeyStore;
 		const auth = getAuth(PUBLIC_FIREBASE_PROJECT_ID, keyStore, serviceAccountCredential);
 
 		try {
-			const idToken = await auth.verifySessionCookie(sessionCookie, false);
+			const idToken = await auth.verifySessionCookie(sessionCookie, false, {
+				FIREBASE_AUTH_EMULATOR_HOST: PUBLIC_FIREBASE_AUTH_EMULATOR_HOST || undefined
+			});
 			c.set('currentUser', {
 				uid: idToken.uid,
 				name: idToken.name
 			});
-		} catch {
+		} catch (error) {
 			// ignore
+			console.log('error', error);
 		}
 	}
 	await next();

src/api/index.ts

@@ -12,7 +12,7 @@ const app = new Hono<{ Bindings: Env; Variables: AuthVariables }>()
 		const currentUser = ensureUser(c);
 		const posts = Array.from({ length: 20 }, () => ({
 			title: 'Great Article',
-			author: currentUser.name
+			author: currentUser.name ?? 'Unknown'
 		}));
 		return c.json(posts);
 	});

src/lib/firebase-auth/client.ts

@@ -7,16 +7,15 @@ import {
 	signInWithPopup,
 	signInWithRedirect,
 	getRedirectResult,
+	signInWithEmailAndPassword as _signInWithEmailAndPassword,
+	createUserWithEmailAndPassword as _createUserWithEmailAndPassword,
 	connectAuthEmulator,
 	type UserCredential,
 	type AuthProvider
 } from 'firebase/auth';
 import { invalidate } from '$app/navigation';
 import { getApp } from 'firebase/app';
 
-/** re-export the official firebase/auth for convenience */
-export * from 'firebase/auth';
-
 let redirectResultPromise: Promise<UserCredential | null>;
 
 export function setupAuthClient(options: { emulatorHost?: string }) {
@@ -33,7 +32,7 @@ export function setupAuthClient(options: { emulatorHost?: string }) {
 	// Update the session cookie when the idToken changes
 	auth.onIdTokenChanged(async (user) => {
 		if (user) {
-			updateSession(await user.getIdToken());
+			updateSession(await user.getIdToken(true));
 		}
 	});
 }
@@ -61,6 +60,20 @@ export async function signInWithTwitter() {
 	await signInWithProvider(provider);
 }
 
+export async function signInWithEmailAndPassword(email: string, password: string) {
+	const auth = getAuth();
+	const cred = await _signInWithEmailAndPassword(auth, email, password);
+	await updateSession(await cred.user.getIdToken());
+	return cred;
+}
+
+export async function createUserWithEmailAndPassword(email: string, password: string) {
+	const auth = getAuth();
+	const cred = await _createUserWithEmailAndPassword(auth, email, password);
+	await updateSession(await cred.user.getIdToken());
+	return cred;
+}
+
 export async function signInWithProvider(provider: AuthProvider, withRedirect = true) {
 	const auth = getAuth();
 	const app = getApp();
@@ -71,7 +84,6 @@ export async function signInWithProvider(provider: AuthProvider, withRedirect =
 		// Fall back to sign-in by popup method if authDomain is different from location.host
 		const cred = await signInWithPopup(auth, provider);
 		await updateSession(await cred.user.getIdToken());
-		invalidate('auth:session');
 	}
 }
 
@@ -80,8 +92,8 @@ export async function signInWithProvider(provider: AuthProvider, withRedirect =
  */
 export async function signOut() {
 	await updateSession(undefined);
-	invalidate('auth:session');
 	await getAuth().signOut();
+	invalidate('auth:session');
 	resetRedirectResultHandler();
 }
 
@@ -96,6 +108,7 @@ async function updateSession(idToken: string | undefined) {
 		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify({ idToken })
 	});
+	invalidate('auth:session');
 	previousIdToken = idToken;
 }
 

src/lib/firebase-auth/server.ts

@@ -12,9 +12,9 @@ import { env } from '$env/dynamic/public';
 
 export {
 	InMemoryStore,
-	type FirebaseIdToken,
 	ServiceAccountCredential,
-	WorkersKVStoreSingle
+	WorkersKVStoreSingle,
+	type FirebaseIdToken
 } from 'firebase-auth-cloudflare-workers-x509';
 
 export type AuthHandleOptions = {

src/lib/user.ts

@@ -5,4 +5,5 @@ export type PublicUserInfo = {
 export type BasicPrivateUserInfo = {
 	name: string;
 	email?: string;
+	email_verified?: boolean;
 } & PublicUserInfo;

src/routes/+layout.server.ts

@@ -5,7 +5,8 @@ export const load = async ({ locals, depends }) => {
 		currentIdToken: locals.currentIdToken,
 		currentUser: locals.currentIdToken && {
 			uid: locals.currentIdToken.uid,
-			email: locals.currentIdToken.email
+			email: locals.currentIdToken.email,
+			email_verified: locals.currentIdToken.email_verified
 		}
 	};
 };

src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { getAuth, sendEmailVerification } from 'firebase/auth';
 	import { signOut } from '$lib/firebase-auth/client';
 	import type { PageData } from './$types';
+	import { page } from '$app/stores';
 
 	let {
 		data,
@@ -10,8 +12,31 @@
 		data: PageData;
 		children: Snippet;
 	} = $props();
+
+	async function _sendEmailVerification() {
+		const auth = getAuth();
+		if (auth.currentUser) {
+			await sendEmailVerification(auth.currentUser, { url: $page.url.origin + '/verify_email' });
+			alert('Verification email sent!');
+		}
+	}
 </script>
 
+{#if data.currentIdToken !== undefined}
+	<p>
+		Current User: <code>{JSON.stringify(data.currentUser)}</code>
+		<button onclick={signOut} disabled={data.currentUser === undefined}>Logout</button>
+	</p>
+	{#if data.currentUser?.email_verified === false}
+		<p style="color: white; background-color: brown; padding: 0.3em;">
+			Your email isn’t verified yet. Check your inbox for the verification link. <button
+				onclick={() => _sendEmailVerification()}>Resend verification email.</button
+			>
+		</p>
+	{/if}
+	<hr />
+{/if}
+
 <p>
 	GitHub: <a href="https://github.com/MIERUNE/sveltekit-firebase-auth-ssr" target="_blank"
 		>MIERUNE/sveltekit-firebase-auth-ssr</a
@@ -27,11 +52,4 @@
 	{/if}
 </ul>
 
-<p>
-	{#if data.currentIdToken !== undefined}
-		<code>{JSON.stringify(data.currentUser)}</code>
-		<button onclick={signOut} disabled={data.currentUser === undefined}>Logout</button>
-	{/if}
-</p>
-
 {@render children()}

src/routes/+page.svelte

@@ -1,2 +1,3 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+
+<p>Home</p>