diff --git a/src/db/CreatorDatabase.ts b/src/db/CreatorDatabase.ts
index 95935b2cb..9ea9862b4 100644
--- a/src/db/CreatorDatabase.ts
+++ b/src/db/CreatorDatabase.ts
@@ -7,7 +7,7 @@ import type { User } from 'firebase/auth';
 export const CreatorCollection = 'creators';
 
 /** The type for a record returned by our cloud functions */
-export type CreatorSchema = {
+type CreatorSchema = {
     uid: string;
     name: string | null;
     email: string | null;
@@ -15,7 +15,7 @@ export type CreatorSchema = {
 
 export class Creator {
     /** This is the domain we append to work around the lack of Firebase support for raw usernames. */
-    static CreatorUsernameEmailDomain = '@wordplay.dev';
+    static CreatorUsernameEmailDomain = '@u.wordplay.dev';
     readonly data: CreatorSchema;
     constructor(data: CreatorSchema) {
         this.data = data;
diff --git a/src/locale/en-US.json b/src/locale/en-US.json
index b9413f9f7..5b5134238 100644
--- a/src/locale/en-US.json
+++ b/src/locale/en-US.json
@@ -4198,14 +4198,14 @@
                     "play": "You're logged in, we can save your projects online now! Want to create something?",
                     "emailrules": [
                         "• Don't provide your email if you are *12 or younger*.",
-                        "• If you *lose access* to your email account, you won't be able to update your email address."
+                        "• If you *lose access* to your email account, you won't be able to log in or update your email address."
                     ],
                     "usernamerules": [
                         "• *Usernames* should not contain identiable information (e.g., names), cannot be an email addresses, and should be at least 5 characters long",
                         "• *Passwords* must be at least 10 characters long; if you're not using a password manager, choose three long words you'll remember.",
                         "• *If you forget your password*, you can't recover your account, since we have no other way to know it's you. Store your password somewhere safe, like a password manager"
                     ],
-                    "passwordreminder": "It looks like you're creating an account. Reveal it above, and make sure you wrote it down correctly, then submit again to create your account.",
+                    "passwordreminder": "It looks like you're creating an account. Check your password, make sure you stored it safely and correctly, then submit again to create your account.",
                     "change": "Want to change your email? Submit a new one and we'll send a confirmation to the old one.",
                     "sent": "Check your email for a login link. Patience, email can be slow!",
                     "logout": "Leaving a shared device and want to keep your projects private? Logout and we'll remove your projects from this device. They will still be stored online.",
@@ -4220,7 +4220,7 @@
                     "invalid": "This link isn't valid.",
                     "email": "This email wasn't valid.",
                     "failure": "Unable to login :(",
-                    "offline": "You appear to be offline.",
+                    "offline": "We couldn't reach the cloud ☁️.",
                     "unchanged": "We couldn't change your email address, but we don't know why.",
                     "delete": "We couldn't delete your account, but we don't know why.",
                     "wrongPassword": "Not a valid username and password. Either your password is wrong, or someone else has this username."
diff --git a/src/routes/login/EmailLogin.svelte b/src/routes/login/EmailLogin.svelte
new file mode 100644
index 000000000..e494400cc
--- /dev/null
+++ b/src/routes/login/EmailLogin.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+    import {
+        isSignInWithEmailLink,
+        sendSignInLinkToEmail,
+        signInWithEmailLink,
+    } from 'firebase/auth';
+    import Subheader from '@components/app/Subheader.svelte';
+    import TextField from '@components/widgets/TextField.svelte';
+    import { locales } from '@db/Database';
+    import MarkupHtmlView from '@components/concepts/MarkupHTMLView.svelte';
+    import Button from '@components/widgets/Button.svelte';
+    import validEmail from '@db/validEmail';
+    import LoginForm from './LoginForm.svelte';
+    import { analytics, auth } from '@db/firebase';
+    import { onMount } from 'svelte';
+    import getLoginErrorDescription from './getAuthErrorDescription';
+    import { getUser } from '@components/project/Contexts';
+    import { logEvent } from 'firebase/analytics';
+    import { goto } from '$app/navigation';
+
+    /** The current email text in the text field */
+    let email: string;
+    /** Whether the form was submitted */
+    let submitted = false;
+    /** Feedback about the submission */
+    let feedback: string | undefined = undefined;
+    /** Get the current login context */
+    let user = getUser();
+
+    /** Whether the form is ready to be submitted */
+    $: submittable = !submitted && validEmail(email);
+
+    /** When the page is mounted, see if the link is an email sign in link, and if so, attempt to finish logging in. */
+    onMount(() => {
+        if (auth && isSignInWithEmailLink(auth, window.location.href))
+            finishEmailLogin();
+    });
+
+    async function sendLoginEmail() {
+        if (auth && submittable) {
+            try {
+                /** If this is already a link, finish the login with the email they entered. */
+                if (isSignInWithEmailLink(auth, window.location.href))
+                    finishEmailLogin();
+                else {
+                    // Ask Firebase to send an email.
+                    await sendSignInLinkToEmail(auth, email, {
+                        url: `${location.origin}/login`,
+                        handleCodeInApp: true,
+                    });
+                    // Remember the email in local storage so we don't have to ask for it again
+                    // after returning to the link above.
+                    window.localStorage.setItem('email', email);
+                    submitted = true;
+                    feedback = $locales.get((l) => l.ui.page.login.prompt.sent);
+                }
+            } catch (err) {
+                feedback = getLoginErrorDescription($locales, err);
+            }
+        }
+    }
+
+    function finishEmailLogin(): string | undefined {
+        if (auth) {
+            try {
+                // If this is on the same device and browser, then the email should be in local storage.
+                const storedEmail = window.localStorage.getItem('email');
+
+                // If there's no email, prompt for one.
+                if (storedEmail === null && email === '') {
+                    feedback = $locales.get(
+                        (l) => l.ui.page.login.prompt.enter
+                    );
+                }
+                // If no user, create an account with the email.
+                else if ($user === null) {
+                    signInWithEmailLink(
+                        auth,
+                        storedEmail ?? email,
+                        window.location.href
+                    ).then(() => {
+                        // Remove the email we might have stored.
+                        window.localStorage.removeItem('email');
+
+                        // Provide success feedback (which likely won't be visible, since we're navigating immediately)
+                        feedback = $locales.get(
+                            (l) => l.ui.page.login.prompt.success
+                        );
+
+                        // Log login event in analytics
+                        if (analytics) logEvent(analytics, 'login');
+
+                        // Remove the query on the URL, showing the profile view.
+                        goto('/login');
+                    });
+                }
+            } catch (err) {
+                feedback = getLoginErrorDescription($locales, err);
+            }
+        }
+        return undefined;
+    }
+</script>
+
+<Subheader>{$locales.get((l) => l.ui.page.login.subheader.email)}</Subheader>
+<LoginForm submit={sendLoginEmail} {feedback}>
+    <div>
+        <TextField
+            kind="email"
+            description={$locales.get(
+                (l) => l.ui.page.login.field.email.description
+            )}
+            placeholder={$locales.get(
+                (l) => l.ui.page.login.field.email.placeholder
+            )}
+            bind:text={email}
+            editable={!submitted}
+        />
+        <Button
+            submit
+            background
+            tip={$locales.get((l) => l.ui.page.login.button.login)}
+            active={submittable}
+            action={() => undefined}>&gt;</Button
+        >
+    </div>
+    <MarkupHtmlView
+        markup={$locales.get((l) => l.ui.page.login.prompt.emailrules)}
+    />
+</LoginForm>
diff --git a/src/routes/login/Login.svelte b/src/routes/login/Login.svelte
index f038a7526..f88f77dda 100644
--- a/src/routes/login/Login.svelte
+++ b/src/routes/login/Login.svelte
@@ -1,186 +1,31 @@
 <script lang="ts">
-    import {
-        createUserWithEmailAndPassword,
-        isSignInWithEmailLink,
-        sendSignInLinkToEmail,
-        signInWithEmailAndPassword,
-    } from 'firebase/auth';
+    import { isSignInWithEmailLink } from 'firebase/auth';
     import Header from '../../components/app/Header.svelte';
-    import TextField from '../../components/widgets/TextField.svelte';
     import { locales } from '../../db/Database';
-    import { getUser } from '../../components/project/Contexts';
-    import { analytics, auth } from '../../db/firebase';
-    import Button from '../../components/widgets/Button.svelte';
-    import validEmail from '../../db/validEmail';
-    import Feedback from '../../components/app/Feedback.svelte';
+    import { auth } from '../../db/firebase';
     import { onMount } from 'svelte';
-    import { signInWithEmailLink } from 'firebase/auth';
-    import { logEvent } from 'firebase/analytics';
-    import { FirebaseError } from 'firebase/app';
-    import { getLoginErrorDescription } from './login';
-    import { goto } from '$app/navigation';
     import Mode from '../../components/widgets/Mode.svelte';
-    import Subheader from '../../components/app/Subheader.svelte';
-    import MarkupHtmlView from '../../components/concepts/MarkupHTMLView.svelte';
-    import CreatorDatabase from '../../db/CreatorDatabase';
+    import UsernameLogin from './UsernameLogin.svelte';
+    import EmailLogin from './EmailLogin.svelte';
 
-    let user = getUser();
-    let success: boolean | undefined = undefined;
-
-    let missingEmail = false;
-    let email: string;
-    let sent = false;
-    let emailLoginFeedback: string | undefined = undefined;
-    let usernameLoginFeedback: string | undefined = undefined;
     let younger = true;
-    let username = '';
-    let password = '';
-    let reveal = false;
-
-    $: emailUsername = CreatorDatabase.getUsernameEmail(username);
-
-    /** True if we tried to log in and there's no account. */
-    let noAccount = false;
-
-    $: emailSubmittable = !sent && validEmail(email);
-
-    $: userNameValid = isValidUsername(username) && isValidPassword(password);
-    $: usernameIsCheckable = !noAccount && userNameValid;
-
-    function isValidUsername(username: string) {
-        return !validEmail(username) && username.length >= 5;
-    }
-
-    function isValidPassword(pass: string) {
-        return pass.length >= 10;
-    }
-
-    async function startEmailLogin() {
-        if (auth && emailSubmittable) {
-            try {
-                if (isSignInWithEmailLink(auth, window.location.href))
-                    finishLogin();
-                else {
-                    // Ask Firebase to send an email.
-                    await sendSignInLinkToEmail(auth, email, {
-                        url: `${location.origin}/login`,
-                        handleCodeInApp: true,
-                    });
-                    // Remember the email in local storage so we don't have to ask for it again
-                    // after returning to the link above.
-                    window.localStorage.setItem('email', email);
-                    sent = true;
-                }
-            } catch (err) {
-                emailLoginFeedback = communicateError(err);
-            }
-        }
-    }
-
-    function finishLogin(): string | undefined {
-        if (auth) {
-            try {
-                // If this is on the same device and browser, then the email should be in local storage.
-                const storedEmail = window.localStorage.getItem('email');
-
-                // If there's no email, prompt for one.
-                if (storedEmail === null && email === '') {
-                    missingEmail = true;
-                }
-                // If no user, create an account with the email.
-                else if ($user === null) {
-                    signInWithEmailLink(
-                        auth,
-                        storedEmail ?? email,
-                        window.location.href
-                    )
-                        .then(() => {
-                            // Remove the email we might have stored.
-                            window.localStorage.removeItem('email');
-
-                            // Mark success to show feedback.
-                            success = true;
-
-                            // Log login event
-                            if (analytics) logEvent(analytics, 'login');
-
-                            // Remove the query on the URL so there's no attempt to login on refresh.
-                            goto('/login');
-                        })
-                        .catch(
-                            (err) =>
-                                (emailLoginFeedback = communicateError(err))
-                        );
-                }
-            } catch (err) {
-                emailLoginFeedback = communicateError(err);
-            }
-        }
-        return undefined;
-    }
-
-    async function tryUsernameLogin() {
-        if (auth && usernameIsCheckable) {
-            try {
-                await signInWithEmailAndPassword(auth, emailUsername, password);
-            } catch (error) {
-                if (
-                    error instanceof FirebaseError &&
-                    error.code === 'auth/user-not-found'
-                ) {
-                    noAccount = true;
-                } else {
-                    usernameLoginFeedback = communicateError(error);
-                }
-            }
-        }
-    }
-
-    async function createUsernameLogin() {
-        if (auth && reveal) {
-            try {
-                await createUserWithEmailAndPassword(
-                    auth,
-                    emailUsername,
-                    password
-                );
-            } catch (error) {
-                usernameLoginFeedback = communicateError(error);
-            }
-        }
-    }
-
-    function communicateError(err: unknown) {
-        success = false;
-        if (err instanceof FirebaseError) {
-            console.error(err.code);
-            console.error(err.message);
-            return (
-                getLoginErrorDescription(err.code, $locales) ??
-                $locales.get((l) => l.ui.page.login.error.failure)
-            );
-        } else {
-            console.error(err);
-            return $locales.get((l) => l.ui.page.login.error.failure);
-        }
-    }
+    let isEmailSignInLink = false;
 
     // If it's a sign in, finish signing in once authenticated.
     onMount(() => {
         if (auth && isSignInWithEmailLink(auth, window.location.href))
-            finishLogin();
+            isEmailSignInLink = true;
     });
 </script>
 
+<!-- Provide some reasons to log in -->
 <Header>{$locales.get((l) => l.ui.page.login.header)}</Header>
+
 <p>
-    {#if missingEmail}
-        {$locales.get((l) => l.ui.page.login.prompt.enter)}
-    {:else if $user === null}
-        {$locales.get((l) => l.ui.page.login.prompt.login)}
-    {/if}
+    {$locales.get((l) => l.ui.page.login.prompt.login)}
 </p>
 
+<!-- Ask (but do not store) for the user's age, so we can decide what options to show -->
 <Mode
     modes={$locales.get((l) => l.ui.page.login.prompt.age.modes)}
     choice={0}
@@ -188,114 +33,8 @@
     descriptions={$locales.get((l) => l.ui.page.login.prompt.age)}
 />
 
-{#if missingEmail || !younger}
-    <Subheader>{$locales.get((l) => l.ui.page.login.subheader.email)}</Subheader
-    >
-    <form class="login-form" on:submit={startEmailLogin}>
-        <div>
-            <TextField
-                kind="email"
-                description={$locales.get(
-                    (l) => l.ui.page.login.field.email.description
-                )}
-                placeholder={$locales.get(
-                    (l) => l.ui.page.login.field.email.placeholder
-                )}
-                bind:text={email}
-                editable={!sent}
-            />
-            <Button
-                submit
-                background
-                tip={$locales.get((l) => l.ui.page.login.button.login)}
-                active={emailSubmittable}
-                action={() => undefined}>&gt;</Button
-            >
-        </div>
-        <MarkupHtmlView
-            markup={$locales.get((l) => l.ui.page.login.prompt.emailrules)}
-        />
-    </form>
-{/if}
-
-{#if sent === true}
-    <Feedback>{$locales.get((l) => l.ui.page.login.prompt.sent)}</Feedback>
-{:else if success === true}
-    <Feedback>{$locales.get((l) => l.ui.page.login.prompt.success)}</Feedback>
-{:else if emailLoginFeedback !== undefined}
-    <Feedback>{emailLoginFeedback}</Feedback>
-{/if}
-
-<Subheader>{$locales.get((l) => l.ui.page.login.subheader.username)}</Subheader>
-<form
-    class="login-form"
-    on:submit={noAccount ? createUsernameLogin : tryUsernameLogin}
->
-    <div>
-        <TextField
-            description={$locales.get(
-                (l) => l.ui.page.login.field.username.description
-            )}
-            placeholder={$locales.get(
-                (l) => l.ui.page.login.field.username.placeholder
-            )}
-            bind:text={username}
-            editable={!sent}
-            validator={(name) => isValidUsername(name)}
-        />
-        {#if noAccount}
-            {#if reveal}{password}{:else}<Button
-                    tip={$locales.get(
-                        (l) => l.ui.page.login.prompt.passwordreminder
-                    )}
-                    action={() => (reveal = true)}
-                    >🔍{'•'.repeat(password.length)}</Button
-                >{/if}
-        {:else}
-            <TextField
-                kind={noAccount ? undefined : 'password'}
-                description={$locales.get(
-                    (l) => l.ui.page.login.field.password.description
-                )}
-                placeholder={$locales.get(
-                    (l) => l.ui.page.login.field.password.placeholder
-                )}
-                bind:text={password}
-                validator={(pass) => isValidPassword(pass)}
-            />
-        {/if}
-        <Button
-            submit
-            background
-            tip={$locales.get((l) => l.ui.page.login.button.login)}
-            active={usernameIsCheckable || reveal}
-            action={() => undefined}
-            >{#if noAccount}&gt;&gt;{:else}&gt;{/if}</Button
-        >
-    </div>
-    {#if noAccount}
-        <Feedback
-            >{$locales.get(
-                (l) => l.ui.page.login.prompt.passwordreminder
-            )}</Feedback
-        >
-    {/if}
-    <MarkupHtmlView
-        markup={$locales.get((l) => l.ui.page.login.prompt.usernamerules)}
-    />
-</form>
-
-{#if usernameLoginFeedback !== undefined}
-    <Feedback>{usernameLoginFeedback}</Feedback>
+{#if isEmailSignInLink || !younger}
+    <EmailLogin />
 {/if}
 
-<style>
-    .login-form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--wordplay-spacing);
-        padding: 1em;
-        border: var(--wordplay-border-width) solid var(--wordplay-border-color);
-        border-radius: var(--wordplay-border-radius);
-    }
-</style>
+<UsernameLogin />
diff --git a/src/routes/login/LoginForm.svelte b/src/routes/login/LoginForm.svelte
new file mode 100644
index 000000000..b6a90aa9d
--- /dev/null
+++ b/src/routes/login/LoginForm.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Feedback from '@components/app/Feedback.svelte';
+
+    export let submit: () => void;
+    export let feedback: string | undefined;
+</script>
+
+<form class="login-form" on:submit={submit}><slot /></form>
+{#if feedback}<Feedback>{feedback}</Feedback>{/if}
+
+<style>
+    .login-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--wordplay-spacing);
+        padding: 1em;
+        border: var(--wordplay-border-width) solid var(--wordplay-border-color);
+        border-radius: var(--wordplay-border-radius);
+    }
+</style>
diff --git a/src/routes/login/Profile.svelte b/src/routes/login/Profile.svelte
index 0b1b85c2b..d4120f3b5 100644
--- a/src/routes/login/Profile.svelte
+++ b/src/routes/login/Profile.svelte
@@ -11,7 +11,7 @@
     import validEmail from '../../db/validEmail';
     import Feedback from '../../components/app/Feedback.svelte';
     import { isModerator } from '../../models/Moderation';
-    import { getLoginErrorDescription } from './login';
+    import getLoginErrorDescription from './getAuthErrorDescription';
     import { Creator } from '../../db/CreatorDatabase';
 
     export let user: User;
@@ -52,20 +52,7 @@
                 (l) => l.ui.page.login.prompt.confirm
             );
         } catch (error) {
-            if (
-                error !== null &&
-                typeof error === 'object' &&
-                'code' in error &&
-                typeof error.code === 'string' &&
-                'message' in error &&
-                typeof error.message === 'string'
-            ) {
-                console.error(error.code);
-                console.error(error.message);
-                changeFeedback =
-                    getLoginErrorDescription(error.code, $locales) ??
-                    $locales.get((l) => l.ui.page.login.error.unchanged);
-            }
+            changeFeedback = getLoginErrorDescription($locales, error);
         } finally {
             changeSubmitted = false;
         }
diff --git a/src/routes/login/UsernameLogin.svelte b/src/routes/login/UsernameLogin.svelte
new file mode 100644
index 000000000..d272010c7
--- /dev/null
+++ b/src/routes/login/UsernameLogin.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+    import {
+        createUserWithEmailAndPassword,
+        signInWithEmailAndPassword,
+    } from 'firebase/auth';
+    import CreatorDatabase from '@db/CreatorDatabase';
+    import validEmail from '@db/validEmail';
+    import Subheader from '@components/app/Subheader.svelte';
+    import TextField from '@components/widgets/TextField.svelte';
+    import { locales } from '@db/Database';
+    import Button from '@components/widgets/Button.svelte';
+    import Feedback from '@components/app/Feedback.svelte';
+    import MarkupHtmlView from '@components/concepts/MarkupHTMLView.svelte';
+    import LoginForm from './LoginForm.svelte';
+    import { FirebaseError } from 'firebase/app';
+    import { auth } from '@db/firebase';
+    import getLoginErrorDescription from './getAuthErrorDescription';
+
+    /** The username text currently in the text field */
+    let username = '';
+    /** Feedback to provide about the login attempt */
+    let usernameLoginFeedback: string | undefined = undefined;
+    /** The password currently in the password text field */
+    let password = '';
+    /** Whether a sign in has been attempted */
+    let submitted = false;
+    /** Whether the password is revealed */
+    let reveal = false;
+    /** True if the creator tried to log in and there's no account yet. */
+    let noAccount = false;
+
+    /** True if the username and password is valid */
+    $: loginFormSubmittable =
+        isValidUsername(username) && isValidPassword(password);
+    $: usernameIsCheckable = !noAccount && loginFormSubmittable;
+
+    /** The email to submit to Firebase given the current username (since Firebase doesn't support usernames) */
+    $: emailUsername = CreatorDatabase.getUsernameEmail(username);
+
+    function isValidUsername(username: string) {
+        return !validEmail(username) && username.length >= 5;
+    }
+
+    function isValidPassword(pass: string) {
+        return pass.length >= 10;
+    }
+
+    async function tryUsernameLogin() {
+        if (auth && usernameIsCheckable) {
+            try {
+                await signInWithEmailAndPassword(auth, emailUsername, password);
+                submitted = true;
+            } catch (error) {
+                if (
+                    error instanceof FirebaseError &&
+                    error.code === 'auth/user-not-found'
+                ) {
+                    noAccount = true;
+                } else {
+                    usernameLoginFeedback = getLoginErrorDescription(
+                        $locales,
+                        error
+                    );
+                }
+            }
+        }
+    }
+
+    async function createUsernameLogin() {
+        if (auth && reveal) {
+            try {
+                await createUserWithEmailAndPassword(
+                    auth,
+                    emailUsername,
+                    password
+                );
+            } catch (error) {
+                usernameLoginFeedback = getLoginErrorDescription(
+                    $locales,
+                    error
+                );
+            }
+        }
+    }
+</script>
+
+<Subheader>{$locales.get((l) => l.ui.page.login.subheader.username)}</Subheader>
+<LoginForm
+    submit={noAccount ? createUsernameLogin : tryUsernameLogin}
+    feedback={usernameLoginFeedback}
+>
+    <div>
+        <TextField
+            description={$locales.get(
+                (l) => l.ui.page.login.field.username.description
+            )}
+            placeholder={$locales.get(
+                (l) => l.ui.page.login.field.username.placeholder
+            )}
+            bind:text={username}
+            editable={!submitted}
+            validator={(name) => isValidUsername(name)}
+        />
+        {#if noAccount}
+            {#if reveal}{password}{:else}<Button
+                    tip={$locales.get(
+                        (l) => l.ui.page.login.prompt.passwordreminder
+                    )}
+                    action={() => (reveal = true)}
+                    >🔍{'•'.repeat(password.length)}</Button
+                >{/if}
+        {:else}
+            <TextField
+                kind={noAccount ? undefined : 'password'}
+                description={$locales.get(
+                    (l) => l.ui.page.login.field.password.description
+                )}
+                placeholder={$locales.get(
+                    (l) => l.ui.page.login.field.password.placeholder
+                )}
+                editable={!submitted}
+                bind:text={password}
+                validator={(pass) => isValidPassword(pass)}
+            />
+        {/if}
+        <Button
+            submit
+            background
+            tip={$locales.get((l) => l.ui.page.login.button.login)}
+            active={usernameIsCheckable || reveal}
+            action={() => undefined}
+            >{#if noAccount}&gt;&gt;{:else}&gt;{/if}</Button
+        >
+    </div>
+    {#if noAccount}
+        <Feedback
+            >{$locales.get(
+                (l) => l.ui.page.login.prompt.passwordreminder
+            )}</Feedback
+        >
+    {/if}
+    <MarkupHtmlView
+        markup={$locales.get((l) => l.ui.page.login.prompt.usernamerules)}
+    />
+</LoginForm>
diff --git a/src/routes/login/getAuthErrorDescription.ts b/src/routes/login/getAuthErrorDescription.ts
new file mode 100644
index 000000000..dc0ef809a
--- /dev/null
+++ b/src/routes/login/getAuthErrorDescription.ts
@@ -0,0 +1,43 @@
+import { FirebaseError } from 'firebase/app';
+import type Locales from '../../locale/Locales';
+
+function getFirebaseErrorCodeDescription(
+    code: string,
+    locales: Locales
+): string | undefined {
+    return (
+        {
+            'auth/id-token-expired': locales.get(
+                (l) => l.ui.page.login.error.expired
+            ),
+            'auth/id-token-revoked': locales.get(
+                (l) => l.ui.page.login.error.invalid
+            ),
+            'auth/invalid-argument': locales.get(
+                (l) => l.ui.page.login.error.invalid
+            ),
+            'auth/invalid-email': locales.get(
+                (l) => l.ui.page.login.error.email
+            ),
+            'auth/wrong-password': locales.get(
+                (l) => l.ui.page.login.error.wrongPassword
+            ),
+            'auth/network-request-failed': locales.get(
+                (l) => l.ui.page.login.error.offline
+            ),
+        }[code] ?? locales.get((l) => l.ui.page.login.error.failure)
+    );
+}
+
+export default function getAuthErrorDescription(
+    locales: Locales,
+    err: unknown
+) {
+    // Log the error in case we need to troubleshoot with someone.
+    console.error(err);
+    if (err instanceof FirebaseError) {
+        return getFirebaseErrorCodeDescription(err.code, locales);
+    } else {
+        return locales.get((l) => l.ui.page.login.error.failure);
+    }
+}
diff --git a/src/routes/login/login.ts b/src/routes/login/login.ts
deleted file mode 100644
index 11cede0b5..000000000
--- a/src/routes/login/login.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type Locales from '../../locale/Locales';
-
-export function getLoginErrorDescription(
-    code: string,
-    locales: Locales
-): string | undefined {
-    return {
-        'auth/id-token-expired': locales.get(
-            (l) => l.ui.page.login.error.expired
-        ),
-        'auth/id-token-revoked': locales.get(
-            (l) => l.ui.page.login.error.invalid
-        ),
-        'auth/invalid-argument': locales.get(
-            (l) => l.ui.page.login.error.invalid
-        ),
-        'auth/invalid-email': locales.get((l) => l.ui.page.login.error.email),
-        'auth/wrong-password': locales.get(
-            (l) => l.ui.page.login.error.wrongPassword
-        ),
-    }[code];
-}