From 813a62d89dfdf60e38a029b8ac516018815bcd96 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 13 Apr 2026 13:48:29 -0600
Subject: [PATCH] refactor: componentize auth pages

---
 .../src/components/ui/auth/CreateAccount.vue  | 302 ++++++++++++++++++
 .../src/components/ui/{ => auth}/HCaptcha.vue |   0
 .../src/components/ui/auth/SignIn.vue         | 295 +++++++++++++++++
 .../src/components/ui/auth/SignUp.vue         | 268 ++++++++++++++++
 .../src/pages/auth/reset-password.vue         |   2 +-
 apps/frontend/src/pages/auth/sign-in.vue      | 213 ++----------
 apps/frontend/src/pages/auth/sign-up.vue      | 249 ++-------------
 7 files changed, 916 insertions(+), 413 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/auth/CreateAccount.vue
 rename apps/frontend/src/components/ui/{ => auth}/HCaptcha.vue (100%)
 create mode 100644 apps/frontend/src/components/ui/auth/SignIn.vue
 create mode 100644 apps/frontend/src/components/ui/auth/SignUp.vue

diff --git a/apps/frontend/src/components/ui/auth/CreateAccount.vue b/apps/frontend/src/components/ui/auth/CreateAccount.vue
new file mode 100644
index 0000000000..e88eae980f
--- /dev/null
+++ b/apps/frontend/src/components/ui/auth/CreateAccount.vue
@@ -0,0 +1,302 @@
+<template>
+	<div class="create-account-card">
+		<h1 class="create-account-title">{{ formatMessage(messages.title) }}</h1>
+
+		<section class="create-account-section">
+			<label class="create-account-label" for="create-account-dob">
+				{{ formatMessage(messages.dateOfBirthLabel) }}
+			</label>
+			<div class="date-input-wrap">
+				<input
+					id="create-account-dob"
+					v-model="dateOfBirthModel"
+					class="date-input"
+					type="date"
+					:max="maxBirthDate"
+				/>
+				<CalendarIcon class="date-input-icon" />
+			</div>
+			<p class="helper-text">{{ formatMessage(messages.over13HelperText) }}</p>
+		</section>
+
+		<section class="info-panel">
+			<div class="info-panel-icon">
+				<InfoIcon />
+			</div>
+			<div class="info-panel-content">
+				<p>{{ formatMessage(messages.infoPanelText) }}</p>
+				<a class="text-link" :href="sourceCodeUrl" target="_blank" rel="noopener noreferrer">
+					{{ formatMessage(messages.relevantSourceCodeText) }}
+				</a>
+			</div>
+		</section>
+
+		<section class="create-account-section">
+			<label class="create-account-label" for="create-account-username">
+				{{ formatMessage(messages.usernameOptionalLabel) }}
+			</label>
+			<StyledInput
+				id="create-account-username"
+				v-model="usernameModel"
+				type="text"
+				:placeholder="formatMessage(messages.usernamePlaceholder)"
+				wrapper-class="w-full"
+			/>
+		</section>
+
+		<section class="create-account-section">
+			<label class="create-account-label">{{ formatMessage(messages.securityCheckLabel) }}</label>
+			<div class="captcha-wrap">
+				<HCaptcha v-if="globals?.captcha_enabled" :ref="onSetCaptchaRef" v-model="tokenModel" />
+			</div>
+		</section>
+
+		<Checkbox
+			v-model="subscribeModel"
+			class="subscribe-checkbox"
+			:label="formatMessage(messages.subscribeLabel)"
+			:description="formatMessage(messages.subscribeLabel)"
+		/>
+
+		<ButtonStyled color="brand">
+			<button
+				class="!w-full complete-sign-up-btn"
+				:disabled="globals?.captcha_enabled ? !tokenModel : false"
+				@click="onCompleteSignUp()"
+			>
+				{{ formatMessage(messages.completeSignUpButton) }}
+			</button>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup>
+import { CalendarIcon, InfoIcon } from '@modrinth/assets'
+import { ButtonStyled, Checkbox, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
+
+const props = defineProps({
+	dateOfBirth: {
+		type: String,
+		default: '',
+	},
+	username: {
+		type: String,
+		default: '',
+	},
+	token: {
+		type: String,
+		default: '',
+	},
+	subscribe: {
+		type: Boolean,
+		default: false,
+	},
+	globals: {
+		type: Object,
+		default: null,
+	},
+	sourceCodeUrl: {
+		type: String,
+		default: 'https://github.com/modrinth/labrinth/blob/main/apps/labrinth/src/routes/internal/flows.rs',
+	},
+	onCompleteSignUp: {
+		type: Function,
+		default: () => {},
+	},
+	onSetCaptchaRef: {
+		type: Function,
+		default: undefined,
+	},
+})
+
+const emit = defineEmits([
+	'update:dateOfBirth',
+	'update:username',
+	'update:token',
+	'update:subscribe',
+])
+
+const dateOfBirthModel = computed({
+	get: () => props.dateOfBirth,
+	set: (value) => emit('update:dateOfBirth', value),
+})
+
+const usernameModel = computed({
+	get: () => props.username,
+	set: (value) => emit('update:username', value),
+})
+
+const tokenModel = computed({
+	get: () => props.token,
+	set: (value) => emit('update:token', value),
+})
+
+const subscribeModel = computed({
+	get: () => props.subscribe,
+	set: (value) => emit('update:subscribe', value),
+})
+
+const maxBirthDate = computed(() => {
+	const date = new Date()
+	date.setFullYear(date.getFullYear() - 13)
+	return date.toISOString().slice(0, 10)
+})
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'auth.create-account.title',
+		defaultMessage: 'Create an Account',
+	},
+	dateOfBirthLabel: {
+		id: 'auth.create-account.date-of-birth.label',
+		defaultMessage: 'Date of birth',
+	},
+	over13HelperText: {
+		id: 'auth.create-account.date-of-birth.over13-helper',
+		defaultMessage: 'You must be over 13 years old to use Modrinth.',
+	},
+	infoPanelText: {
+		id: 'auth.create-account.info-panel.text',
+		defaultMessage: 'We do not store your date of birth, it is only used to confirm your age at sign up.',
+	},
+	relevantSourceCodeText: {
+		id: 'auth.create-account.info-panel.source-code-link',
+		defaultMessage: 'Relevant source code',
+	},
+	usernameOptionalLabel: {
+		id: 'auth.create-account.username.optional-label',
+		defaultMessage: 'Username (Optional)',
+	},
+	usernamePlaceholder: {
+		id: 'auth.create-account.username.placeholder',
+		defaultMessage: 'Enter username',
+	},
+	securityCheckLabel: {
+		id: 'auth.create-account.security-check.label',
+		defaultMessage: 'Security check',
+	},
+	subscribeLabel: {
+		id: 'auth.create-account.subscribe.label',
+		defaultMessage: 'Keep me updated on the cool things Modrinth is working on via email',
+	},
+	completeSignUpButton: {
+		id: 'auth.create-account.complete-sign-up',
+		defaultMessage: 'Complete sign up',
+	},
+})
+</script>
+
+<style scoped lang="scss">
+.create-account-card {
+	background: var(--color-raised-bg);
+	border: 1px solid var(--color-button-bg);
+	border-radius: var(--size-rounded-xl);
+	box-shadow: var(--shadow-card);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
+	margin-inline: auto;
+	max-width: 30rem;
+	padding: var(--gap-xl);
+}
+
+.create-account-title {
+	font-size: var(--text-4xl);
+	font-weight: var(--weight-bold);
+	line-height: 1.2;
+	margin: 0;
+	text-align: center;
+}
+
+.create-account-section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+}
+
+.create-account-label {
+	color: var(--color-contrast);
+	font-size: var(--text-xl);
+	font-weight: var(--weight-bold);
+}
+
+.date-input-wrap {
+	align-items: center;
+	background: var(--color-button-bg);
+	border-radius: var(--size-rounded-lg);
+	display: flex;
+	gap: var(--gap-sm);
+	padding: 0.875rem 1rem;
+}
+
+.date-input {
+	background: transparent;
+	border: 0;
+	color: var(--color-contrast);
+	font-size: var(--text-lg);
+	outline: none;
+	width: 100%;
+}
+
+.date-input-icon {
+	color: var(--color-secondary);
+	flex-shrink: 0;
+	height: 1.2rem;
+	width: 1.2rem;
+}
+
+.helper-text {
+	color: var(--color-secondary);
+	font-size: var(--text-lg);
+	margin: 0;
+}
+
+.info-panel {
+	background: color-mix(in oklab, var(--color-brand) 20%, var(--color-bg));
+	border: 1px solid color-mix(in oklab, var(--color-brand) 80%, transparent);
+	border-radius: var(--size-rounded-xl);
+	display: flex;
+	gap: var(--gap-sm);
+	padding: var(--gap-md);
+}
+
+.info-panel-icon {
+	color: var(--color-brand);
+	display: flex;
+	flex-shrink: 0;
+}
+
+.info-panel-content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-xs);
+
+	p {
+		color: var(--color-contrast);
+		font-size: var(--text-lg);
+		margin: 0;
+	}
+}
+
+.captcha-wrap {
+	background: var(--color-button-bg);
+	border-radius: var(--size-rounded-lg);
+	min-height: 4.25rem;
+	padding: var(--gap-md);
+}
+
+.subscribe-checkbox {
+	border: 1px solid var(--color-button-bg);
+	border-radius: var(--size-rounded-xl);
+	padding: 0.75rem 1rem;
+}
+
+.complete-sign-up-btn {
+	font-weight: var(--weight-bold);
+}
+</style>
diff --git a/apps/frontend/src/components/ui/HCaptcha.vue b/apps/frontend/src/components/ui/auth/HCaptcha.vue
similarity index 100%
rename from apps/frontend/src/components/ui/HCaptcha.vue
rename to apps/frontend/src/components/ui/auth/HCaptcha.vue
diff --git a/apps/frontend/src/components/ui/auth/SignIn.vue b/apps/frontend/src/components/ui/auth/SignIn.vue
new file mode 100644
index 0000000000..09a969b89a
--- /dev/null
+++ b/apps/frontend/src/components/ui/auth/SignIn.vue
@@ -0,0 +1,295 @@
+<template>
+	<div v-if="subtleLauncherRedirectUri">
+		<iframe
+			:src="subtleLauncherRedirectUri"
+			class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
+		></iframe>
+	</div>
+	<div v-else>
+		<template v-if="flow && !subtleLauncherRedirectUri">
+			<label for="two-factor-code">
+				<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
+				<span class="label__description">
+					{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
+				</span>
+			</label>
+			<StyledInput
+				id="two-factor-code"
+				v-model="twoFactorCodeModel"
+				:maxlength="11"
+				inputmode="numeric"
+				:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
+				autocomplete="one-time-code"
+				@keyup.enter="onTwoFactorSignIn()"
+			/>
+
+			<button class="btn btn-primary continue-btn" @click="onTwoFactorSignIn()">
+				{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+			</button>
+		</template>
+		<template v-else>
+			<div class="flex flex-col gap-6">
+				<div class="text-center text-2xl font-semibold text-contrast">
+					{{ formatMessage(messages.signInWithLabel) }}
+				</div>
+
+				<section class="flex flex-col gap-2.5">
+					<ButtonStyled>
+						<a class="!shadow-none" :href="getAuthUrl('google', redirectTarget)">
+							<GoogleColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Google' })
+							}}</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a class="!shadow-none" :href="getAuthUrl('microsoft', redirectTarget)">
+							<MicrosoftColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Microsoft' })
+							}}</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a class="!shadow-none" :href="getAuthUrl('discord', redirectTarget)">
+							<DiscordColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Discord' })
+							}}</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a class="!shadow-none" :href="getAuthUrl('github', redirectTarget)">
+							<GitHubColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'GitHub' })
+							}}</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a class="!shadow-none" :href="getAuthUrl('gitlab', redirectTarget)">
+							<GitLabColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'GitLab' })
+							}}</span>
+						</a>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a class="!shadow-none" :href="getAuthUrl('steam', redirectTarget)">
+							<SteamColorIcon />
+							<span class="ml-1">{{
+								formatMessage(messages.continueWithProvider, { provider: 'Steam' })
+							}}</span>
+						</a>
+					</ButtonStyled>
+				</section>
+
+				<div class="h-px w-full bg-surface-5"></div>
+
+				<section class="auth-form">
+					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
+					<StyledInput
+						id="email"
+						v-model="emailModel"
+						:icon="MailIcon"
+						type="text"
+						inputmode="email"
+						autocomplete="username"
+						:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
+						wrapper-class="w-full"
+					/>
+
+					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+					<StyledInput
+						id="password"
+						v-model="passwordModel"
+						:icon="KeyIcon"
+						type="password"
+						autocomplete="current-password"
+						:placeholder="formatMessage(commonMessages.passwordLabel)"
+						wrapper-class="w-full"
+					/>
+
+					<HCaptcha
+						v-if="globals?.captcha_enabled && emailModel && passwordModel"
+						:ref="onSetCaptchaRef"
+						v-model="tokenModel"
+					/>
+
+					<ButtonStyled color="brand">
+						<button
+							class="!w-full"
+							:disabled="globals?.captcha_enabled ? !tokenModel : false"
+							@click="onPasswordSignIn()"
+						>
+							{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+						</button>
+					</ButtonStyled>
+
+					<div class="auth-form__additional-options !text-base">
+						<IntlFormatted :message-id="messages.additionalOptionsLabel">
+							<template #forgot-password-link="{ children }">
+								<NuxtLink
+									class="text-link"
+									:to="{
+										path: '/auth/reset-password',
+										query: routeQuery,
+									}"
+								>
+									<component :is="() => children" />
+								</NuxtLink>
+							</template>
+							<template #create-account-link="{ children }">
+								<NuxtLink
+									class="inline text-link"
+									:to="{
+										path: '/auth/sign-up',
+										query: routeQuery,
+									}"
+								>
+									<component :is="() => children" />
+								</NuxtLink>
+							</template>
+						</IntlFormatted>
+					</div>
+				</section>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+import {
+	DiscordColorIcon,
+	GitHubColorIcon,
+	GitLabColorIcon,
+	GoogleColorIcon,
+	KeyIcon,
+	MailIcon,
+	MicrosoftColorIcon,
+	RightArrowIcon,
+	SteamColorIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
+import { getAuthUrl } from '@/composables/auth.ts'
+
+const props = defineProps({
+	subtleLauncherRedirectUri: {
+		type: String,
+		default: '',
+	},
+	flow: {
+		default: '',
+	},
+	redirectTarget: {
+		type: String,
+		default: '',
+	},
+	routeQuery: {
+		type: Object,
+		default: () => ({}),
+	},
+	globals: {
+		type: Object,
+		default: null,
+	},
+	email: {
+		type: String,
+		default: '',
+	},
+	password: {
+		type: String,
+		default: '',
+	},
+	token: {
+		type: String,
+		default: '',
+	},
+	twoFactorCode: {
+		default: null,
+	},
+	onPasswordSignIn: {
+		type: Function,
+		default: () => {},
+	},
+	onTwoFactorSignIn: {
+		type: Function,
+		default: () => {},
+	},
+	onSetCaptchaRef: {
+		type: Function,
+		default: undefined,
+	},
+})
+
+const emit = defineEmits([
+	'update:email',
+	'update:password',
+	'update:token',
+	'update:twoFactorCode',
+])
+
+const emailModel = computed({
+	get: () => props.email,
+	set: (value) => emit('update:email', value),
+})
+
+const passwordModel = computed({
+	get: () => props.password,
+	set: (value) => emit('update:password', value),
+})
+
+const tokenModel = computed({
+	get: () => props.token,
+	set: (value) => emit('update:token', value),
+})
+
+const twoFactorCodeModel = computed({
+	get: () => props.twoFactorCode,
+	set: (value) => emit('update:twoFactorCode', value),
+})
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	additionalOptionsLabel: {
+		id: 'auth.sign-in.additional-options',
+		defaultMessage:
+			"<forgot-password-link>Forgot password</forgot-password-link> • Don't have an account? <create-account-link>Sign up</create-account-link>",
+	},
+	signInWithLabel: {
+		id: 'auth.sign-in.sign-in-with',
+		defaultMessage: 'Sign into Modrinth',
+	},
+	twoFactorCodeInputPlaceholder: {
+		id: 'auth.sign-in.2fa.placeholder',
+		defaultMessage: 'Enter code...',
+	},
+	twoFactorCodeLabel: {
+		id: 'auth.sign-in.2fa.label',
+		defaultMessage: 'Enter two-factor code',
+	},
+	twoFactorCodeLabelDescription: {
+		id: 'auth.sign-in.2fa.description',
+		defaultMessage: 'Please enter a two-factor code to proceed.',
+	},
+	continueWithProvider: {
+		id: 'auth.continue-with-provider',
+		defaultMessage: 'Continue with {provider}',
+	},
+	continueWithEmail: {
+		id: 'auth.sign-in.continue-with-email',
+		defaultMessage: 'Continue with Email',
+	},
+})
+</script>
diff --git a/apps/frontend/src/components/ui/auth/SignUp.vue b/apps/frontend/src/components/ui/auth/SignUp.vue
new file mode 100644
index 0000000000..9b46aca712
--- /dev/null
+++ b/apps/frontend/src/components/ui/auth/SignUp.vue
@@ -0,0 +1,268 @@
+<template>
+	<div class="flex flex-col gap-6">
+		<div class="text-center text-2xl font-semibold text-contrast">
+			{{ formatMessage(messages.signUpWithTitle) }}
+		</div>
+		<section class="flex flex-col gap-2.5">
+			<ButtonStyled>
+				<a class="!shadow-none" :href="getAuthUrl('google', redirectTarget)">
+					<GoogleColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a class="!shadow-none" :href="getAuthUrl('microsoft', redirectTarget)">
+					<MicrosoftColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a class="!shadow-none" :href="getAuthUrl('discord', redirectTarget)">
+					<DiscordColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
+				</a>
+			</ButtonStyled>
+			<template v-if="showOtherOptions">
+				<ButtonStyled>
+					<a class="!shadow-none" :href="getAuthUrl('github', redirectTarget)">
+						<GitHubColorIcon />
+						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a class="!shadow-none" :href="getAuthUrl('gitlab', redirectTarget)">
+						<GitLabColorIcon />
+						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a class="!shadow-none" :href="getAuthUrl('steam', redirectTarget)">
+						<SteamColorIcon />
+						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
+					</a>
+				</ButtonStyled>
+			</template>
+			<button
+				class="mx-auto -mb-3 bg-transparent pt-1 text-center text-base font-semibold text-secondary transition-all hover:text-primary"
+				@click="onToggleOtherOptions()"
+			>
+				{{
+					showOtherOptions
+						? formatMessage(messages.showFewerOptions)
+						: formatMessage(messages.showOtherOptions)
+				}}
+			</button>
+		</section>
+
+		<div class="h-px w-full bg-surface-5"></div>
+
+		<section class="flex flex-col gap-2.5">
+			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
+			<StyledInput
+				id="email"
+				v-model="emailModel"
+				:icon="MailIcon"
+				type="email"
+				autocomplete="email"
+				:placeholder="formatMessage(commonMessages.emailLabel)"
+				wrapper-class="w-full"
+			/>
+
+			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
+			<StyledInput
+				id="password"
+				v-model="passwordModel"
+				:icon="KeyIcon"
+				type="password"
+				autocomplete="new-password"
+				:placeholder="formatMessage(commonMessages.passwordLabel)"
+				wrapper-class="w-full"
+			/>
+
+			<Checkbox
+				v-model="subscribeModel"
+				class="subscribe-btn"
+				:label="formatMessage(messages.subscribeLabel)"
+				:description="formatMessage(messages.subscribeLabel)"
+			/>
+
+			<p v-if="!routeQuery.launcher">
+				<IntlFormatted :message-id="messages.legalDisclaimer">
+					<template #terms-link="{ children }">
+						<NuxtLink to="/legal/terms" class="text-link">
+							<component :is="() => children" />
+						</NuxtLink>
+					</template>
+					<template #privacy-policy-link="{ children }">
+						<NuxtLink to="/legal/privacy" class="text-link">
+							<component :is="() => children" />
+						</NuxtLink>
+					</template>
+				</IntlFormatted>
+			</p>
+
+			<HCaptcha
+				v-if="globals?.captcha_enabled && emailModel && passwordModel"
+				:ref="onSetCaptchaRef"
+				v-model="tokenModel"
+			/>
+
+			<ButtonStyled color="brand">
+				<button
+					class="!w-full"
+					:disabled="globals?.captcha_enabled ? !tokenModel : false"
+					@click="onCreateAccount()"
+				>
+					{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+				</button>
+			</ButtonStyled>
+
+			<div class="auth-form__additional-options">
+				{{ formatMessage(messages.alreadyHaveAccountLabel) }}
+				<NuxtLink
+					class="text-link"
+					:to="{
+						path: '/auth/sign-in',
+						query: routeQuery,
+					}"
+				>
+					{{ formatMessage(commonMessages.signInButton) }}
+				</NuxtLink>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup>
+import {
+	DiscordColorIcon,
+	GitHubColorIcon,
+	GitLabColorIcon,
+	GoogleColorIcon,
+	KeyIcon,
+	MailIcon,
+	MicrosoftColorIcon,
+	RightArrowIcon,
+	SteamColorIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
+import { getAuthUrl } from '@/composables/auth.ts'
+
+const props = defineProps({
+	redirectTarget: {
+		type: String,
+		default: '',
+	},
+	showOtherOptions: {
+		type: Boolean,
+		default: false,
+	},
+	routeQuery: {
+		type: Object,
+		default: () => ({}),
+	},
+	globals: {
+		type: Object,
+		default: null,
+	},
+	email: {
+		type: String,
+		default: '',
+	},
+	password: {
+		type: String,
+		default: '',
+	},
+	token: {
+		type: String,
+		default: '',
+	},
+	subscribe: {
+		type: Boolean,
+		default: false,
+	},
+	onToggleOtherOptions: {
+		type: Function,
+		default: () => {},
+	},
+	onCreateAccount: {
+		type: Function,
+		default: () => {},
+	},
+	onSetCaptchaRef: {
+		type: Function,
+		default: undefined,
+	},
+})
+
+const emit = defineEmits(['update:email', 'update:password', 'update:token', 'update:subscribe'])
+
+const emailModel = computed({
+	get: () => props.email,
+	set: (value) => emit('update:email', value),
+})
+
+const passwordModel = computed({
+	get: () => props.password,
+	set: (value) => emit('update:password', value),
+})
+
+const tokenModel = computed({
+	get: () => props.token,
+	set: (value) => emit('update:token', value),
+})
+
+const subscribeModel = computed({
+	get: () => props.subscribe,
+	set: (value) => emit('update:subscribe', value),
+})
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	signUpWithTitle: {
+		id: 'auth.sign-up.title.sign-up-with',
+		defaultMessage: 'Create an Account',
+	},
+	continueWithProvider: {
+		id: 'auth.continue-with-provider',
+		defaultMessage: 'Continue with {provider}',
+	},
+	subscribeLabel: {
+		id: 'auth.sign-up.subscribe.label',
+		defaultMessage: 'Subscribe to updates about Modrinth',
+	},
+	legalDisclaimer: {
+		id: 'auth.sign-up.legal-dislaimer',
+		defaultMessage:
+			"By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
+	},
+	alreadyHaveAccountLabel: {
+		id: 'auth.sign-up.sign-in-option.title',
+		defaultMessage: 'Already have an account?',
+	},
+	continueWithEmail: {
+		id: 'auth.sign-up.continue-with-email',
+		defaultMessage: 'Continue with Email',
+	},
+	showFewerOptions: {
+		id: 'auth.sign-up.show-fewer-options',
+		defaultMessage: 'Show fewer options',
+	},
+	showOtherOptions: {
+		id: 'auth.sign-up.show-other-options',
+		defaultMessage: 'Show other options',
+	},
+})
+</script>
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 365a9063f5..594b08de89 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -76,7 +76,7 @@ import {
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 
-import HCaptcha from '@/components/ui/HCaptcha.vue'
+import HCaptcha from '@/components/ui/auth/HCaptcha.vue'
 
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index dbf4fb8878..7697c66ae8 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -1,177 +1,32 @@
 <template>
-	<div v-if="subtleLauncherRedirectUri">
-		<iframe
-			:src="subtleLauncherRedirectUri"
-			class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
-		></iframe>
-	</div>
-	<div v-else c>
-		<template v-if="flow && !subtleLauncherRedirectUri">
-			<label for="two-factor-code">
-				<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
-				<span class="label__description">
-					{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
-				</span>
-			</label>
-			<StyledInput
-				id="two-factor-code"
-				v-model="twoFactorCode"
-				:maxlength="11"
-				inputmode="numeric"
-				:placeholder="formatMessage(messages.twoFactorCodeInputPlaceholder)"
-				autocomplete="one-time-code"
-				@keyup.enter="begin2FASignIn"
-			/>
-
-			<button class="btn btn-primary continue-btn" @click="begin2FASignIn">
-				{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
-			</button>
-		</template>
-		<template v-else>
-			<div class="flex flex-col gap-6">
-				<div class="text-center text-2xl font-semibold text-contrast">
-					{{ formatMessage(messages.signInWithLabel) }}
-				</div>
-
-				<section class="flex flex-col gap-2.5">
-					<ButtonStyled>
-						<a class="!shadow-none" :href="getAuthUrl('google', redirectTarget)">
-							<GoogleColorIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
-						</a>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a class="!shadow-none" :href="getAuthUrl('microsoft', redirectTarget)">
-							<MicrosoftColorIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
-						</a>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a class="!shadow-none" :href="getAuthUrl('discord', redirectTarget)">
-							<DiscordColorIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
-						</a>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a class="!shadow-none" :href="getAuthUrl('github', redirectTarget)">
-							<GitHubColorIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
-						</a>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a class="!shadow-none" :href="getAuthUrl('gitlab', redirectTarget)">
-							<GitLabColorIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
-						</a>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a class="!shadow-none" :href="getAuthUrl('steam', redirectTarget)">
-							<SteamColorIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
-						</a>
-					</ButtonStyled>
-				</section>
-
-				<div class="h-px w-full bg-surface-5"></div>
-
-				<section class="auth-form">
-					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-					<StyledInput
-						id="email"
-						v-model="email"
-						:icon="MailIcon"
-						type="text"
-						inputmode="email"
-						autocomplete="username"
-						:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
-						wrapper-class="w-full"
-					/>
-
-					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<StyledInput
-						id="password"
-						v-model="password"
-						:icon="KeyIcon"
-						type="password"
-						autocomplete="current-password"
-						:placeholder="formatMessage(commonMessages.passwordLabel)"
-						wrapper-class="w-full"
-					/>
-
-					<HCaptcha
-						v-if="globals?.captcha_enabled && email && password"
-						ref="captcha"
-						v-model="token"
-					/>
-
-					<ButtonStyled color="brand">
-						<button
-							class="!w-full"
-							:disabled="globals?.captcha_enabled ? !token : false"
-							@click="beginPasswordSignIn()"
-						>
-							{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
-						</button>
-					</ButtonStyled>
-
-					<div class="auth-form__additional-options !text-base">
-						<IntlFormatted :message-id="messages.additionalOptionsLabel">
-							<template #forgot-password-link="{ children }">
-								<NuxtLink
-									class="text-link"
-									:to="{
-										path: '/auth/reset-password',
-										query: route.query,
-									}"
-								>
-									<component :is="() => children" />
-								</NuxtLink>
-							</template>
-							<template #create-account-link="{ children }">
-								<NuxtLink
-									class="inline text-link"
-									:to="{
-										path: '/auth/sign-up',
-										query: route.query,
-									}"
-								>
-									<component :is="() => children" />
-								</NuxtLink>
-							</template>
-						</IntlFormatted>
-					</div>
-				</section>
-			</div>
-		</template>
-	</div>
+	<SignInView
+		v-model:email="email"
+		v-model:password="password"
+		v-model:token="token"
+		v-model:two-factor-code="twoFactorCode"
+		:subtle-launcher-redirect-uri="subtleLauncherRedirectUri"
+		:flow="flow"
+		:redirect-target="redirectTarget"
+		:route-query="route.query"
+		:globals="globals"
+		:on-password-sign-in="beginPasswordSignIn"
+		:on-two-factor-sign-in="begin2FASignIn"
+		:on-set-captcha-ref="setCaptchaRef"
+	/>
 </template>
 
 <script setup>
 import {
-	DiscordColorIcon,
-	GitHubColorIcon,
-	GitLabColorIcon,
-	GoogleColorIcon,
-	KeyIcon,
-	MailIcon,
-	MicrosoftColorIcon,
-	RightArrowIcon,
-	SteamColorIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
-import HCaptcha from '@/components/ui/HCaptcha.vue'
-import { getAuthUrl, getLauncherRedirectUrl } from '@/composables/auth.js'
+import SignInView from '@/components/ui/auth/SignIn.vue'
+import { getLauncherRedirectUrl } from '@/composables/auth.ts'
 
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
@@ -179,43 +34,10 @@ const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	additionalOptionsLabel: {
-		id: 'auth.sign-in.additional-options',
-		defaultMessage:
-			"<forgot-password-link>Forgot password</forgot-password-link> • Don't have an account? <create-account-link>Sign up</create-account-link>",
-	},
-	signInWithLabel: {
-		id: 'auth.sign-in.sign-in-with',
-		defaultMessage: 'Sign into Modrinth',
-	},
 	signInTitle: {
 		id: 'auth.sign-in.title',
 		defaultMessage: 'Sign In',
 	},
-	twoFactorCodeInputPlaceholder: {
-		id: 'auth.sign-in.2fa.placeholder',
-		defaultMessage: 'Enter code...',
-	},
-	twoFactorCodeLabel: {
-		id: 'auth.sign-in.2fa.label',
-		defaultMessage: 'Enter two-factor code',
-	},
-	twoFactorCodeLabelDescription: {
-		id: 'auth.sign-in.2fa.description',
-		defaultMessage: 'Please enter a two-factor code to proceed.',
-	},
-	usePasswordLabel: {
-		id: 'auth.sign-in.use-password',
-		defaultMessage: 'Or use a password',
-	},
-	continueWithProvider: {
-		id: 'auth.continue-with-provider',
-		defaultMessage: 'Continue with {provider}',
-	},
-	continueWithEmail: {
-		id: 'auth.sign-in.continue-with-email',
-		defaultMessage: 'Continue with Email',
-	},
 })
 
 useHead({
@@ -239,6 +61,9 @@ if (auth.value.user) {
 }
 
 const captcha = ref()
+const setCaptchaRef = (captchaRef) => {
+	captcha.value = captchaRef
+}
 
 const { data: globals } = useQuery({
 	queryKey: ['auth-globals'],
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index 8cff268728..5e18477b15 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -1,182 +1,30 @@
 <template>
-	<div class="flex flex-col gap-6">
-		<div class="text-center text-2xl font-semibold text-contrast">{{ formatMessage(messages.signUpWithTitle) }}</div>
-		<section class="flex flex-col gap-2.5">
-			<ButtonStyled>
-				<a class="!shadow-none" :href="getAuthUrl('google', redirectTarget)">
-					<GoogleColorIcon />
-					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a class="!shadow-none" :href="getAuthUrl('microsoft', redirectTarget)">
-					<MicrosoftColorIcon />
-					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a class="!shadow-none" :href="getAuthUrl('discord', redirectTarget)">
-					<DiscordColorIcon />
-					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
-				</a>
-			</ButtonStyled>
-			<template v-if="showOtherOptions">
-				<ButtonStyled>
-					<a class="!shadow-none" :href="getAuthUrl('github', redirectTarget)">
-						<GitHubColorIcon />
-						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a class="!shadow-none" :href="getAuthUrl('gitlab', redirectTarget)">
-						<GitLabColorIcon />
-						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a class="!shadow-none" :href="getAuthUrl('steam', redirectTarget)">
-						<SteamColorIcon />
-						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
-					</a>
-				</ButtonStyled>
-			</template>
-			<button
-				class="mx-auto -mb-3 bg-transparent pt-1 text-center text-base font-semibold text-secondary transition-all hover:text-primary"
-				@click="showOtherOptions = !showOtherOptions"
-			>
-				{{ showOtherOptions ? formatMessage(messages.showFewerOptions) : formatMessage(messages.showOtherOptions) }}
-			</button>
-		</section>
-
-		<div class="h-px w-full bg-surface-5"></div>
-
-		<section class="flex flex-col gap-2.5">
-			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
-			<StyledInput
-				id="email"
-				v-model="email"
-				:icon="MailIcon"
-				type="email"
-				autocomplete="username"
-				:placeholder="formatMessage(commonMessages.emailLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<label for="username" hidden>{{ formatMessage(commonMessages.usernameLabel) }}</label>
-			<StyledInput
-				id="username"
-				v-model="username"
-				:icon="UserIcon"
-				type="text"
-				autocomplete="username"
-				:placeholder="formatMessage(commonMessages.usernameLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-			<StyledInput
-				id="password"
-				v-model="password"
-				:icon="KeyIcon"
-				type="password"
-				autocomplete="new-password"
-				:placeholder="formatMessage(commonMessages.passwordLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<label for="confirm-password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-			<StyledInput
-				id="confirm-password"
-				v-model="confirmPassword"
-				:icon="KeyIcon"
-				type="password"
-				autocomplete="new-password"
-				:placeholder="formatMessage(commonMessages.confirmPasswordLabel)"
-				wrapper-class="w-full"
-			/>
-
-			<Checkbox
-				v-model="subscribe"
-				class="subscribe-btn"
-				:label="formatMessage(messages.subscribeLabel)"
-				:description="formatMessage(messages.subscribeLabel)"
-			/>
-
-			<p v-if="!route.query.launcher">
-				<IntlFormatted :message-id="messages.legalDisclaimer">
-					<template #terms-link="{ children }">
-						<NuxtLink to="/legal/terms" class="text-link">
-							<component :is="() => children" />
-						</NuxtLink>
-					</template>
-					<template #privacy-policy-link="{ children }">
-						<NuxtLink to="/legal/privacy" class="text-link">
-							<component :is="() => children" />
-						</NuxtLink>
-					</template>
-				</IntlFormatted>
-			</p>
-
-			<HCaptcha
-				v-if="globals?.captcha_enabled && email && password && confirmPassword && username"
-				ref="captcha"
-				v-model="token"
-			/>
-
-			<ButtonStyled color="brand">
-				<button
-					class="!w-full"
-					:disabled="globals?.captcha_enabled ? !token : false"
-					@click="createAccount"
-				>
-					{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
-				</button>
-			</ButtonStyled>
-
-			<div class="auth-form__additional-options">
-				{{ formatMessage(messages.alreadyHaveAccountLabel) }}
-				<NuxtLink
-					class="text-link"
-					:to="{
-						path: '/auth/sign-in',
-						query: route.query,
-					}"
-				>
-					{{ formatMessage(commonMessages.signInButton) }}
-				</NuxtLink>
-			</div>
-		</section>
-	</div>
+	<SignUpView
+		v-model:email="email"
+		v-model:password="password"
+		v-model:token="token"
+		v-model:subscribe="subscribe"
+		:redirect-target="redirectTarget"
+		:show-other-options="showOtherOptions"
+		:route-query="route.query"
+		:globals="globals"
+		:on-toggle-other-options="toggleOtherOptions"
+		:on-create-account="createAccount"
+		:on-set-captcha-ref="setCaptchaRef"
+	/>
 </template>
 
 <script setup>
 import {
-	DiscordColorIcon,
-	GitHubColorIcon,
-	GitLabColorIcon,
-	GoogleColorIcon,
-	KeyIcon,
-	MailIcon,
-	MicrosoftColorIcon,
-	RightArrowIcon,
-	SteamColorIcon,
-	UserIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 
-import HCaptcha from '@/components/ui/HCaptcha.vue'
-import { getAuthUrl } from '@/composables/auth.js'
+import SignUpView from '@/components/ui/auth/SignUp.vue'
 
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
@@ -187,43 +35,6 @@ const messages = defineMessages({
 		id: 'auth.sign-up.title',
 		defaultMessage: 'Sign Up',
 	},
-	signUpWithTitle: {
-		id: 'auth.sign-up.title.sign-up-with',
-		defaultMessage: 'Create an Account',
-	},
-	subscribeLabel: {
-		id: 'auth.sign-up.subscribe.label',
-		defaultMessage: 'Subscribe to updates about Modrinth',
-	},
-	legalDisclaimer: {
-		id: 'auth.sign-up.legal-dislaimer',
-		defaultMessage:
-			"By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
-	},
-	createAccountButton: {
-		id: 'auth.sign-up.action.create-account',
-		defaultMessage: 'Create account',
-	},
-	alreadyHaveAccountLabel: {
-		id: 'auth.sign-up.sign-in-option.title',
-		defaultMessage: 'Already have an account?',
-	},
-	continueWithProvider: {
-		id: 'auth.continue-with-provider',
-		defaultMessage: 'Continue with {provider}',
-	},
-	continueWithEmail: {
-		id: 'auth.sign-up.continue-with-email',
-		defaultMessage: 'Continue with Email',
-	},
-	showFewerOptions: {
-		id: 'auth.sign-up.show-fewer-options',
-		defaultMessage: 'Show fewer options',
-	},
-	showOtherOptions: {
-		id: 'auth.sign-up.show-other-options',
-		defaultMessage: 'Show other options',
-	},
 })
 
 useHead({
@@ -241,6 +52,12 @@ if (auth.value.user) {
 }
 
 const captcha = ref()
+const setCaptchaRef = (captchaRef) => {
+	captcha.value = captchaRef
+}
+const toggleOtherOptions = () => {
+	showOtherOptions.value = !showOtherOptions.value
+}
 
 const { data: globals } = useQuery({
 	queryKey: ['auth-globals'],
@@ -255,29 +72,25 @@ const { data: globals } = useQuery({
 })
 
 const email = ref('')
-const username = ref('')
 const password = ref('')
-const confirmPassword = ref('')
 const token = ref('')
 const subscribe = ref(false)
 
+function generateUsernameFromEmail(emailAddress) {
+	const [localPart = '', domainPart = ''] = emailAddress.trim().toLowerCase().split('@')
+	const sanitized = `${localPart}_${domainPart}`
+		.replace(/[^a-zA-Z0-9_-]/g, '_')
+		.replace(/_+/g, '_')
+		.replace(/^_+|_+$/g, '')
+
+	return (sanitized || 'user').slice(0, 39)
+}
+
 async function createAccount() {
 	startLoading()
 	try {
-		if (confirmPassword.value !== password.value) {
-			addNotification({
-				title: formatMessage(commonMessages.errorNotificationTitle),
-				text: formatMessage({
-					id: 'auth.sign-up.notification.password-mismatch.text',
-					defaultMessage: 'Passwords do not match!',
-				}),
-				type: 'error',
-			})
-			captcha.value?.reset()
-		}
-
 		const res = await client.labrinth.auth_v2.createAccount({
-			username: username.value,
+			username: generateUsernameFromEmail(email.value),
 			password: password.value,
 			email: email.value,
 			challenge: token.value,