Merge pull request #12 from MIERUNE/demo-email-password

demo: signinWithEmailAndPassword

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/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,33 @@ export async function signInWithTwitter() {
 	await signInWithProvider(provider);
 }
 
+// export async function refreshSession() {
+// 	const auth = getAuth();
+// 	await auth.authStateReady();
+// 	if (auth.currentUser) {
+// 		const idToken = await auth.currentUser.getIdToken(true);
+// 		console.log(auth.currentUser.emailVerified, idToken);
+// 		await updateSession(idToken);
+// 		invalidate('auth:session');
+// 	}
+// }
+
+export async function signInWithEmailAndPassword(email: string, password: string) {
+	const auth = getAuth();
+	const cred = await _signInWithEmailAndPassword(auth, email, password);
+	await updateSession(await cred.user.getIdToken());
+	invalidate('auth:session');
+	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());
+	invalidate('auth:session');
+	return cred;
+}
+
 export async function signInWithProvider(provider: AuthProvider, withRedirect = true) {
 	const auth = getAuth();
 	const app = getApp();
@@ -80,14 +106,14 @@ export async function signInWithProvider(provider: AuthProvider, withRedirect =
  */
 export async function signOut() {
 	await updateSession(undefined);
-	invalidate('auth:session');
 	await getAuth().signOut();
+	invalidate('auth:session');
 	resetRedirectResultHandler();
 }
 
 let previousIdToken: string | undefined = undefined;
 
-async function updateSession(idToken: string | undefined) {
+export async function updateSession(idToken: string | undefined) {
 	if (idToken === previousIdToken) {
 		return;
 	}
@@ -96,6 +122,9 @@ async function updateSession(idToken: string | undefined) {
 		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify({ idToken })
 	});
+	if (previousIdToken) {
+		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

@@ -2,6 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import { signOut } from '$lib/firebase-auth/client';
 	import type { PageData } from './$types';
+	import { getAuth, sendEmailVerification } from 'firebase/auth';
+	import { page } from '$app/stores';
 
 	let {
 		data,
@@ -10,6 +12,13 @@
 		data: PageData;
 		children: Snippet;
 	} = $props();
+
+	async function _sendEmailVerification() {
+		const auth = getAuth();
+		if (auth.currentUser) {
+			await sendEmailVerification(auth.currentUser, { url: $page.url.origin + '/verify_email' });
+		}
+	}
 </script>
 
 <p>
@@ -27,11 +36,18 @@
 	{/if}
 </ul>
 
-<p>
-	{#if data.currentIdToken !== undefined}
+{#if data.currentIdToken !== undefined}
+	<p>
 		<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: red;">
+			Your email address is not verified yet. <button onclick={() => _sendEmailVerification()}
+				>Resend verification email.</button
+			>
+		</p>
 	{/if}
-</p>
+{/if}
 
 {@render children()}

src/routes/login/+page.svelte

@@ -1,14 +1,42 @@
 <script lang="ts">
+	import { FirebaseError } from 'firebase/app';
+	import { sendEmailVerification } from 'firebase/auth';
 	import {
 		signInWithGoogle,
-		signInWithTwitter,
-		waitForRedirectResult
+		waitForRedirectResult,
+		signInWithEmailAndPassword,
+		createUserWithEmailAndPassword
 	} from '$lib/firebase-auth/client';
 	import { page } from '$app/stores';
 
 	const redirectResult = waitForRedirectResult();
 
 	let { data } = $props();
+
+	let email = $state('');
+	let password = $state('');
+	let errorCode = $state('');
+
+	async function signInWithPassword() {
+		try {
+			await signInWithEmailAndPassword(email, password);
+		} catch (error) {
+			if (error instanceof FirebaseError) {
+				errorCode = error.code;
+			}
+		}
+	}
+
+	async function signUpWithPassword() {
+		try {
+			const cred = await createUserWithEmailAndPassword(email, password);
+			await sendEmailVerification(cred.user, { url: $page.url.origin + '/verify_email' });
+		} catch (error) {
+			if (error instanceof FirebaseError) {
+				errorCode = error.code;
+			}
+		}
+	}
 </script>
 
 <h1>Login</h1>
@@ -20,11 +48,42 @@
 		{#if $page.url.searchParams.get('next')}
 			<p>You need to log in.</p>
 		{/if}
+
 		<button onclick={signInWithGoogle} disabled={data.currentIdToken !== undefined}
 			>Sign-in with Google</button
 		>
+		<!--
 		<button onclick={signInWithTwitter} disabled={data.currentIdToken !== undefined}
 			>Sign-in with Twitter</button
 		>
+		-->
+		<hr />
+		<div>
+			{#if errorCode}
+				<p style="color: red;">{errorCode}</p>
+			{/if}
+			<p>
+				<label
+					>Email: <input
+						type="text"
+						size="30"
+						bind:value={email}
+						placeholder="[email protected]"
+					/></label
+				>
+				<label
+					>Password: <input
+						type="password"
+						size="30"
+						bind:value={password}
+						placeholder="your password"
+					/></label
+				>
+			</p>
+			<p>
+				<button onclick={signInWithPassword}>Sign-In</button>
+				<button onclick={signUpWithPassword}>Sign-Up</button>
+			</p>
+		</div>
 	{/if}
 {/await}

src/routes/private/+layout.server.ts

@@ -1,6 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 
-export async function load({ locals, url }) {
+export async function load({ locals, url, depends }) {
+	depends('auth:session');
 	if (!locals.currentIdToken) {
 		redirect(303, '/login?next=' + encodeURIComponent(url.pathname + url.search));
 	}

src/routes/verify_email/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1>Email Verification Page</h1>
+
+<pre>{JSON.stringify(data.currentIdToken)}</pre>