From 5416198c329817cbd63305c5755a905d63f1fa64 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 30 Sep 2024 18:19:44 +0900
Subject: [PATCH 01/32] wip

---
 .../src/server/api/SigninApiService.ts        | 37 +++++++++++++++++++
 packages/frontend/src/components/MkSignin.vue | 13 +++++++
 2 files changed, 50 insertions(+)

diff --git a/packages/backend/src/server/api/SigninApiService.ts b/packages/backend/src/server/api/SigninApiService.ts
index edac9b3beb62..2ccc75da00cc 100644
--- a/packages/backend/src/server/api/SigninApiService.ts
+++ b/packages/backend/src/server/api/SigninApiService.ts
@@ -9,6 +9,7 @@ import * as OTPAuth from 'otpauth';
 import { IsNull } from 'typeorm';
 import { DI } from '@/di-symbols.js';
 import type {
+	MiMeta,
 	SigninsRepository,
 	UserProfilesRepository,
 	UsersRepository,
@@ -20,6 +21,8 @@ import { IdService } from '@/core/IdService.js';
 import { bindThis } from '@/decorators.js';
 import { WebAuthnService } from '@/core/WebAuthnService.js';
 import { UserAuthService } from '@/core/UserAuthService.js';
+import { CaptchaService } from '@/core/CaptchaService.js';
+import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
 import { RateLimiterService } from './RateLimiterService.js';
 import { SigninService } from './SigninService.js';
 import type { AuthenticationResponseJSON } from '@simplewebauthn/types';
@@ -31,6 +34,9 @@ export class SigninApiService {
 		@Inject(DI.config)
 		private config: Config,
 
+		@Inject(DI.meta)
+		private meta: MiMeta,
+
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,
 
@@ -45,6 +51,7 @@ export class SigninApiService {
 		private signinService: SigninService,
 		private userAuthService: UserAuthService,
 		private webAuthnService: WebAuthnService,
+		private captchaService: CaptchaService,
 	) {
 	}
 
@@ -56,6 +63,10 @@ export class SigninApiService {
 				password: string;
 				token?: string;
 				credential?: AuthenticationResponseJSON;
+				'hcaptcha-response'?: string;
+				'g-recaptcha-response'?: string;
+				'turnstile-response'?: string;
+				'm-captcha-response'?: string;
 			};
 		}>,
 		reply: FastifyReply,
@@ -139,6 +150,32 @@ export class SigninApiService {
 		};
 
 		if (!profile.twoFactorEnabled) {
+			if (process.env.NODE_ENV !== 'test') {
+				if (this.meta.enableHcaptcha && this.meta.hcaptchaSecretKey) {
+					await this.captchaService.verifyHcaptcha(this.meta.hcaptchaSecretKey, body['hcaptcha-response']).catch(err => {
+						throw new FastifyReplyError(400, err);
+					});
+				}
+
+				if (this.meta.enableMcaptcha && this.meta.mcaptchaSecretKey && this.meta.mcaptchaSitekey && this.meta.mcaptchaInstanceUrl) {
+					await this.captchaService.verifyMcaptcha(this.meta.mcaptchaSecretKey, this.meta.mcaptchaSitekey, this.meta.mcaptchaInstanceUrl, body['m-captcha-response']).catch(err => {
+						throw new FastifyReplyError(400, err);
+					});
+				}
+
+				if (this.meta.enableRecaptcha && this.meta.recaptchaSecretKey) {
+					await this.captchaService.verifyRecaptcha(this.meta.recaptchaSecretKey, body['g-recaptcha-response']).catch(err => {
+						throw new FastifyReplyError(400, err);
+					});
+				}
+
+				if (this.meta.enableTurnstile && this.meta.turnstileSecretKey) {
+					await this.captchaService.verifyTurnstile(this.meta.turnstileSecretKey, body['turnstile-response']).catch(err => {
+						throw new FastifyReplyError(400, err);
+					});
+				}
+			}
+
 			if (same) {
 				return this.signinService.signin(request, reply, user);
 			} else {
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 7942a84d66f3..6880d7802649 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -32,6 +32,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #prefix><i class="ti ti-lock"></i></template>
 				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
 			</MkInput>
+			<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
+			<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
+			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
+			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 			<MkButton type="submit" large primary rounded :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
 		</div>
 		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
@@ -85,6 +89,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
 import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
 
 const signing = ref(false);
 const user = ref<Misskey.entities.UserDetailed | null>(null);
@@ -98,6 +103,10 @@ const isBackupCode = ref(false);
 const queryingKey = ref(false);
 let credentialRequest: CredentialRequestOptions | null = null;
 const passkey_context = ref('');
+const hCaptchaResponse = ref<string | null>(null);
+const mCaptchaResponse = ref<string | null>(null);
+const reCaptchaResponse = ref<string | null>(null);
+const turnstileResponse = ref<string | null>(null);
 
 const emit = defineEmits<{
 	(ev: 'login', v: any): void;
@@ -227,6 +236,10 @@ function onSubmit(): void {
 		misskeyApi('signin', {
 			username: username.value,
 			password: password.value,
+			'hcaptcha-response': hCaptchaResponse.value,
+			'm-captcha-response': mCaptchaResponse.value,
+			'g-recaptcha-response': reCaptchaResponse.value,
+			'turnstile-response': turnstileResponse.value,
 			token: user.value?.twoFactorEnabled ? token.value : undefined,
 		}).then(res => {
 			emit('login', res);

From a3fe00d2040c9e57b2d593d38bf1d495aabba10b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 30 Sep 2024 19:31:40 +0900
Subject: [PATCH 02/32] Update MkSignin.vue

---
 packages/frontend/src/components/MkSignin.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 6880d7802649..546e58432e7b 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -90,6 +90,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import MkCaptcha, { type Captcha } from '@/components/MkCaptcha.vue';
 
 const signing = ref(false);
 const user = ref<Misskey.entities.UserDetailed | null>(null);

From 459784843836bf3a47a3038c548bb24e43dadaef Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:21:29 +0900
Subject: [PATCH 03/32] Update MkSignin.vue

---
 packages/frontend/src/components/MkSignin.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 546e58432e7b..f6da2db76f21 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
 			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
-			<MkButton type="submit" large primary rounded :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
+			<MkButton type="submit" large primary rounded :disabled="captchaFailed || signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
 		</div>
 		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
 			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
@@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 import { toUnicode } from 'punycode/';
 import * as Misskey from 'misskey-js';
 import { supported as webAuthnSupported, get as webAuthnRequest, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
@@ -109,6 +109,14 @@ const mCaptchaResponse = ref<string | null>(null);
 const reCaptchaResponse = ref<string | null>(null);
 const turnstileResponse = ref<string | null>(null);
 
+const captchaFailed = computed((): boolean => {
+	return (
+		instance.enableHcaptcha && !hCaptchaResponse.value ||
+		instance.enableMcaptcha && !mCaptchaResponse.value ||
+		instance.enableRecaptcha && !reCaptchaResponse.value ||
+		instance.enableTurnstile && !turnstileResponse.value);
+});
+
 const emit = defineEmits<{
 	(ev: 'login', v: any): void;
 }>();

From af7fc7cdafc1726f5856c29f48f26dbd3761dfd9 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:49:43 +0900
Subject: [PATCH 04/32] wip

---
 packages/frontend/src/components/MkSignin.vue            | 9 +++++++++
 packages/frontend/src/components/MkSignupDialog.form.vue | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index f6da2db76f21..8ebdac0220a7 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -104,6 +104,10 @@ const isBackupCode = ref(false);
 const queryingKey = ref(false);
 let credentialRequest: CredentialRequestOptions | null = null;
 const passkey_context = ref('');
+const hcaptcha = ref<Captcha | undefined>();
+const mcaptcha = ref<Captcha | undefined>();
+const recaptcha = ref<Captcha | undefined>();
+const turnstile = ref<Captcha | undefined>();
 const hCaptchaResponse = ref<string | null>(null);
 const mCaptchaResponse = ref<string | null>(null);
 const reCaptchaResponse = ref<string | null>(null);
@@ -258,6 +262,11 @@ function onSubmit(): void {
 }
 
 function loginFailed(err: any): void {
+	hcaptcha.value?.reset?.();
+	mcaptcha.value?.reset?.();
+	recaptcha.value?.reset?.();
+	turnstile.value?.reset?.();
+
 	switch (err.id) {
 		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
 			os.alert({
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index 4ab4380ad503..38cac7f644d4 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/packages/frontend/src/components/MkSignupDialog.form.vue
@@ -81,10 +81,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import { toUnicode } from 'punycode/';
 import * as Misskey from 'misskey-js';
+import * as config from '@@/js/config.js';
 import MkButton from './MkButton.vue';
 import MkInput from './MkInput.vue';
 import MkCaptcha, { type Captcha } from '@/components/MkCaptcha.vue';
-import * as config from '@@/js/config.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
@@ -105,6 +105,7 @@ const emit = defineEmits<{
 const host = toUnicode(config.host);
 
 const hcaptcha = ref<Captcha | undefined>();
+const mcaptcha = ref<Captcha | undefined>();
 const recaptcha = ref<Captcha | undefined>();
 const turnstile = ref<Captcha | undefined>();
 
@@ -281,6 +282,7 @@ async function onSubmit(): Promise<void> {
 	} catch {
 		submitting.value = false;
 		hcaptcha.value?.reset?.();
+		mcaptcha.value?.reset?.();
 		recaptcha.value?.reset?.();
 		turnstile.value?.reset?.();
 

From 087b34b5566526f6b22c378fe29c866f0e3eca69 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:51:41 +0900
Subject: [PATCH 05/32] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db969a63c261..5c5dc980df00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 ## Unreleased
 
 ### General
--
+- Enhance: セキュリティ向上のため、サインイン時もCAPTCHAを求めるようになりました
 
 ### Client
 -

From 80d068c7325ccad1c4fc104a69d3f62d66d6f1fd Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 22:57:14 +0900
Subject: [PATCH 06/32] =?UTF-8?q?enhance(frontend):=20=E3=82=B5=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=82=A4=E3=83=B3=E7=94=BB=E9=9D=A2=E3=81=AE=E6=94=B9?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/basic.cy.ts                       |  14 +-
 cypress/support/commands.ts                   |   4 +-
 locales/index.d.ts                            |   4 +
 locales/ja-JP.yml                             |   1 +
 .../src/components/MkSignin.input.vue         | 197 +++++++
 .../src/components/MkSignin.passkey.vue       |  89 +++
 .../src/components/MkSignin.password.vue      | 150 +++++
 .../frontend/src/components/MkSignin.totp.vue |  69 +++
 packages/frontend/src/components/MkSignin.vue | 549 ++++++++----------
 packages/misskey-js/src/autogen/types.ts      |   5 +
 10 files changed, 782 insertions(+), 300 deletions(-)
 create mode 100644 packages/frontend/src/components/MkSignin.input.vue
 create mode 100644 packages/frontend/src/components/MkSignin.passkey.vue
 create mode 100644 packages/frontend/src/components/MkSignin.password.vue
 create mode 100644 packages/frontend/src/components/MkSignin.totp.vue

diff --git a/cypress/e2e/basic.cy.ts b/cypress/e2e/basic.cy.ts
index d2525e0a7d05..497142de66b5 100644
--- a/cypress/e2e/basic.cy.ts
+++ b/cypress/e2e/basic.cy.ts
@@ -122,8 +122,13 @@ describe('After user signup', () => {
 		cy.intercept('POST', '/api/signin').as('signin');
 
 		cy.get('[data-cy-signin]').click();
-		cy.get('[data-cy-signin-username] input').type('alice');
-		// Enterキーでサインインできるかの確認も兼ねる
+
+		cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
+		// Enterキーで続行できるかの確認も兼ねる
+		cy.get('[data-cy-signin-username] input').type('alice{enter}');
+
+		cy.get('[data-cy-signin-page-password]').should('be.visible', { timeout: 10000 });
+		// Enterキーで続行できるかの確認も兼ねる
 		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
 
 		cy.wait('@signin');
@@ -137,8 +142,9 @@ describe('After user signup', () => {
 
 		cy.visitHome();
 
-		cy.get('[data-cy-signin]').click();
-		cy.get('[data-cy-signin-username] input').type('alice');
+		cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
+		cy.get('[data-cy-signin-username] input').type('alice{enter}');
+		cy.get('[data-cy-signin-page-password]').should('be.visible', { timeout: 10000 });
 		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
 
 		// TODO: cypressにブラウザの言語指定できる機能が実装され次第英語のみテストするようにする
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 281f2e6ccdd8..c3e5d60bfba0 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -57,7 +57,9 @@ Cypress.Commands.add('login', (username, password) => {
 	cy.intercept('POST', '/api/signin').as('signin');
 
 	cy.get('[data-cy-signin]').click();
-	cy.get('[data-cy-signin-username] input').type(username);
+	cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
+	cy.get('[data-cy-signin-username] input').type(`${username}{enter}`);
+	cy.get('[data-cy-signin-page-password]').should('be.visible', { timeout: 10000 });
 	cy.get('[data-cy-signin-password] input').type(`${password}{enter}`);
 
 	cy.wait('@signin').as('signedIn');
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 32c5a2164856..81d2bbd9a411 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -3700,6 +3700,10 @@ export interface Locale extends ILocale {
      * パスワードが間違っています。
      */
     "incorrectPassword": string;
+    /**
+     * ワンタイムパスワードが間違っているか、期限切れになっています。
+     */
+    "incorrectTotp": string;
     /**
      * 「{choice}」に投票しますか？
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index eebc4c995fc4..c75369f00a5a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -921,6 +921,7 @@ followersVisibility: "フォロワーの公開範囲"
 continueThread: "さらにスレッドを見る"
 deleteAccountConfirm: "アカウントが削除されます。よろしいですか？"
 incorrectPassword: "パスワードが間違っています。"
+incorrectTotp: "ワンタイムパスワードが間違っているか、期限切れになっています。"
 voteConfirm: "「{choice}」に投票しますか？"
 hide: "隠す"
 useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
new file mode 100644
index 000000000000..e12caf26c880
--- /dev/null
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -0,0 +1,197 @@
+<template>
+<div :class="$style.wrapper" data-cy-signin-page-input>
+	<div class="_gaps" :class="$style.root">
+		<div :class="$style.avatar" :style="{ marginBottom: message ? '1.5em' : undefined }">
+			<i class="ti ti-user"></i>
+		</div>
+
+		<!-- ログイン画面メッセージ -->
+		<MkInfo v-if="message">
+			{{ message }}
+		</MkInfo>
+
+		<!-- 外部サーバーへの転送 -->
+		<div v-if="openOnRemote" class="_gaps_m">
+			<div class="_gaps_s">
+				<MkButton type="button" rounded primary style="margin: 0 auto;" @click="openRemote(openOnRemote)">
+					{{ i18n.ts.continueOnRemote }} <i class="ti ti-external-link"></i>
+				</MkButton>
+				<button type="button" class="_button" :class="$style.instanceManualSelectButton" @click="specifyHostAndOpenRemote(openOnRemote)">
+					{{ i18n.ts.specifyServerHost }}
+				</button>
+			</div>
+			<div :class="$style.orHr">
+				<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
+			</div>
+		</div>
+
+		<!-- username入力 -->
+		<form class="_gaps_s" @submit.prevent="emit('usernameSubmitted', username)">
+			<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username>
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
+			</MkInput>
+			<MkButton type="submit" large primary rounded style="margin: 0 auto;" data-cy-signin-page-input-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+		</form>
+
+		<!-- パスワードレスログイン -->
+		<div :class="$style.orHr">
+			<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
+		</div>
+		<div>
+			<MkButton type="submit" style="margin: auto auto;" rounded primary @click="emit('passkeyClick', $event)">
+				<i class="ti ti-device-usb" style="font-size: medium;"></i>{{ i18n.ts.signinWithPasskey }}
+			</MkButton>
+		</div>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { toUnicode } from 'punycode/';
+
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+
+import { query, extractDomain } from '@@/js/url.js';
+import { host as configHost } from '@@/js/config.js';
+
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkInfo from '@/components/MkInfo.vue';
+
+import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
+
+const props = withDefaults(defineProps<{
+	message?: string,
+	openOnRemote?: OpenOnRemoteOptions,
+}>(), {
+	message: '',
+	openOnRemote: undefined,
+});
+
+const emit = defineEmits<{
+	(ev: 'usernameSubmitted', v: string): void;
+	(ev: 'passkeyClick', v: MouseEvent): void;
+}>();
+
+const host = toUnicode(configHost);
+
+const username = ref('');
+
+//#region Open on remote
+function openRemote(options: OpenOnRemoteOptions, targetHost?: string): void {
+	switch (options.type) {
+		case 'web':
+		case 'lookup': {
+			let _path: string;
+
+			if (options.type === 'lookup') {
+				// TODO: v2024.7.0以降が浸透してきたら正式なURLに変更する▼
+				// _path = `/lookup?uri=${encodeURIComponent(_path)}`;
+				_path = `/authorize-follow?acct=${encodeURIComponent(options.url)}`;
+			} else {
+				_path = options.path;
+			}
+
+			if (targetHost) {
+				window.open(`https://${targetHost}${_path}`, '_blank', 'noopener');
+			} else {
+				window.open(`https://misskey-hub.net/mi-web/?path=${encodeURIComponent(_path)}`, '_blank', 'noopener');
+			}
+			break;
+		}
+		case 'share': {
+			const params = query(options.params);
+			if (targetHost) {
+				window.open(`https://${targetHost}/share?${params}`, '_blank', 'noopener');
+			} else {
+				window.open(`https://misskey-hub.net/share/?${params}`, '_blank', 'noopener');
+			}
+			break;
+		}
+	}
+}
+
+async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<void> {
+	const { canceled, result: hostTemp } = await os.inputText({
+		title: i18n.ts.inputHostName,
+		placeholder: 'misskey.example.com',
+	});
+
+	if (canceled) return;
+
+	let targetHost: string | null = hostTemp;
+
+	// ドメイン部分だけを取り出す
+	targetHost = extractDomain(targetHost ?? '');
+	if (targetHost == null) {
+		os.alert({
+			type: 'error',
+			title: i18n.ts.invalidValue,
+			text: i18n.ts.tryAgain,
+		});
+		return;
+	}
+	openRemote(options, targetHost);
+}
+//#endregion
+</script>
+
+<style lang="scss" module>
+.wrapper {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: 360px;
+
+	> .root {
+		width: 100%;
+	}
+}
+
+.avatar {
+	margin: 0 auto;
+	background-color: color-mix(in srgb, var(--fg), transparent 85%);
+	color: color-mix(in srgb, var(--fg), transparent 25%);
+	text-align: center;
+	height: 64px;
+	width: 64px;
+	font-size: 24px;
+	line-height: 64px;
+	border-radius: 50%;
+}
+
+.instanceManualSelectButton {
+	display: block;
+	text-align: center;
+	opacity: .7;
+	font-size: .8em;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.orHr {
+	position: relative;
+	margin: .4em auto;
+	width: 100%;
+	height: 1px;
+	background: var(--divider);
+}
+
+.orMsg {
+	position: absolute;
+	top: -.6em;
+	display: inline-block;
+	padding: 0 1em;
+	background: var(--panel);
+	font-size: 0.8em;
+	color: var(--fgOnPanel);
+	margin: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+</style>
diff --git a/packages/frontend/src/components/MkSignin.passkey.vue b/packages/frontend/src/components/MkSignin.passkey.vue
new file mode 100644
index 000000000000..febfdb5f993d
--- /dev/null
+++ b/packages/frontend/src/components/MkSignin.passkey.vue
@@ -0,0 +1,89 @@
+<template>
+<div :class="$style.wrapper">
+	<div class="_gaps" :class="$style.root">
+		<div class="_gaps_s">
+			<div :class="$style.passkeyIcon">
+				<i class="ti ti-fingerprint"></i>
+			</div>
+			<div :class="$style.passkeyDescription">{{ i18n.ts.useSecurityKey }}</div>
+		</div>
+
+		<MkButton large primary rounded :disabled="queryingKey" style="margin: 0 auto;" @click="queryKey">{{ i18n.ts.retry }}</MkButton>
+		
+		<MkButton v-if="isPerformingPasswordlessLogin !== true" transparent rounded :disabled="queryingKey" style="margin: 0 auto;" @click="emit('useTotp')">{{ i18n.ts.useTotp }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import { get as webAuthnRequest } from '@github/webauthn-json/browser-ponyfill';
+
+import { i18n } from '@/i18n.js';
+
+import MkButton from '@/components/MkButton.vue';
+
+import type { AuthenticationPublicKeyCredential } from '@github/webauthn-json/browser-ponyfill';
+
+const props = defineProps<{
+	user: Misskey.entities.UserDetailed;
+	credentialRequest: CredentialRequestOptions;
+	isPerformingPasswordlessLogin?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'done', credential: AuthenticationPublicKeyCredential): void;
+	(ev: 'useTotp'): void;
+}>();
+
+const queryingKey = ref(true);
+
+async function queryKey() {
+	queryingKey.value = true;
+	await webAuthnRequest(props.credentialRequest)
+		.catch(() => {
+			return Promise.reject(null);
+		})
+		.then((credential) => {
+			emit('done', credential);
+		})
+		.finally(() => {
+			queryingKey.value = false;
+		});
+}
+
+onMounted(() => {
+	queryKey();
+});
+</script>
+
+<style lang="scss" module>
+.wrapper {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: 360px;
+
+	> .root {
+		width: 100%;
+	}
+}
+
+.passkeyIcon {
+	margin: 0 auto;
+	background-color: var(--accentedBg);
+	color: var(--accent);
+	text-align: center;
+	height: 64px;
+	width: 64px;
+	font-size: 24px;
+	line-height: 64px;
+	border-radius: 50%;
+}
+
+.passkeyDescription {
+	text-align: center;
+	font-size: 1.1em;
+}
+</style>
diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
new file mode 100644
index 000000000000..13c93dd026a5
--- /dev/null
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -0,0 +1,150 @@
+<template>
+<div :class="$style.wrapper" data-cy-signin-page-password>
+	<div class="_gaps" :class="$style.root">
+		<div :class="$style.avatar" :style="{ backgroundImage: user ? `url('${user.avatarUrl}')` : undefined }"></div>
+		<div :class="$style.welcomeBackMessage">
+			<I18n :src="i18n.ts.welcomeBackWithName" tag="span">
+				<template #name><Mfm :text="user.name ?? user.username" :plain="true"/></template>
+			</I18n>
+		</div>
+
+		<!-- password入力 -->
+		<form class="_gaps_s" @submit.prevent="onSubmit">
+			<!-- ブラウザ オートコンプリート用 -->
+			<input type="hidden" name="username" autocomplete="username" :value="user.username">
+
+			<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required autofocus data-cy-signin-password>
+				<template #prefix><i class="ti ti-lock"></i></template>
+				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
+			</MkInput>
+
+			<div v-if="!user.twoFactorEnabled">
+				<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
+				<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
+				<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
+				<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
+			</div>
+
+			<MkButton type="submit" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+		</form>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+export type PwResponse = {
+	password: string;
+	captcha: {
+		hCaptchaResponse: string | null;
+		mCaptchaResponse: string | null;
+		reCaptchaResponse: string | null;
+		turnstileResponse: string | null;
+	};
+};
+</script>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkCaptcha from '@/components/MkCaptcha.vue';
+
+const props = defineProps<{
+	user: Misskey.entities.UserDetailed;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'passwordSubmitted', v: PwResponse): void;
+}>();
+
+const password = ref('');
+
+const hCaptchaResponse = ref<string | null>(null);
+const mCaptchaResponse = ref<string | null>(null);
+const reCaptchaResponse = ref<string | null>(null);
+const turnstileResponse = ref<string | null>(null);
+
+function resetPassword(): void {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
+		closed: () => dispose(),
+	});
+}
+
+function onSubmit() {
+	emit('passwordSubmitted', {
+		password: password.value,
+		captcha: {
+			hCaptchaResponse: hCaptchaResponse.value,
+			mCaptchaResponse: mCaptchaResponse.value,
+			reCaptchaResponse: reCaptchaResponse.value,
+			turnstileResponse: turnstileResponse.value,
+		},
+	});
+}
+</script>
+
+<style lang="scss" module>
+.wrapper {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: 360px;
+
+	> .root {
+		width: 100%;
+	}
+}
+
+.avatar {
+	margin: 0 auto 0 auto;
+	width: 64px;
+	height: 64px;
+	background: #ddd;
+	background-position: center;
+	background-size: cover;
+	border-radius: 100%;
+}
+
+.welcomeBackMessage {
+	text-align: center;
+	font-size: 1.1em;
+}
+
+.instanceManualSelectButton {
+	display: block;
+	text-align: center;
+	opacity: .7;
+	font-size: .8em;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.orHr {
+	position: relative;
+	margin: .4em auto;
+	width: 100%;
+	height: 1px;
+	background: var(--divider);
+}
+
+.orMsg {
+	position: absolute;
+	top: -.6em;
+	display: inline-block;
+	padding: 0 1em;
+	background: var(--panel);
+	font-size: 0.8em;
+	color: var(--fgOnPanel);
+	margin: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+</style>
diff --git a/packages/frontend/src/components/MkSignin.totp.vue b/packages/frontend/src/components/MkSignin.totp.vue
new file mode 100644
index 000000000000..cd2fa6323550
--- /dev/null
+++ b/packages/frontend/src/components/MkSignin.totp.vue
@@ -0,0 +1,69 @@
+<template>
+<div :class="$style.wrapper">
+	<div class="_gaps" :class="$style.root">
+		<div class="_gaps_s">
+			<div :class="$style.totpIcon">
+				<i class="ti ti-key"></i>
+			</div>
+			<div :class="$style.totpDescription">{{ i18n.ts['2fa'] }}</div>
+		</div>
+
+		<!-- totp入力 -->
+		<form class="_gaps_s" @submit.prevent="emit('totpSubmitted', token)">
+			<MkInput v-model="token" type="text" :pattern="isBackupCode ? '^[A-Z0-9]{32}$' :'^[0-9]{6}$'" autocomplete="one-time-code" required autofocus :spellcheck="false" :inputmode="isBackupCode ? undefined : 'numeric'">
+				<template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template>
+				<template #prefix><i v-if="isBackupCode" class="ti ti-key"></i><i v-else class="ti ti-123"></i></template>
+				<template #caption><button class="_textButton" type="button" @click="isBackupCode = !isBackupCode">{{ isBackupCode ? i18n.ts.useTotp : i18n.ts.useBackupCode }}</button></template>
+			</MkInput>
+
+			<MkButton type="submit" large primary rounded style="margin: 0 auto;">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+		</form>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { i18n } from '@/i18n.js';
+
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+
+const emit = defineEmits<{
+	(ev: 'totpSubmitted', token: string): void;
+}>();
+
+const token = ref('');
+const isBackupCode = ref(false);
+</script>
+
+<style lang="scss" module>
+.wrapper {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: 360px;
+
+	> .root {
+		width: 100%;
+	}
+}
+
+.totpIcon {
+	margin: 0 auto;
+	background-color: var(--accentedBg);
+	color: var(--accent);
+	text-align: center;
+	height: 64px;
+	width: 64px;
+	font-size: 24px;
+	line-height: 64px;
+	border-radius: 50%;
+}
+
+.totpDescription {
+	text-align: center;
+	font-size: 1.1em;
+}
+</style>
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 6880d7802649..39dc63d3d9a0 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -4,252 +4,266 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<form :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="_gaps_m">
-		<div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${user.avatarUrl}')` : undefined, marginBottom: message ? '1.5em' : undefined }"></div>
-		<MkInfo v-if="message">
-			{{ message }}
-		</MkInfo>
-		<div v-if="openOnRemote" class="_gaps_m">
-			<div class="_gaps_s">
-				<MkButton type="button" rounded primary style="margin: 0 auto;" @click="openRemote(openOnRemote)">
-					{{ i18n.ts.continueOnRemote }} <i class="ti ti-external-link"></i>
-				</MkButton>
-				<button type="button" class="_button" :class="$style.instanceManualSelectButton" @click="specifyHostAndOpenRemote(openOnRemote)">
-					{{ i18n.ts.specifyServerHost }}
-				</button>
-			</div>
-			<div :class="$style.orHr">
-				<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
-			</div>
-		</div>
-		<div v-if="!totpLogin" class="normal-signin _gaps_m">
-			<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
-				<template #prefix>@</template>
-				<template #suffix>@{{ host }}</template>
-			</MkInput>
-			<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required data-cy-signin-password>
-				<template #prefix><i class="ti ti-lock"></i></template>
-				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
-			</MkInput>
-			<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
-			<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
-			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
-			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
-			<MkButton type="submit" large primary rounded :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-		</div>
-		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
-			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
-				<p>{{ i18n.ts.useSecurityKey }}</p>
-				<MkButton v-if="!queryingKey" @click="query2FaKey">
-					{{ i18n.ts.retry }}
-				</MkButton>
-			</div>
-			<div v-if="user && user.securityKeys" :class="$style.orHr">
-				<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
-			</div>
-			<div class="twofa-group totp-group _gaps">
-				<MkInput v-model="token" type="text" :pattern="isBackupCode ? '^[A-Z0-9]{32}$' :'^[0-9]{6}$'" autocomplete="one-time-code" required :spellcheck="false" :inputmode="isBackupCode ? undefined : 'numeric'">
-					<template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template>
-					<template #prefix><i v-if="isBackupCode" class="ti ti-key"></i><i v-else class="ti ti-123"></i></template>
-					<template #caption><button class="_textButton" type="button" @click="isBackupCode = !isBackupCode">{{ isBackupCode ? i18n.ts.useTotp : i18n.ts.useBackupCode }}</button></template>
-				</MkInput>
-				<MkButton type="submit" :disabled="signing" large primary rounded style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-			</div>
-		</div>
-		<div v-if="!totpLogin && usePasswordLessLogin" :class="$style.orHr">
-			<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
-		</div>
-		<div v-if="!totpLogin && usePasswordLessLogin" class="twofa-group tap-group">
-			<MkButton v-if="!queryingKey" type="submit" :disabled="signing" style="margin: auto auto;" rounded large primary @click="onPasskeyLogin">
-				<i class="ti ti-device-usb" style="font-size: medium;"></i>
-				{{ signing ? i18n.ts.loggingIn : i18n.ts.signinWithPasskey }}
-			</MkButton>
-			<p v-if="queryingKey">{{ i18n.ts.useSecurityKey }}</p>
-		</div>
+<div :class="$style.signinRoot">
+	<Transition
+		mode="out-in"
+		:enterActiveClass="$style.transition_enterActive"
+		:leaveActiveClass="$style.transition_leaveActive"
+		:enterFromClass="$style.transition_enterFrom"
+		:leaveToClass="$style.transition_leaveTo"
+
+		:inert="waiting"
+	>
+		<!-- 1. 外部サーバーへの転送・username入力・パスキー -->
+		<XInput
+			v-if="page === 'input'"
+			key="input"
+			:message="message"
+			:openOnRemote="openOnRemote"
+
+			@usernameSubmitted="onUsernameSubmitted"
+			@passkeyClick="onPasskeyLogin"
+		/>
+
+		<!-- 2. パスワード入力 -->
+		<XPassword
+			v-else-if="page === 'password'"
+			key="password"
+
+			:user="userInfo!"
+
+			@passwordSubmitted="onPasswordSubmitted"
+		/>
+
+		<!-- 3. ワンタイムパスワード -->
+		<XTotp
+			v-else-if="page === 'totp'"
+			key="totp"
+
+			@totpSubmitted="onTotpSubmitted"
+		/>
+
+		<!-- 4. パスキー -->
+		<XPasskey
+			v-else-if="page === 'passkey'"
+			key="passkey"
+
+			:user="userInfo!"
+			:credentialRequest="credentialRequest!"
+			:isPerformingPasswordlessLogin="doingPasskeyFromInputPage"
+
+			@done="onPasskeyDone"
+			@useTotp="onUseTotp"
+		/>
+	</Transition>
+	<div v-if="waiting" :class="$style.waitingRoot">
+		<MkLoading/>
 	</div>
-</form>
+</div>
 </template>
 
-<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import { toUnicode } from 'punycode/';
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import { supported as webAuthnSupported, get as webAuthnRequest, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
-import { SigninWithPasskeyResponse } from 'misskey-js/entities.js';
-import { query, extractDomain } from '@@/js/url.js';
-import { host as configHost } from '@@/js/config.js';
-import MkDivider from './MkDivider.vue';
-import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
-import { showSuspendedDialog } from '@/scripts/show-suspended-dialog.js';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os.js';
+import { supported as webAuthnSupported, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
+
 import { misskeyApi } from '@/scripts/misskey-api.js';
+import { showSuspendedDialog } from '@/scripts/show-suspended-dialog.js';
 import { login } from '@/account.js';
-import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
 
-const signing = ref(false);
-const user = ref<Misskey.entities.UserDetailed | null>(null);
-const usePasswordLessLogin = ref<Misskey.entities.UserDetailed['usePasswordLessLogin']>(true);
-const username = ref('');
-const password = ref('');
-const token = ref('');
-const host = ref(toUnicode(configHost));
-const totpLogin = ref(false);
-const isBackupCode = ref(false);
-const queryingKey = ref(false);
-let credentialRequest: CredentialRequestOptions | null = null;
-const passkey_context = ref('');
-const hCaptchaResponse = ref<string | null>(null);
-const mCaptchaResponse = ref<string | null>(null);
-const reCaptchaResponse = ref<string | null>(null);
-const turnstileResponse = ref<string | null>(null);
+import XInput from '@/components/MkSignin.input.vue';
+import XPassword, { type PwResponse } from '@/components/MkSignin.password.vue';
+import XTotp from '@/components/MkSignin.totp.vue';
+import XPasskey from '@/components/MkSignin.passkey.vue';
+
+import type { AuthenticationPublicKeyCredential } from '@github/webauthn-json/browser-ponyfill';
+import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
 
 const emit = defineEmits<{
-	(ev: 'login', v: any): void;
+	(ev: 'login', v: Misskey.entities.SigninResponse): void;
 }>();
 
 const props = withDefaults(defineProps<{
-	withAvatar?: boolean;
 	autoSet?: boolean;
 	message?: string,
 	openOnRemote?: OpenOnRemoteOptions,
 }>(), {
-	withAvatar: true,
 	autoSet: false,
 	message: '',
 	openOnRemote: undefined,
 });
 
-function onUsernameChange(): void {
-	misskeyApi('users/show', {
-		username: username.value,
-	}).then(userResponse => {
-		user.value = userResponse;
-		usePasswordLessLogin.value = userResponse.usePasswordLessLogin;
-	}, () => {
-		user.value = null;
-		usePasswordLessLogin.value = true;
-	});
-}
+const page = ref<'input' | 'password' | 'totp' | 'passkey'>('input');
+const waiting = ref(false);
 
-function onLogin(res: any): Promise<void> | void {
-	if (props.autoSet) {
-		return login(res.i);
-	}
-}
+const userInfo = ref<null | Misskey.entities.UserDetailed>(null);
+const password = ref('');
 
-async function query2FaKey(): Promise<void> {
-	if (credentialRequest == null) return;
-	queryingKey.value = true;
-	await webAuthnRequest(credentialRequest)
-		.catch(() => {
-			queryingKey.value = false;
-			return Promise.reject(null);
-		}).then(credential => {
-			credentialRequest = null;
-			queryingKey.value = false;
-			signing.value = true;
-			return misskeyApi('signin', {
-				username: username.value,
-				password: password.value,
-				credential: credential.toJSON(),
-			});
-		}).then(res => {
-			emit('login', res);
-			return onLogin(res);
-		}).catch(err => {
-			if (err === null) return;
-			os.alert({
-				type: 'error',
-				text: i18n.ts.signinFailed,
-			});
-			signing.value = false;
-		});
-}
+//#region Passkey Passwordless
+const credentialRequest = shallowRef<CredentialRequestOptions | null>(null);
+const passkeyContext = ref('');
+const doingPasskeyFromInputPage = ref(false);
 
 function onPasskeyLogin(): void {
-	signing.value = true;
 	if (webAuthnSupported()) {
+		doingPasskeyFromInputPage.value = true;
+		waiting.value = true;
 		misskeyApi('signin-with-passkey', {})
-			.then((res: SigninWithPasskeyResponse) => {
-				totpLogin.value = false;
-				signing.value = false;
-				queryingKey.value = true;
-				passkey_context.value = res.context ?? '';
-				credentialRequest = parseRequestOptionsFromJSON({
+			.then((res) => {
+				passkeyContext.value = res.context ?? '';
+				credentialRequest.value = parseRequestOptionsFromJSON({
 					publicKey: res.option,
 				});
+
+				page.value = 'passkey';
+				waiting.value = false;
 			})
-			.then(() => queryPasskey())
-			.catch(loginFailed);
+			.catch(onLoginFailed);
 	}
 }
 
-async function queryPasskey(): Promise<void> {
-	if (credentialRequest == null) return;
-	queryingKey.value = true;
-	console.log('Waiting passkey auth...');
-	await webAuthnRequest(credentialRequest)
-		.catch((err) => {
-			console.warn('Passkey Auth fail!: ', err);
-			queryingKey.value = false;
-			return Promise.reject(null);
-		}).then(credential => {
-			credentialRequest = null;
-			queryingKey.value = false;
-			signing.value = true;
-			return misskeyApi('signin-with-passkey', {
-				credential: credential.toJSON(),
-				context: passkey_context.value,
-			});
-		}).then((res: SigninWithPasskeyResponse) => {
+function onPasskeyDone(credential: AuthenticationPublicKeyCredential): void {
+	waiting.value = true;
+
+	if (doingPasskeyFromInputPage.value) {
+		misskeyApi('signin-with-passkey', {
+			credential: credential.toJSON(),
+			context: passkeyContext.value,
+		}).then((res) => {
+			if (res.signinResponse == null) {
+				onLoginFailed();
+				return;
+			}
 			emit('login', res.signinResponse);
-			return onLogin(res.signinResponse);
+		}).catch(onLoginFailed);
+	} else if (userInfo.value != null) {
+		misskeyApi('signin', {
+			username: userInfo.value.username,
+			password: password.value,
+			credential: credential.toJSON(),
+		}).then(async (res) => {
+			emit('login', res);
+			await onLoginSucceeded(res);
+		}).catch(onLoginFailed);
+	}
+}
+
+function onUseTotp(): void {
+	page.value = 'totp';
+}
+//#endregion
+
+async function onUsernameSubmitted(username: string) {
+	waiting.value = true;
+
+	userInfo.value = await misskeyApi('users/show', {
+		username,
+	});
+
+	if (userInfo.value == null) {
+		await os.alert({
+			type: 'error',
+			title: i18n.ts.noSuchUser,
+			text: i18n.ts.signinFailed,
 		});
+	} else if (userInfo.value.usePasswordLessLogin) {
+		page.value = 'passkey';
+	} else {
+		page.value = 'password';
+	}
+
+	waiting.value = false;
 }
 
-function onSubmit(): void {
-	signing.value = true;
-	if (!totpLogin.value && user.value && user.value.twoFactorEnabled) {
-		if (webAuthnSupported() && user.value.securityKeys) {
-			misskeyApi('signin', {
-				username: username.value,
-				password: password.value,
-			}).then(res => {
-				totpLogin.value = true;
-				signing.value = false;
-				credentialRequest = parseRequestOptionsFromJSON({
+async function onPasswordSubmitted(pw: PwResponse) {
+	waiting.value = true;
+
+	if (userInfo.value == null) {
+		await os.alert({
+			type: 'error',
+			title: i18n.ts.noSuchUser,
+			text: i18n.ts.signinFailed,
+		});
+		return;
+	} else {
+		if (!userInfo.value.twoFactorEnabled) {
+			if (
+				(instance.enableHcaptcha || instance.enableMcaptcha || instance.enableRecaptcha || instance.enableTurnstile) &&
+				(pw.captcha.hCaptchaResponse == null && pw.captcha.mCaptchaResponse == null && pw.captcha.reCaptchaResponse == null && pw.captcha.turnstileResponse == null)
+			) {
+				// 2FAが無効で、CAPTCHAが有効で、かつCAPTCHAが未入力の場合
+				onLoginFailed();
+				waiting.value = false;
+				return;
+			} else {
+				await misskeyApi('signin', {
+					username: userInfo.value.username,
+					password: pw.password,
+					'h-captcha-response': pw.captcha.hCaptchaResponse,
+					'm-captcha-response': pw.captcha.mCaptchaResponse,
+					'g-recaptcha-response': pw.captcha.reCaptchaResponse,
+					'turnstile-response': pw.captcha.turnstileResponse,
+				}).then(async (res) => {
+					emit('login', res);
+					await onLoginSucceeded(res);
+				}).catch(onLoginFailed);
+			}
+		} else if (userInfo.value.securityKeys) {
+			password.value = pw.password;
+
+			await misskeyApi('signin', {
+				username: userInfo.value.username,
+				password: pw.password,
+			}).then((res) => {
+				credentialRequest.value = parseRequestOptionsFromJSON({
 					publicKey: res,
 				});
-			})
-				.then(() => query2FaKey())
-				.catch(loginFailed);
+				page.value = 'passkey';
+				waiting.value = false;
+			}).catch(onLoginFailed);
 		} else {
-			totpLogin.value = true;
-			signing.value = false;
+			password.value = pw.password;
+			page.value = 'totp';
+			waiting.value = false;
 		}
+	}
+}
+
+async function onTotpSubmitted(token: string) {
+	waiting.value = true;
+
+	if (userInfo.value == null) {
+		await os.alert({
+			type: 'error',
+			title: i18n.ts.noSuchUser,
+			text: i18n.ts.signinFailed,
+		});
+		return;
 	} else {
-		misskeyApi('signin', {
-			username: username.value,
+		await misskeyApi('signin', {
+			username: userInfo.value.username,
 			password: password.value,
-			'hcaptcha-response': hCaptchaResponse.value,
-			'm-captcha-response': mCaptchaResponse.value,
-			'g-recaptcha-response': reCaptchaResponse.value,
-			'turnstile-response': turnstileResponse.value,
-			token: user.value?.twoFactorEnabled ? token.value : undefined,
-		}).then(res => {
+			token,
+		}).then(async (res) => {
 			emit('login', res);
-			onLogin(res);
-		}).catch(loginFailed);
+			await onLoginSucceeded(res);
+		}).catch(onLoginFailed);
 	}
 }
 
-function loginFailed(err: any): void {
-	switch (err.id) {
+async function onLoginSucceeded(res: Misskey.entities.SigninResponse) {
+	if (props.autoSet) {
+		await login(res.i);
+	}
+}
+
+function onLoginFailed(err?: any): void {
+	const id = err?.id ?? null;
+
+	switch (id) {
 		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
 			os.alert({
 				type: 'error',
@@ -278,6 +292,14 @@ function loginFailed(err: any): void {
 			});
 			break;
 		}
+		case 'cdf1235b-ac71-46d4-a3a6-84ccce48df6f': {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.loginFailed,
+				text: i18n.ts.incorrectTotp,
+			});
+			break;
+		}
 		case '36b96a7d-b547-412d-aeed-2d611cdc8cdc': {
 			os.alert({
 				type: 'error',
@@ -286,6 +308,14 @@ function loginFailed(err: any): void {
 			});
 			break;
 		}
+		case '93b86c4b-72f9-40eb-9815-798928603d1e': {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.loginFailed,
+				text: i18n.ts.passkeyVerificationFailed,
+			});
+			break;
+		}
 		case 'b18c89a7-5b5e-4cec-bb5b-0419f332d430': {
 			os.alert({
 				type: 'error',
@@ -312,113 +342,42 @@ function loginFailed(err: any): void {
 		}
 	}
 
-	totpLogin.value = false;
-	signing.value = false;
-}
-
-function resetPassword(): void {
-	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
-		closed: () => dispose(),
-	});
-}
-
-function openRemote(options: OpenOnRemoteOptions, targetHost?: string): void {
-	switch (options.type) {
-		case 'web':
-		case 'lookup': {
-			let _path: string;
-
-			if (options.type === 'lookup') {
-				// TODO: v2024.7.0以降が浸透してきたら正式なURLに変更する▼
-				// _path = `/lookup?uri=${encodeURIComponent(_path)}`;
-				_path = `/authorize-follow?acct=${encodeURIComponent(options.url)}`;
-			} else {
-				_path = options.path;
-			}
-
-			if (targetHost) {
-				window.open(`https://${targetHost}${_path}`, '_blank', 'noopener');
-			} else {
-				window.open(`https://misskey-hub.net/mi-web/?path=${encodeURIComponent(_path)}`, '_blank', 'noopener');
-			}
-			break;
-		}
-		case 'share': {
-			const params = query(options.params);
-			if (targetHost) {
-				window.open(`https://${targetHost}/share?${params}`, '_blank', 'noopener');
-			} else {
-				window.open(`https://misskey-hub.net/share/?${params}`, '_blank', 'noopener');
-			}
-			break;
-		}
-	}
-}
-
-async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<void> {
-	const { canceled, result: hostTemp } = await os.inputText({
-		title: i18n.ts.inputHostName,
-		placeholder: 'misskey.example.com',
-	});
-
-	if (canceled) return;
-
-	let targetHost: string | null = hostTemp;
-
-	// ドメイン部分だけを取り出す
-	targetHost = extractDomain(targetHost);
-	if (targetHost == null) {
-		os.alert({
-			type: 'error',
-			title: i18n.ts.invalidValue,
-			text: i18n.ts.tryAgain,
-		});
-		return;
-	}
-	openRemote(options, targetHost);
+	doingPasskeyFromInputPage.value = false;
+	waiting.value = false;
 }
 </script>
 
 <style lang="scss" module>
-.avatar {
-	margin: 0 auto 0 auto;
-	width: 64px;
-	height: 64px;
-	background: #ddd;
-	background-position: center;
-	background-size: cover;
-	border-radius: 100%;
+.transition_enterActive,
+.transition_leaveActive {
+	transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
 }
-
-.instanceManualSelectButton {
-	display: block;
-	text-align: center;
-	opacity: .7;
-	font-size: .8em;
-
-	&:hover {
-		text-decoration: underline;
-	}
+.transition_enterFrom {
+	opacity: 0;
+	transform: translateX(50px);
+}
+.transition_leaveTo {
+	opacity: 0;
+	transform: translateX(-50px);
 }
 
-.orHr {
+.signinRoot {
+	overflow-x: hidden;
+	overflow-x: clip;
+
 	position: relative;
-	margin: .4em auto;
-	width: 100%;
-	height: 1px;
-	background: var(--divider);
 }
 
-.orMsg {
+.waitingRoot {
 	position: absolute;
-	top: -.6em;
-	display: inline-block;
-	padding: 0 1em;
-	background: var(--panel);
-	font-size: 0.8em;
-	color: var(--fgOnPanel);
-	margin: 0;
-	left: 50%;
-	transform: translateX(-50%);
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: color-mix(in srgb, var(--panel), transparent 50%);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1;
 }
 </style>
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 0dff85183f8f..6aaeabec7b4b 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -5177,6 +5177,8 @@ export type operations = {
             urlPreviewRequireContentLength: boolean;
             urlPreviewUserAgent: string | null;
             urlPreviewSummaryProxyUrl: string | null;
+            federation: string;
+            federationHosts: string[];
           };
         };
       };
@@ -9428,6 +9430,9 @@ export type operations = {
           urlPreviewRequireContentLength?: boolean;
           urlPreviewUserAgent?: string | null;
           urlPreviewSummaryProxyUrl?: string | null;
+          /** @enum {string} */
+          federation?: 'all' | 'none' | 'specified';
+          federationHosts?: string[];
         };
       };
     };

From 75854f5e2374e2435f60255bf5bbf29acb4524d6 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 22:58:29 +0900
Subject: [PATCH 07/32] Update Changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db969a63c261..b941dd21667f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 -
 
 ### Client
--
+- Enhance: ログイン画面の認証フローを改善
 
 ### Server
 -

From 305925d2af733a467278b4b605f24f6237b717b3 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 23:06:06 +0900
Subject: [PATCH 08/32] =?UTF-8?q?14655=E3=81=AE=E5=A4=89=E6=9B=B4=E5=8F=96?=
 =?UTF-8?q?=E3=82=8A=E8=BE=BC=E3=81=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkSignin.password.vue    | 12 ++++++++++--
 packages/frontend/src/components/MkSignin.vue        |  8 --------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 13c93dd026a5..5dd833b59168 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -25,7 +25,7 @@
 				<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 			</div>
 
-			<MkButton type="submit" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+			<MkButton type="submit" :disabled="captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 		</form>
 	</div>
 </div>
@@ -44,7 +44,7 @@ export type PwResponse = {
 </script>
 
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from 'vue';
+import { ref, computed, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 
 import { instance } from '@/instance.js';
@@ -70,6 +70,14 @@ const mCaptchaResponse = ref<string | null>(null);
 const reCaptchaResponse = ref<string | null>(null);
 const turnstileResponse = ref<string | null>(null);
 
+const captchaFailed = computed((): boolean => {
+	return (
+		instance.enableHcaptcha && !hCaptchaResponse.value ||
+		instance.enableMcaptcha && !mCaptchaResponse.value ||
+		instance.enableRecaptcha && !reCaptchaResponse.value ||
+		instance.enableTurnstile && !turnstileResponse.value);
+});
+
 function resetPassword(): void {
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
 		closed: () => dispose(),
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 0115f8f49454..39dc63d3d9a0 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -82,14 +82,6 @@ import XPasskey from '@/components/MkSignin.passkey.vue';
 import type { AuthenticationPublicKeyCredential } from '@github/webauthn-json/browser-ponyfill';
 import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
 
-const captchaFailed = computed((): boolean => {
-	return (
-		instance.enableHcaptcha && !hCaptchaResponse.value ||
-		instance.enableMcaptcha && !mCaptchaResponse.value ||
-		instance.enableRecaptcha && !reCaptchaResponse.value ||
-		instance.enableTurnstile && !turnstileResponse.value);
-});
-
 const emit = defineEmits<{
 	(ev: 'login', v: Misskey.entities.SigninResponse): void;
 }>();

From 6496df3717ba258ef5252d055e42800128333143 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 23:07:38 +0900
Subject: [PATCH 09/32] spdx

---
 packages/frontend/src/components/MkSignin.input.vue    | 5 +++++
 packages/frontend/src/components/MkSignin.passkey.vue  | 7 ++++++-
 packages/frontend/src/components/MkSignin.password.vue | 5 +++++
 packages/frontend/src/components/MkSignin.totp.vue     | 5 +++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index e12caf26c880..85c9db6256fb 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -1,3 +1,8 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
 <template>
 <div :class="$style.wrapper" data-cy-signin-page-input>
 	<div class="_gaps" :class="$style.root">
diff --git a/packages/frontend/src/components/MkSignin.passkey.vue b/packages/frontend/src/components/MkSignin.passkey.vue
index febfdb5f993d..e9a97812e190 100644
--- a/packages/frontend/src/components/MkSignin.passkey.vue
+++ b/packages/frontend/src/components/MkSignin.passkey.vue
@@ -1,3 +1,8 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
 <template>
 <div :class="$style.wrapper">
 	<div class="_gaps" :class="$style.root">
@@ -9,7 +14,7 @@
 		</div>
 
 		<MkButton large primary rounded :disabled="queryingKey" style="margin: 0 auto;" @click="queryKey">{{ i18n.ts.retry }}</MkButton>
-		
+
 		<MkButton v-if="isPerformingPasswordlessLogin !== true" transparent rounded :disabled="queryingKey" style="margin: 0 auto;" @click="emit('useTotp')">{{ i18n.ts.useTotp }}</MkButton>
 	</div>
 </div>
diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 5dd833b59168..7444a5865b0c 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -1,3 +1,8 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
 <template>
 <div :class="$style.wrapper" data-cy-signin-page-password>
 	<div class="_gaps" :class="$style.root">
diff --git a/packages/frontend/src/components/MkSignin.totp.vue b/packages/frontend/src/components/MkSignin.totp.vue
index cd2fa6323550..e64cdc1f262b 100644
--- a/packages/frontend/src/components/MkSignin.totp.vue
+++ b/packages/frontend/src/components/MkSignin.totp.vue
@@ -1,3 +1,8 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
 <template>
 <div :class="$style.wrapper">
 	<div class="_gaps" :class="$style.root">

From d568dda75b35d121f8302dcaa5ca6ae12bd89319 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 23:21:12 +0900
Subject: [PATCH 10/32] fix

---
 cypress/e2e/basic.cy.ts                       | 4 +---
 packages/frontend/src/components/MkSignin.vue | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/basic.cy.ts b/cypress/e2e/basic.cy.ts
index 497142de66b5..e0e3949648fa 100644
--- a/cypress/e2e/basic.cy.ts
+++ b/cypress/e2e/basic.cy.ts
@@ -144,11 +144,9 @@ describe('After user signup', () => {
 
 		cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
 		cy.get('[data-cy-signin-username] input').type('alice{enter}');
-		cy.get('[data-cy-signin-page-password]').should('be.visible', { timeout: 10000 });
-		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
 
 		// TODO: cypressにブラウザの言語指定できる機能が実装され次第英語のみテストするようにする
-		cy.contains(/アカウントが凍結されています|This account has been suspended due to/gi);
+		cy.contains(/ユーザーが見つかりません|User not found/gi);
 	});
 });
 
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 39dc63d3d9a0..50672167283c 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -161,7 +161,7 @@ async function onUsernameSubmitted(username: string) {
 
 	userInfo.value = await misskeyApi('users/show', {
 		username,
-	});
+	}).catch(() => null);
 
 	if (userInfo.value == null) {
 		await os.alert({

From 319cc794c9d833ae580d93a42b010642d48c1aff Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 23:25:41 +0900
Subject: [PATCH 11/32] fix

---
 cypress/e2e/basic.cy.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/cypress/e2e/basic.cy.ts b/cypress/e2e/basic.cy.ts
index e0e3949648fa..ce96d84aa99c 100644
--- a/cypress/e2e/basic.cy.ts
+++ b/cypress/e2e/basic.cy.ts
@@ -142,6 +142,8 @@ describe('After user signup', () => {
 
 		cy.visitHome();
 
+		cy.get('[data-cy-signin]').click();
+
 		cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
 		cy.get('[data-cy-signin-username] input').type('alice{enter}');
 

From 0636d6b4facbf6adb294f753682c74e5d92a62a8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 30 Sep 2024 23:37:08 +0900
Subject: [PATCH 12/32] fix

---
 packages/frontend/src/components/MkSignin.password.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 7444a5865b0c..094ad4a4a477 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 			</div>
 
-			<MkButton type="submit" :disabled="captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+			<MkButton type="submit" :disabled="!user.twoFactorEnabled && captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 		</form>
 	</div>
 </div>

From c3f1d27e2b4d9bb4b7c7fbf1d87b9c4b069f6a27 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:09:14 +0900
Subject: [PATCH 13/32] :art:

---
 .../src/components/MkSignin.input.vue         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index 85c9db6256fb..7bd6e2e6d7f1 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.wrapper" data-cy-signin-page-input>
-	<div class="_gaps" :class="$style.root">
+	<div :class="$style.root">
 		<div :class="$style.avatar" :style="{ marginBottom: message ? '1.5em' : undefined }">
 			<i class="ti ti-user"></i>
 		</div>
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
 		</div>
 		<div>
-			<MkButton type="submit" style="margin: auto auto;" rounded primary @click="emit('passkeyClick', $event)">
+			<MkButton type="submit" style="margin: auto auto;" rounded primary gradate @click="emit('passkeyClick', $event)">
 				<i class="ti ti-device-usb" style="font-size: medium;"></i>{{ i18n.ts.signinWithPasskey }}
 			</MkButton>
 		</div>
@@ -56,18 +56,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import { toUnicode } from 'punycode/';
 
-import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
-
 import { query, extractDomain } from '@@/js/url.js';
 import { host as configHost } from '@@/js/config.js';
+import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
 
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkInfo from '@/components/MkInfo.vue';
 
-import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
-
 const props = withDefaults(defineProps<{
 	message?: string,
 	openOnRemote?: OpenOnRemoteOptions,
@@ -145,11 +143,17 @@ async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<v
 </script>
 
 <style lang="scss" module>
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
 .wrapper {
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 300px;
 
 	> .root {
 		width: 100%;

From d4fa970a95ad5effe5cefa186eee2b91ac1406a4 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:30:18 +0900
Subject: [PATCH 14/32] :art:

---
 .../src/components/MkSigninDialog.vue         | 65 ++++++++++++++-----
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index d48780e9de6d..f9641e7c02a9 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -4,26 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	@close="onClose"
+<MkModal
+	ref="modal"
+	:preferType="'dialog'"
+	@click="onClose"
 	@closed="emit('closed')"
 >
-	<template #header>{{ i18n.ts.login }}</template>
-
-	<MkSpacer :marginMin="20" :marginMax="28">
-		<MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/>
-	</MkSpacer>
-</MkModalWindow>
+	<div :class="$style.root">
+		<div :class="$style.header"><i class="ti ti-login-2"></i> {{ i18n.ts.login }}</div>
+		<button :class="$style.closeButton" class="_button" @click="onClose"><i class="ti ti-x"></i></button>
+		<MkSpacer :marginMin="20" :marginMax="28" style="margin: auto;">
+			<MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/>
+		</MkSpacer>
+	</div>
+</MkModal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue';
 import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
 import MkSignin from '@/components/MkSignin.vue';
-import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkModal from '@/components/MkModal.vue';
 import { i18n } from '@/i18n.js';
 
 withDefaults(defineProps<{
@@ -42,15 +43,49 @@ const emit = defineEmits<{
 	(ev: 'cancelled'): void;
 }>();
 
-const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 function onClose() {
 	emit('cancelled');
-	if (dialog.value) dialog.value.close();
+	if (modal.value) modal.value.close();
 }
 
 function onLogin(res) {
 	emit('done', res);
-	if (dialog.value) dialog.value.close();
+	if (modal.value) modal.value.close();
 }
 </script>
+
+<style lang="scss" module>
+.root {
+	display: flex;
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	width: 100%;
+	max-width: 400px;
+	height: 100%;
+	max-height: 450px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.header {
+	position: absolute;
+	top: 0;
+	left: 0;
+	font-weight: bold;
+	padding: 16px 20px;
+}
+
+.closeButton {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	right: 0;
+	padding: 16px;
+	font-size: 16px;
+}
+</style>

From ee8e1b50cc32fd0fca66cd56e4c50780a33fd36b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:15:32 +0900
Subject: [PATCH 15/32] :art:

---
 packages/frontend/src/components/MkSignin.input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index 7bd6e2e6d7f1..67ebcbdd93c3 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<p :class="$style.orMsg">{{ i18n.ts.or }}</p>
 		</div>
 		<div>
-			<MkButton type="submit" style="margin: auto auto;" rounded primary gradate @click="emit('passkeyClick', $event)">
+			<MkButton type="submit" style="margin: auto auto;" large rounded primary gradate @click="emit('passkeyClick', $event)">
 				<i class="ti ti-device-usb" style="font-size: medium;"></i>{{ i18n.ts.signinWithPasskey }}
 			</MkButton>
 		</div>

From 6983287be2e57c81b2401c641a093468921689bf Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 3 Oct 2024 10:16:16 +0900
Subject: [PATCH 16/32] :art:

---
 packages/frontend/src/components/MkSigninDialog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index f9641e7c02a9..ea4ae5e50456 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -59,6 +59,7 @@ function onLogin(res) {
 <style lang="scss" module>
 .root {
 	display: flex;
+	overflow: auto;
 	margin: auto;
 	position: relative;
 	padding: 32px;

From 65aac75a33828bec6783df744507ac4a783de899 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 19:03:20 +0900
Subject: [PATCH 17/32] =?UTF-8?q?Captcha=E3=81=8C=E3=83=AA=E3=82=BB?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkSignin.password.vue       | 18 +++++++++++++++++-
 packages/frontend/src/components/MkSignin.vue  | 10 ++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 094ad4a4a477..224255306339 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -49,7 +49,7 @@ export type PwResponse = {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent } from 'vue';
+import { ref, computed, useTemplateRef, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 
 import { instance } from '@/instance.js';
@@ -70,6 +70,11 @@ const emit = defineEmits<{
 
 const password = ref('');
 
+const hCaptcha = useTemplateRef('hcaptcha');
+const mCaptcha = useTemplateRef('mcaptcha');
+const reCaptcha = useTemplateRef('recaptcha');
+const turnstile = useTemplateRef('turnstile');
+
 const hCaptchaResponse = ref<string | null>(null);
 const mCaptchaResponse = ref<string | null>(null);
 const reCaptchaResponse = ref<string | null>(null);
@@ -100,6 +105,17 @@ function onSubmit() {
 		},
 	});
 }
+
+function resetCaptcha() {
+	hCaptcha.value?.reset();
+	mCaptcha.value?.reset();
+	reCaptcha.value?.reset();
+	turnstile.value?.reset();
+}
+
+defineExpose({
+	resetCaptcha,
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 50672167283c..f84e2fd96f77 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -29,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<XPassword
 			v-else-if="page === 'password'"
 			key="password"
+			ref="passwordPageEl"
 
 			:user="userInfo!"
 
@@ -63,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue';
+import { ref, shallowRef, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { supported as webAuthnSupported, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
 
@@ -97,6 +98,7 @@ const props = withDefaults(defineProps<{
 });
 
 const page = ref<'input' | 'password' | 'totp' | 'passkey'>('input');
+const passwordPageEl = useTemplateRef('passwordPageEl');
 const waiting = ref(false);
 
 const userInfo = ref<null | Misskey.entities.UserDetailed>(null);
@@ -342,7 +344,11 @@ function onLoginFailed(err?: any): void {
 		}
 	}
 
-	doingPasskeyFromInputPage.value = false;
+	if (doingPasskeyFromInputPage.value === true) {
+		doingPasskeyFromInputPage.value = false;
+		page.value = 'input';
+	}
+	passwordPageEl.value?.resetCaptcha();
 	waiting.value = false;
 }
 </script>

From adabff708d1cb798f7f2df0854994d0673794685 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 20:34:05 +0900
Subject: [PATCH 18/32] =?UTF-8?q?=E6=AC=A1=E3=81=AE=E5=87=A6=E7=90=86?=
 =?UTF-8?q?=E3=82=92signin=20api=E3=81=8B=E3=82=89=E8=AA=AD=E3=81=BF?=
 =?UTF-8?q?=E5=8F=96=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/entities/UserEntityService.ts    |  13 +-
 .../backend/src/models/json-schema/user.ts    |  27 +-
 .../src/server/api/SigninApiService.ts        |  77 ++++-
 .../src/components/MkSignin.passkey.vue       |   2 -
 .../src/components/MkSignin.password.vue      |  14 +-
 packages/frontend/src/components/MkSignin.vue | 292 ++++++++++--------
 .../src/components/MkSigninDialog.vue         |   1 -
 packages/misskey-js/etc/misskey-js.api.md     |   2 +-
 packages/misskey-js/src/autogen/types.ts      |   9 +-
 packages/misskey-js/src/entities.ts           |   2 +-
 10 files changed, 255 insertions(+), 184 deletions(-)

diff --git a/packages/backend/src/core/entities/UserEntityService.ts b/packages/backend/src/core/entities/UserEntityService.ts
index 69e2d6fc89dc..c9939adf1137 100644
--- a/packages/backend/src/core/entities/UserEntityService.ts
+++ b/packages/backend/src/core/entities/UserEntityService.ts
@@ -545,11 +545,6 @@ export class UserEntityService implements OnModuleInit {
 				publicReactions: this.isLocalUser(user) ? profile!.publicReactions : false, // https://github.com/misskey-dev/misskey/issues/12964
 				followersVisibility: profile!.followersVisibility,
 				followingVisibility: profile!.followingVisibility,
-				twoFactorEnabled: profile!.twoFactorEnabled,
-				usePasswordLessLogin: profile!.usePasswordLessLogin,
-				securityKeys: profile!.twoFactorEnabled
-					? this.userSecurityKeysRepository.countBy({ userId: user.id }).then(result => result >= 1)
-					: false,
 				roles: this.roleService.getUserRoles(user.id).then(roles => roles.filter(role => role.isPublic).sort((a, b) => b.displayOrder - a.displayOrder).map(role => ({
 					id: role.id,
 					name: role.name,
@@ -564,6 +559,14 @@ export class UserEntityService implements OnModuleInit {
 				moderationNote: iAmModerator ? (profile!.moderationNote ?? '') : undefined,
 			} : {}),
 
+			...(isDetailed && (isMe || iAmModerator) ? {
+				twoFactorEnabled: profile!.twoFactorEnabled,
+				usePasswordLessLogin: profile!.usePasswordLessLogin,
+				securityKeys: profile!.twoFactorEnabled
+					? this.userSecurityKeysRepository.countBy({ userId: user.id }).then(result => result >= 1)
+					: false,
+			} : {}),
+
 			...(isDetailed && isMe ? {
 				avatarId: user.avatarId,
 				bannerId: user.bannerId,
diff --git a/packages/backend/src/models/json-schema/user.ts b/packages/backend/src/models/json-schema/user.ts
index 16c8a5a097bb..c87100b59fff 100644
--- a/packages/backend/src/models/json-schema/user.ts
+++ b/packages/backend/src/models/json-schema/user.ts
@@ -346,21 +346,6 @@ export const packedUserDetailedNotMeOnlySchema = {
 			nullable: false, optional: false,
 			enum: ['public', 'followers', 'private'],
 		},
-		twoFactorEnabled: {
-			type: 'boolean',
-			nullable: false, optional: false,
-			default: false,
-		},
-		usePasswordLessLogin: {
-			type: 'boolean',
-			nullable: false, optional: false,
-			default: false,
-		},
-		securityKeys: {
-			type: 'boolean',
-			nullable: false, optional: false,
-			default: false,
-		},
 		roles: {
 			type: 'array',
 			nullable: false, optional: false,
@@ -382,6 +367,18 @@ export const packedUserDetailedNotMeOnlySchema = {
 			type: 'string',
 			nullable: false, optional: true,
 		},
+		twoFactorEnabled: {
+			type: 'boolean',
+			nullable: false, optional: true,
+		},
+		usePasswordLessLogin: {
+			type: 'boolean',
+			nullable: false, optional: true,
+		},
+		securityKeys: {
+			type: 'boolean',
+			nullable: false, optional: true,
+		},
 		//#region relations
 		isFollowing: {
 			type: 'boolean',
diff --git a/packages/backend/src/server/api/SigninApiService.ts b/packages/backend/src/server/api/SigninApiService.ts
index 2ccc75da00cc..83abe3c5e7a9 100644
--- a/packages/backend/src/server/api/SigninApiService.ts
+++ b/packages/backend/src/server/api/SigninApiService.ts
@@ -12,6 +12,7 @@ import type {
 	MiMeta,
 	SigninsRepository,
 	UserProfilesRepository,
+	UserSecurityKeysRepository,
 	UsersRepository,
 } from '@/models/_.js';
 import type { Config } from '@/config.js';
@@ -25,9 +26,18 @@ import { CaptchaService } from '@/core/CaptchaService.js';
 import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
 import { RateLimiterService } from './RateLimiterService.js';
 import { SigninService } from './SigninService.js';
-import type { AuthenticationResponseJSON } from '@simplewebauthn/types';
+import type { AuthenticationResponseJSON, PublicKeyCredentialRequestOptionsJSON } from '@simplewebauthn/types';
 import type { FastifyReply, FastifyRequest } from 'fastify';
 
+type SigninErrorResponse = {
+	id: string;
+	next?: 'captcha' | 'password' | 'totp';
+} | {
+	id: string;
+	next: 'passkey';
+	authRequest: PublicKeyCredentialRequestOptionsJSON;
+};
+
 @Injectable()
 export class SigninApiService {
 	constructor(
@@ -43,6 +53,9 @@ export class SigninApiService {
 		@Inject(DI.userProfilesRepository)
 		private userProfilesRepository: UserProfilesRepository,
 
+		@Inject(DI.userSecurityKeysRepository)
+		private userSecurityKeysRepository: UserSecurityKeysRepository,
+
 		@Inject(DI.signinsRepository)
 		private signinsRepository: SigninsRepository,
 
@@ -60,7 +73,7 @@ export class SigninApiService {
 		request: FastifyRequest<{
 			Body: {
 				username: string;
-				password: string;
+				password?: string;
 				token?: string;
 				credential?: AuthenticationResponseJSON;
 				'hcaptcha-response'?: string;
@@ -79,7 +92,7 @@ export class SigninApiService {
 		const password = body['password'];
 		const token = body['token'];
 
-		function error(status: number, error: { id: string }) {
+		function error(status: number, error: SigninErrorResponse) {
 			reply.code(status);
 			return { error };
 		}
@@ -103,11 +116,6 @@ export class SigninApiService {
 			return;
 		}
 
-		if (typeof password !== 'string') {
-			reply.code(400);
-			return;
-		}
-
 		if (token != null && typeof token !== 'string') {
 			reply.code(400);
 			return;
@@ -132,11 +140,36 @@ export class SigninApiService {
 		}
 
 		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+		const securityKeysAvailable = await this.userSecurityKeysRepository.countBy({ userId: user.id }).then(result => result >= 1);
+
+		if (password == null) {
+			reply.code(403);
+			if (profile.twoFactorEnabled) {
+				return {
+					error: {
+						id: '144ff4f8-bd6c-41bc-82c3-b672eb09efbf',
+						next: 'password',
+					},
+				} satisfies { error: SigninErrorResponse };
+			} else {
+				return {
+					error: {
+						id: '144ff4f8-bd6c-41bc-82c3-b672eb09efbf',
+						next: 'captcha',
+					},
+				} satisfies { error: SigninErrorResponse };
+			}
+		}
+
+		if (typeof password !== 'string') {
+			reply.code(400);
+			return;
+		}
 
 		// Compare password
 		const same = await bcrypt.compare(password, profile.password!);
 
-		const fail = async (status?: number, failure?: { id: string }) => {
+		const fail = async (status?: number, failure?: SigninErrorResponse) => {
 			// Append signin history
 			await this.signinsRepository.insert({
 				id: this.idService.gen(),
@@ -217,7 +250,7 @@ export class SigninApiService {
 					id: '93b86c4b-72f9-40eb-9815-798928603d1e',
 				});
 			}
-		} else {
+		} else if (securityKeysAvailable) {
 			if (!same && !profile.usePasswordLessLogin) {
 				return await fail(403, {
 					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
@@ -226,8 +259,28 @@ export class SigninApiService {
 
 			const authRequest = await this.webAuthnService.initiateAuthentication(user.id);
 
-			reply.code(200);
-			return authRequest;
+			reply.code(403);
+			return {
+				error: {
+					id: '06e661b9-8146-4ae3-bde5-47138c0ae0c4',
+					next: 'passkey',
+					authRequest,
+				},
+			} satisfies { error: SigninErrorResponse };
+		} else {
+			if (!same || !profile.twoFactorEnabled) {
+				return await fail(403, {
+					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
+				});
+			} else {
+				reply.code(403);
+				return {
+					error: {
+						id: '144ff4f8-bd6c-41bc-82c3-b672eb09efbf',
+						next: 'totp',
+					},
+				} satisfies { error: SigninErrorResponse };
+			}
 		}
 		// never get here
 	}
diff --git a/packages/frontend/src/components/MkSignin.passkey.vue b/packages/frontend/src/components/MkSignin.passkey.vue
index e9a97812e190..297db95f8907 100644
--- a/packages/frontend/src/components/MkSignin.passkey.vue
+++ b/packages/frontend/src/components/MkSignin.passkey.vue
@@ -22,7 +22,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import * as Misskey from 'misskey-js';
 import { get as webAuthnRequest } from '@github/webauthn-json/browser-ponyfill';
 
 import { i18n } from '@/i18n.js';
@@ -32,7 +31,6 @@ import MkButton from '@/components/MkButton.vue';
 import type { AuthenticationPublicKeyCredential } from '@github/webauthn-json/browser-ponyfill';
 
 const props = defineProps<{
-	user: Misskey.entities.UserDetailed;
 	credentialRequest: CredentialRequestOptions;
 	isPerformingPasswordlessLogin?: boolean;
 }>();
diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 224255306339..0748c59ffc72 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -23,14 +23,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
 			</MkInput>
 
-			<div v-if="!user.twoFactorEnabled">
+			<div v-if="needCaptcha">
 				<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 				<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
 				<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 				<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 			</div>
 
-			<MkButton type="submit" :disabled="!user.twoFactorEnabled && captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+			<MkButton type="submit" :disabled="needCaptcha && captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 		</form>
 	</div>
 </div>
@@ -62,6 +62,7 @@ import MkCaptcha from '@/components/MkCaptcha.vue';
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
+	needCaptcha: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -82,10 +83,11 @@ const turnstileResponse = ref<string | null>(null);
 
 const captchaFailed = computed((): boolean => {
 	return (
-		instance.enableHcaptcha && !hCaptchaResponse.value ||
-		instance.enableMcaptcha && !mCaptchaResponse.value ||
-		instance.enableRecaptcha && !reCaptchaResponse.value ||
-		instance.enableTurnstile && !turnstileResponse.value);
+		(instance.enableHcaptcha && !hCaptchaResponse.value) ||
+		(instance.enableMcaptcha && !mCaptchaResponse.value) ||
+		(instance.enableRecaptcha && !reCaptchaResponse.value) ||
+		(instance.enableTurnstile && !turnstileResponse.value)
+	);
 });
 
 function resetPassword(): void {
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index f84e2fd96f77..2a521e011910 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -32,6 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			ref="passwordPageEl"
 
 			:user="userInfo!"
+			:needCaptcha="needCaptcha"
 
 			@passwordSubmitted="onPasswordSubmitted"
 		/>
@@ -49,7 +50,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			v-else-if="page === 'passkey'"
 			key="passkey"
 
-			:user="userInfo!"
 			:credentialRequest="credentialRequest!"
 			:isPerformingPasswordlessLogin="doingPasskeyFromInputPage"
 
@@ -64,14 +64,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef, useTemplateRef } from 'vue';
+import { nextTick, onBeforeUnmount, ref, shallowRef, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { supported as webAuthnSupported, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
 
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { showSuspendedDialog } from '@/scripts/show-suspended-dialog.js';
 import { login } from '@/account.js';
-import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 
@@ -98,9 +97,11 @@ const props = withDefaults(defineProps<{
 });
 
 const page = ref<'input' | 'password' | 'totp' | 'passkey'>('input');
-const passwordPageEl = useTemplateRef('passwordPageEl');
 const waiting = ref(false);
 
+const passwordPageEl = useTemplateRef('passwordPageEl');
+const needCaptcha = ref(false);
+
 const userInfo = ref<null | Misskey.entities.UserDetailed>(null);
 const password = ref('');
 
@@ -142,14 +143,11 @@ function onPasskeyDone(credential: AuthenticationPublicKeyCredential): void {
 			emit('login', res.signinResponse);
 		}).catch(onLoginFailed);
 	} else if (userInfo.value != null) {
-		misskeyApi('signin', {
+		tryLogin({
 			username: userInfo.value.username,
 			password: password.value,
 			credential: credential.toJSON(),
-		}).then(async (res) => {
-			emit('login', res);
-			await onLoginSucceeded(res);
-		}).catch(onLoginFailed);
+		});
 	}
 }
 
@@ -171,17 +169,18 @@ async function onUsernameSubmitted(username: string) {
 			title: i18n.ts.noSuchUser,
 			text: i18n.ts.signinFailed,
 		});
-	} else if (userInfo.value.usePasswordLessLogin) {
-		page.value = 'passkey';
-	} else {
-		page.value = 'password';
+		waiting.value = false;
+		return;
 	}
 
-	waiting.value = false;
+	await tryLogin({
+		username,
+	});
 }
 
 async function onPasswordSubmitted(pw: PwResponse) {
 	waiting.value = true;
+	password.value = pw.password;
 
 	if (userInfo.value == null) {
 		await os.alert({
@@ -189,48 +188,17 @@ async function onPasswordSubmitted(pw: PwResponse) {
 			title: i18n.ts.noSuchUser,
 			text: i18n.ts.signinFailed,
 		});
+		waiting.value = false;
 		return;
 	} else {
-		if (!userInfo.value.twoFactorEnabled) {
-			if (
-				(instance.enableHcaptcha || instance.enableMcaptcha || instance.enableRecaptcha || instance.enableTurnstile) &&
-				(pw.captcha.hCaptchaResponse == null && pw.captcha.mCaptchaResponse == null && pw.captcha.reCaptchaResponse == null && pw.captcha.turnstileResponse == null)
-			) {
-				// 2FAが無効で、CAPTCHAが有効で、かつCAPTCHAが未入力の場合
-				onLoginFailed();
-				waiting.value = false;
-				return;
-			} else {
-				await misskeyApi('signin', {
-					username: userInfo.value.username,
-					password: pw.password,
-					'h-captcha-response': pw.captcha.hCaptchaResponse,
-					'm-captcha-response': pw.captcha.mCaptchaResponse,
-					'g-recaptcha-response': pw.captcha.reCaptchaResponse,
-					'turnstile-response': pw.captcha.turnstileResponse,
-				}).then(async (res) => {
-					emit('login', res);
-					await onLoginSucceeded(res);
-				}).catch(onLoginFailed);
-			}
-		} else if (userInfo.value.securityKeys) {
-			password.value = pw.password;
-
-			await misskeyApi('signin', {
-				username: userInfo.value.username,
-				password: pw.password,
-			}).then((res) => {
-				credentialRequest.value = parseRequestOptionsFromJSON({
-					publicKey: res,
-				});
-				page.value = 'passkey';
-				waiting.value = false;
-			}).catch(onLoginFailed);
-		} else {
-			password.value = pw.password;
-			page.value = 'totp';
-			waiting.value = false;
-		}
+		await tryLogin({
+			username: userInfo.value.username,
+			password: pw.password,
+			'hcaptcha-response': pw.captcha.hCaptchaResponse,
+			'm-captcha-response': pw.captcha.mCaptchaResponse,
+			'g-recaptcha-response': pw.captcha.reCaptchaResponse,
+			'turnstile-response': pw.captcha.turnstileResponse,
+		});
 	}
 }
 
@@ -243,19 +211,37 @@ async function onTotpSubmitted(token: string) {
 			title: i18n.ts.noSuchUser,
 			text: i18n.ts.signinFailed,
 		});
+		waiting.value = false;
 		return;
 	} else {
-		await misskeyApi('signin', {
+		await tryLogin({
 			username: userInfo.value.username,
 			password: password.value,
 			token,
-		}).then(async (res) => {
-			emit('login', res);
-			await onLoginSucceeded(res);
-		}).catch(onLoginFailed);
+		});
 	}
 }
 
+async function tryLogin(req: Partial<Misskey.entities.SigninRequest>): Promise<Misskey.entities.SigninResponse> {
+	if (userInfo.value == null) {
+		throw new Error('No such user');
+	}
+
+	const _req = {
+		username: userInfo.value.username,
+		...req,
+	};
+
+	return await misskeyApi('signin', _req).then(async (res) => {
+		emit('login', res);
+		await onLoginSucceeded(res);
+		return res;
+	}).catch((err) => {
+		onLoginFailed(err);
+		return Promise.reject(err);
+	});
+}
+
 async function onLoginSucceeded(res: Misskey.entities.SigninResponse) {
 	if (props.autoSet) {
 		await login(res.i);
@@ -265,92 +251,128 @@ async function onLoginSucceeded(res: Misskey.entities.SigninResponse) {
 function onLoginFailed(err?: any): void {
 	const id = err?.id ?? null;
 
-	switch (id) {
-		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.noSuchUser,
-			});
-			break;
-		}
-		case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.incorrectPassword,
-			});
-			break;
-		}
-		case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
-			showSuspendedDialog();
-			break;
-		}
-		case '22d05606-fbcf-421a-a2db-b32610dcfd1b': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.rateLimitExceeded,
-			});
-			break;
-		}
-		case 'cdf1235b-ac71-46d4-a3a6-84ccce48df6f': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.incorrectTotp,
-			});
-			break;
-		}
-		case '36b96a7d-b547-412d-aeed-2d611cdc8cdc': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.unknownWebAuthnKey,
-			});
-			break;
-		}
-		case '93b86c4b-72f9-40eb-9815-798928603d1e': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.passkeyVerificationFailed,
-			});
-			break;
-		}
-		case 'b18c89a7-5b5e-4cec-bb5b-0419f332d430': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.passkeyVerificationFailed,
-			});
-			break;
-		}
-		case '2d84773e-f7b7-4d0b-8f72-bb69b584c912': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.passkeyVerificationSucceededButPasswordlessLoginDisabled,
-			});
-			break;
+	if (typeof err === 'object' && 'next' in err) {
+		switch (err.next) {
+			case 'captcha': {
+				page.value = 'password';
+				break;
+			}
+			case 'password': {
+				page.value = 'password';
+				break;
+			}
+			case 'totp': {
+				page.value = 'totp';
+				break;
+			}
+			case 'passkey': {
+				if (webAuthnSupported() && 'authRequest' in err) {
+					credentialRequest.value = parseRequestOptionsFromJSON({
+						publicKey: err.authRequest,
+					});
+					page.value = 'passkey';
+				} else {
+					page.value = 'totp';
+				}
+				break;
+			}
 		}
-		default: {
-			console.error(err);
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: JSON.stringify(err),
-			});
+	} else {
+		switch (id) {
+			case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.noSuchUser,
+				});
+				break;
+			}
+			case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.incorrectPassword,
+				});
+				break;
+			}
+			case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
+				showSuspendedDialog();
+				break;
+			}
+			case '22d05606-fbcf-421a-a2db-b32610dcfd1b': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.rateLimitExceeded,
+				});
+				break;
+			}
+			case 'cdf1235b-ac71-46d4-a3a6-84ccce48df6f': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.incorrectTotp,
+				});
+				break;
+			}
+			case '36b96a7d-b547-412d-aeed-2d611cdc8cdc': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.unknownWebAuthnKey,
+				});
+				break;
+			}
+			case '93b86c4b-72f9-40eb-9815-798928603d1e': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.passkeyVerificationFailed,
+				});
+				break;
+			}
+			case 'b18c89a7-5b5e-4cec-bb5b-0419f332d430': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.passkeyVerificationFailed,
+				});
+				break;
+			}
+			case '2d84773e-f7b7-4d0b-8f72-bb69b584c912': {
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: i18n.ts.passkeyVerificationSucceededButPasswordlessLoginDisabled,
+				});
+				break;
+			}
+			default: {
+				console.error(err);
+				os.alert({
+					type: 'error',
+					title: i18n.ts.loginFailed,
+					text: JSON.stringify(err),
+				});
+			}
 		}
 	}
 
 	if (doingPasskeyFromInputPage.value === true) {
 		doingPasskeyFromInputPage.value = false;
 		page.value = 'input';
+		password.value = '';
 	}
 	passwordPageEl.value?.resetCaptcha();
-	waiting.value = false;
+	nextTick(() => {
+		waiting.value = false;
+	});
 }
+
+onBeforeUnmount(() => {
+	password.value = '';
+	userInfo.value = null;
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index ea4ae5e50456..5b10928aa08e 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -68,7 +68,6 @@ function onLogin(res) {
 	height: 100%;
 	max-height: 450px;
 	box-sizing: border-box;
-	text-align: center;
 	background: var(--panel);
 	border-radius: var(--radius);
 }
diff --git a/packages/misskey-js/etc/misskey-js.api.md b/packages/misskey-js/etc/misskey-js.api.md
index 5f4792eb7437..9ad784c29641 100644
--- a/packages/misskey-js/etc/misskey-js.api.md
+++ b/packages/misskey-js/etc/misskey-js.api.md
@@ -3040,7 +3040,7 @@ type Signin = components['schemas']['Signin'];
 // @public (undocumented)
 type SigninRequest = {
     username: string;
-    password: string;
+    password?: string;
     token?: string;
     credential?: AuthenticationResponseJSON;
     'hcaptcha-response'?: string | null;
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index ee5cd477f136..fbf8d3e80d36 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -3782,16 +3782,13 @@ export type components = {
       followingVisibility: 'public' | 'followers' | 'private';
       /** @enum {string} */
       followersVisibility: 'public' | 'followers' | 'private';
-      /** @default false */
-      twoFactorEnabled: boolean;
-      /** @default false */
-      usePasswordLessLogin: boolean;
-      /** @default false */
-      securityKeys: boolean;
       roles: components['schemas']['RoleLite'][];
       followedMessage?: string | null;
       memo: string | null;
       moderationNote?: string;
+      twoFactorEnabled?: boolean;
+      usePasswordLessLogin?: boolean;
+      securityKeys?: boolean;
       isFollowing?: boolean;
       isFollowed?: boolean;
       hasPendingFollowRequestFromYou?: boolean;
diff --git a/packages/misskey-js/src/entities.ts b/packages/misskey-js/src/entities.ts
index 36b7f5bca3e6..98ac50e5a1e4 100644
--- a/packages/misskey-js/src/entities.ts
+++ b/packages/misskey-js/src/entities.ts
@@ -269,7 +269,7 @@ export type SignupPendingResponse = {
 
 export type SigninRequest = {
 	username: string;
-	password: string;
+	password?: string;
 	token?: string;
 	credential?: AuthenticationResponseJSON;
 	'hcaptcha-response'?: string | null;

From e91fc626c613bb68b8244869b49ac0f4711d12dc Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 20:39:15 +0900
Subject: [PATCH 19/32] Add Comments

---
 packages/backend/src/server/api/SigninApiService.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/backend/src/server/api/SigninApiService.ts b/packages/backend/src/server/api/SigninApiService.ts
index 83abe3c5e7a9..81684beb3c67 100644
--- a/packages/backend/src/server/api/SigninApiService.ts
+++ b/packages/backend/src/server/api/SigninApiService.ts
@@ -29,6 +29,15 @@ import { SigninService } from './SigninService.js';
 import type { AuthenticationResponseJSON, PublicKeyCredentialRequestOptionsJSON } from '@simplewebauthn/types';
 import type { FastifyReply, FastifyRequest } from 'fastify';
 
+/**
+ * next を指定すると、次にクライアント側で行うべき処理を指定できる。
+ *
+ * - `captcha`: パスワードと、（有効になっている場合は）CAPTCHAを求める
+ * - `password`: パスワードを求める
+ * - `totp`: ワンタイムパスワードを求める
+ * - `passkey`: WebAuthn認証を求める（WebAuthnに対応していないブラウザの場合はワンタイムパスワード）
+ */
+
 type SigninErrorResponse = {
 	id: string;
 	next?: 'captcha' | 'password' | 'totp';

From fdc696b69c82b66eb7e678af8a41ece0ab560d4b Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:17:46 +0900
Subject: [PATCH 20/32] fix

---
 cypress/e2e/basic.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/basic.cy.ts b/cypress/e2e/basic.cy.ts
index 91c677d73883..c9d7e0a24a4d 100644
--- a/cypress/e2e/basic.cy.ts
+++ b/cypress/e2e/basic.cy.ts
@@ -149,7 +149,7 @@ describe('After user signup', () => {
 		cy.get('[data-cy-signin-username] input').type('alice{enter}');
 
 		// TODO: cypressにブラウザの言語指定できる機能が実装され次第英語のみテストするようにする
-		cy.contains(/ユーザーが見つかりません|User not found/gi);
+		cy.contains(/アカウントが凍結されています|This account has been suspended due to/gi);
 	});
 });
 

From 1e88676213896182407d215a74d556f5eb90be81 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:02:24 +0900
Subject: [PATCH 21/32] fix test

---
 packages/backend/test/e2e/users.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/backend/test/e2e/users.ts b/packages/backend/test/e2e/users.ts
index 8ebe9af792a9..029d5845dec3 100644
--- a/packages/backend/test/e2e/users.ts
+++ b/packages/backend/test/e2e/users.ts
@@ -83,9 +83,6 @@ describe('ユーザー', () => {
 			publicReactions: user.publicReactions,
 			followingVisibility: user.followingVisibility,
 			followersVisibility: user.followersVisibility,
-			twoFactorEnabled: user.twoFactorEnabled,
-			usePasswordLessLogin: user.usePasswordLessLogin,
-			securityKeys: user.securityKeys,
 			roles: user.roles,
 			memo: user.memo,
 		});
@@ -343,11 +340,13 @@ describe('ユーザー', () => {
 		assert.strictEqual(response.publicReactions, true);
 		assert.strictEqual(response.followingVisibility, 'public');
 		assert.strictEqual(response.followersVisibility, 'public');
+		assert.deepStrictEqual(response.roles, []);
+		assert.strictEqual(response.memo, null);
+
+		// UserDetailedNotMeOnlyであるが自分もしくはモデレーターのみが取得可能な値
 		assert.strictEqual(response.twoFactorEnabled, false);
 		assert.strictEqual(response.usePasswordLessLogin, false);
 		assert.strictEqual(response.securityKeys, false);
-		assert.deepStrictEqual(response.roles, []);
-		assert.strictEqual(response.memo, null);
 
 		// MeDetailedOnly
 		assert.strictEqual(response.avatarId, null);
@@ -618,6 +617,9 @@ describe('ユーザー', () => {
 		{ label: 'Moderatorになっている', user: () => userModerator, me: () => userModerator, selector: (user: misskey.entities.MeDetailed) => user.isModerator },
 		// @ts-expect-error UserDetailedNotMe doesn't include isModerator
 		{ label: '自分以外から見たときはModeratorか判定できない', user: () => userModerator, selector: (user: misskey.entities.UserDetailedNotMe) => user.isModerator, expected: () => undefined },
+		{ label: '自分から見た場合に二要素認証関連のプロパティがセットされている', user: () => alice, me: () => alice, selector: (user: misskey.entities.MeDetailed) => user.twoFactorEnabled, expected: () => false },
+		{ label: '自分以外から見た場合に二要素認証関連のプロパティがセットされていない', user: () => alice, selector: (user: misskey.entities.UserDetailedNotMe) => user.twoFactorEnabled, expected: () => undefined },
+		{ label: 'モデレーターから見た場合に二要素認証関連のプロパティがセットされている', user: () => alice, me: () => userModerator, selector: (user: misskey.entities.UserDetailedNotMe) => user.twoFactorEnabled, expected: () => false },
 		{ label: 'サイレンスになっている', user: () => userSilenced, selector: (user: misskey.entities.UserDetailed) => user.isSilenced },
 		// FIXME: 落ちる
 		//{ label: 'サスペンドになっている', user: () => userSuspended, selector: (user: misskey.entities.UserDetailed) => user.isSuspended },

From 374e7d5c324def6163162100cc0e766c7bb73d54 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:11:14 +0900
Subject: [PATCH 22/32] attempt to fix test

---
 packages/backend/test/e2e/users.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/backend/test/e2e/users.ts b/packages/backend/test/e2e/users.ts
index 029d5845dec3..0201a8089501 100644
--- a/packages/backend/test/e2e/users.ts
+++ b/packages/backend/test/e2e/users.ts
@@ -85,6 +85,10 @@ describe('ユーザー', () => {
 			followersVisibility: user.followersVisibility,
 			roles: user.roles,
 			memo: user.memo,
+			// 自分とモデレーターのみが取得可能な値
+			twoFactorEnabled: user.twoFactorEnabled,
+			usePasswordLessLogin: user.usePasswordLessLogin,
+			securityKeys: user.securityKeys,
 		});
 	};
 

From 11341877419798cf5799c7e0888c7762504098ac Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:24:49 +0900
Subject: [PATCH 23/32] fix test

---
 packages/backend/src/models/json-schema/user.ts | 15 +++++++++++++++
 packages/backend/test/e2e/users.ts              | 15 ++++++---------
 packages/misskey-js/src/autogen/types.ts        |  6 ++++++
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/backend/src/models/json-schema/user.ts b/packages/backend/src/models/json-schema/user.ts
index c87100b59fff..9cffd680f29b 100644
--- a/packages/backend/src/models/json-schema/user.ts
+++ b/packages/backend/src/models/json-schema/user.ts
@@ -627,6 +627,21 @@ export const packedMeDetailedOnlySchema = {
 			nullable: false, optional: false,
 			ref: 'RolePolicies',
 		},
+		twoFactorEnabled: {
+			type: 'boolean',
+			nullable: false, optional: false,
+			default: false,
+		},
+		usePasswordLessLogin: {
+			type: 'boolean',
+			nullable: false, optional: false,
+			default: false,
+		},
+		securityKeys: {
+			type: 'boolean',
+			nullable: false, optional: false,
+			default: false,
+		},
 		//#region secrets
 		email: {
 			type: 'string',
diff --git a/packages/backend/test/e2e/users.ts b/packages/backend/test/e2e/users.ts
index 0201a8089501..1c1092039a98 100644
--- a/packages/backend/test/e2e/users.ts
+++ b/packages/backend/test/e2e/users.ts
@@ -85,10 +85,6 @@ describe('ユーザー', () => {
 			followersVisibility: user.followersVisibility,
 			roles: user.roles,
 			memo: user.memo,
-			// 自分とモデレーターのみが取得可能な値
-			twoFactorEnabled: user.twoFactorEnabled,
-			usePasswordLessLogin: user.usePasswordLessLogin,
-			securityKeys: user.securityKeys,
 		});
 	};
 
@@ -150,6 +146,9 @@ describe('ユーザー', () => {
 			achievements: user.achievements,
 			loggedInDays: user.loggedInDays,
 			policies: user.policies,
+			twoFactorEnabled: user.twoFactorEnabled,
+			usePasswordLessLogin: user.usePasswordLessLogin,
+			securityKeys: user.securityKeys,
 			...(security ? {
 				email: user.email,
 				emailVerified: user.emailVerified,
@@ -347,11 +346,6 @@ describe('ユーザー', () => {
 		assert.deepStrictEqual(response.roles, []);
 		assert.strictEqual(response.memo, null);
 
-		// UserDetailedNotMeOnlyであるが自分もしくはモデレーターのみが取得可能な値
-		assert.strictEqual(response.twoFactorEnabled, false);
-		assert.strictEqual(response.usePasswordLessLogin, false);
-		assert.strictEqual(response.securityKeys, false);
-
 		// MeDetailedOnly
 		assert.strictEqual(response.avatarId, null);
 		assert.strictEqual(response.bannerId, null);
@@ -388,6 +382,9 @@ describe('ユーザー', () => {
 		assert.deepStrictEqual(response.achievements, []);
 		assert.deepStrictEqual(response.loggedInDays, 0);
 		assert.deepStrictEqual(response.policies, DEFAULT_POLICIES);
+		assert.strictEqual(response.twoFactorEnabled, false);
+		assert.strictEqual(response.usePasswordLessLogin, false);
+		assert.strictEqual(response.securityKeys, false);
 		assert.notStrictEqual(response.email, undefined);
 		assert.strictEqual(response.emailVerified, false);
 		assert.deepStrictEqual(response.securityKeysList, []);
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index fbf8d3e80d36..eb8361d486e1 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -3969,6 +3969,12 @@ export type components = {
         }[];
       loggedInDays: number;
       policies: components['schemas']['RolePolicies'];
+      /** @default false */
+      twoFactorEnabled: boolean;
+      /** @default false */
+      usePasswordLessLogin: boolean;
+      /** @default false */
+      securityKeys: boolean;
       email?: string | null;
       emailVerified?: boolean | null;
       securityKeysList?: {

From d5c96edbd805781737e025a3674a113258f02b3b Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:30:02 +0900
Subject: [PATCH 24/32] fix test

---
 packages/backend/test/e2e/users.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/backend/test/e2e/users.ts b/packages/backend/test/e2e/users.ts
index 1c1092039a98..c7587a5e3f8b 100644
--- a/packages/backend/test/e2e/users.ts
+++ b/packages/backend/test/e2e/users.ts
@@ -85,6 +85,9 @@ describe('ユーザー', () => {
 			followersVisibility: user.followersVisibility,
 			roles: user.roles,
 			memo: user.memo,
+			twoFactorEnabled: user.twoFactorEnabled ?? false,
+			usePasswordLessLogin: user.usePasswordLessLogin ?? false,
+			securityKeys: user.securityKeys ?? false,
 		});
 	};
 
@@ -146,9 +149,6 @@ describe('ユーザー', () => {
 			achievements: user.achievements,
 			loggedInDays: user.loggedInDays,
 			policies: user.policies,
-			twoFactorEnabled: user.twoFactorEnabled,
-			usePasswordLessLogin: user.usePasswordLessLogin,
-			securityKeys: user.securityKeys,
 			...(security ? {
 				email: user.email,
 				emailVerified: user.emailVerified,
@@ -619,7 +619,7 @@ describe('ユーザー', () => {
 		// @ts-expect-error UserDetailedNotMe doesn't include isModerator
 		{ label: '自分以外から見たときはModeratorか判定できない', user: () => userModerator, selector: (user: misskey.entities.UserDetailedNotMe) => user.isModerator, expected: () => undefined },
 		{ label: '自分から見た場合に二要素認証関連のプロパティがセットされている', user: () => alice, me: () => alice, selector: (user: misskey.entities.MeDetailed) => user.twoFactorEnabled, expected: () => false },
-		{ label: '自分以外から見た場合に二要素認証関連のプロパティがセットされていない', user: () => alice, selector: (user: misskey.entities.UserDetailedNotMe) => user.twoFactorEnabled, expected: () => undefined },
+		{ label: '自分以外から見た場合に二要素認証関連のプロパティがセットされていない', user: () => alice, me: () => bob, selector: (user: misskey.entities.UserDetailedNotMe) => user.twoFactorEnabled, expected: () => undefined },
 		{ label: 'モデレーターから見た場合に二要素認証関連のプロパティがセットされている', user: () => alice, me: () => userModerator, selector: (user: misskey.entities.UserDetailedNotMe) => user.twoFactorEnabled, expected: () => false },
 		{ label: 'サイレンスになっている', user: () => userSilenced, selector: (user: misskey.entities.UserDetailed) => user.isSilenced },
 		// FIXME: 落ちる

From 51c5bc69b5a3041b8410f6906f49f3198f113cb2 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:50:47 +0900
Subject: [PATCH 25/32] fix test

---
 packages/backend/test/e2e/2fa.ts | 96 +++++++++++++++++---------------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/packages/backend/test/e2e/2fa.ts b/packages/backend/test/e2e/2fa.ts
index 06548fa7da03..0475ee44463d 100644
--- a/packages/backend/test/e2e/2fa.ts
+++ b/packages/backend/test/e2e/2fa.ts
@@ -136,13 +136,7 @@ describe('2要素認証', () => {
 		keyName: string,
 		credentialId: Buffer,
 		requestOptions: PublicKeyCredentialRequestOptionsJSON,
-	}): {
-		username: string,
-		password: string,
-		credential: AuthenticationResponseJSON,
-		'g-recaptcha-response'?: string | null,
-		'hcaptcha-response'?: string | null,
-	} => {
+	}): misskey.entities.SigninRequest => {
 		// AuthenticatorAssertionResponse.authenticatorData
 		// https://developer.mozilla.org/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData
 		const authenticatorData = Buffer.concat([
@@ -202,11 +196,16 @@ describe('2要素認証', () => {
 		}, alice);
 		assert.strictEqual(doneResponse.status, 200);
 
-		const usersShowResponse = await api('users/show', {
-			username,
-		}, alice);
-		assert.strictEqual(usersShowResponse.status, 200);
-		assert.strictEqual((usersShowResponse.body as unknown as { twoFactorEnabled: boolean }).twoFactorEnabled, true);
+		const signinWithoutTokenResponse = await api('signin', {
+			...signinParam(),
+		});
+		assert.strictEqual(signinWithoutTokenResponse.status, 403);
+		assert.deepStrictEqual(signinWithoutTokenResponse.body, {
+			error: {
+				id: '144ff4f8-bd6c-41bc-82c3-b672eb09efbf',
+				next: 'totp',
+			},
+		});
 
 		const signinResponse = await api('signin', {
 			...signinParam(),
@@ -253,26 +252,28 @@ describe('2要素認証', () => {
 		assert.strictEqual(keyDoneResponse.body.id, credentialId.toString('base64url'));
 		assert.strictEqual(keyDoneResponse.body.name, keyName);
 
-		const usersShowResponse = await api('users/show', {
-			username,
-		});
-		assert.strictEqual(usersShowResponse.status, 200);
-		assert.strictEqual((usersShowResponse.body as unknown as { securityKeys: boolean }).securityKeys, true);
-
 		const signinResponse = await api('signin', {
 			...signinParam(),
 		});
-		assert.strictEqual(signinResponse.status, 200);
-		assert.strictEqual(signinResponse.body.i, undefined);
-		assert.notEqual((signinResponse.body as unknown as { challenge: unknown | undefined }).challenge, undefined);
-		assert.notEqual((signinResponse.body as unknown as { allowCredentials: unknown | undefined }).allowCredentials, undefined);
-		assert.strictEqual((signinResponse.body as unknown as { allowCredentials: {id: string}[] }).allowCredentials[0].id, credentialId.toString('base64url'));
+		const signinResponseBody = signinResponse.body as unknown as {
+			error: {
+				id: string;
+				next: 'passkey';
+				authRequest: PublicKeyCredentialRequestOptionsJSON;
+			};
+		};
+		assert.strictEqual(signinResponse.status, 403);
+		assert.strictEqual(signinResponseBody.error.id, '06e661b9-8146-4ae3-bde5-47138c0ae0c4');
+		assert.strictEqual(signinResponseBody.error.next, 'passkey');
+		assert.notEqual(signinResponseBody.error.authRequest.challenge, undefined);
+		assert.notEqual(signinResponseBody.error.authRequest.allowCredentials, undefined);
+		assert.strictEqual(signinResponseBody.error.authRequest.allowCredentials && signinResponseBody.error.authRequest.allowCredentials[0]?.id, credentialId.toString('base64url'));
 
 		const signinResponse2 = await api('signin', signinWithSecurityKeyParam({
 			keyName,
 			credentialId,
-			requestOptions: signinResponse.body,
-		} as any));
+			requestOptions: signinResponseBody.error.authRequest,
+		}));
 		assert.strictEqual(signinResponse2.status, 200);
 		assert.notEqual(signinResponse2.body.i, undefined);
 
@@ -315,9 +316,7 @@ describe('2要素認証', () => {
 		}, alice);
 		assert.strictEqual(passwordLessResponse.status, 204);
 
-		const usersShowResponse = await api('users/show', {
-			username,
-		});
+		const usersShowResponse = await api('i', {}, alice);
 		assert.strictEqual(usersShowResponse.status, 200);
 		assert.strictEqual((usersShowResponse.body as unknown as { usePasswordLessLogin: boolean }).usePasswordLessLogin, true);
 
@@ -325,14 +324,25 @@ describe('2要素認証', () => {
 			...signinParam(),
 			password: '',
 		});
-		assert.strictEqual(signinResponse.status, 200);
-		assert.strictEqual(signinResponse.body.i, undefined);
+		const signinResponseBody = signinResponse.body as unknown as {
+			error: {
+				id: string;
+				next: 'passkey';
+				authRequest: PublicKeyCredentialRequestOptionsJSON;
+			};
+		};
+		assert.strictEqual(signinResponse.status, 403);
+		assert.strictEqual(signinResponseBody.error.id, '06e661b9-8146-4ae3-bde5-47138c0ae0c4');
+		assert.strictEqual(signinResponseBody.error.next, 'passkey');
+		assert.notEqual(signinResponseBody.error.authRequest.challenge, undefined);
+		assert.notEqual(signinResponseBody.error.authRequest.allowCredentials, undefined);
+		assert.strictEqual(signinResponseBody.error.authRequest.allowCredentials && signinResponseBody.error.authRequest.allowCredentials[0]?.id, credentialId.toString('base64url'));
 
 		const signinResponse2 = await api('signin', {
 			...signinWithSecurityKeyParam({
 				keyName,
 				credentialId,
-				requestOptions: signinResponse.body,
+				requestOptions: signinResponseBody.error.authRequest,
 			} as any),
 			password: '',
 		});
@@ -424,11 +434,11 @@ describe('2要素認証', () => {
 		assert.strictEqual(keyDoneResponse.status, 200);
 
 		// テストの実行順によっては複数残ってるので全部消す
-		const iResponse = await api('i', {
+		const beforeIResponse = await api('i', {
 		}, alice);
-		assert.strictEqual(iResponse.status, 200);
-		assert.ok(iResponse.body.securityKeysList);
-		for (const key of iResponse.body.securityKeysList) {
+		assert.strictEqual(beforeIResponse.status, 200);
+		assert.ok(beforeIResponse.body.securityKeysList);
+		for (const key of beforeIResponse.body.securityKeysList) {
 			const removeKeyResponse = await api('i/2fa/remove-key', {
 				token: otpToken(registerResponse.body.secret),
 				password,
@@ -437,11 +447,9 @@ describe('2要素認証', () => {
 			assert.strictEqual(removeKeyResponse.status, 200);
 		}
 
-		const usersShowResponse = await api('users/show', {
-			username,
-		});
-		assert.strictEqual(usersShowResponse.status, 200);
-		assert.strictEqual((usersShowResponse.body as unknown as { securityKeys: boolean }).securityKeys, false);
+		const afterIResponse = await api('i', {}, alice);
+		assert.strictEqual(afterIResponse.status, 200);
+		assert.strictEqual(afterIResponse.body.securityKeys, false);
 
 		const signinResponse = await api('signin', {
 			...signinParam(),
@@ -468,11 +476,9 @@ describe('2要素認証', () => {
 		}, alice);
 		assert.strictEqual(doneResponse.status, 200);
 
-		const usersShowResponse = await api('users/show', {
-			username,
-		});
-		assert.strictEqual(usersShowResponse.status, 200);
-		assert.strictEqual((usersShowResponse.body as unknown as { twoFactorEnabled: boolean }).twoFactorEnabled, true);
+		const iResponse = await api('i', {}, alice);
+		assert.strictEqual(iResponse.status, 200);
+		assert.strictEqual(iResponse.body.twoFactorEnabled, true);
 
 		const unregisterResponse = await api('i/2fa/unregister', {
 			token: otpToken(registerResponse.body.secret),

From ee6e69c5cb8c3add829b53f813cfdf22274eee48 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:52:14 +0900
Subject: [PATCH 26/32] fix

---
 packages/backend/test/e2e/2fa.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/backend/test/e2e/2fa.ts b/packages/backend/test/e2e/2fa.ts
index 0475ee44463d..7baff4931620 100644
--- a/packages/backend/test/e2e/2fa.ts
+++ b/packages/backend/test/e2e/2fa.ts
@@ -316,9 +316,9 @@ describe('2要素認証', () => {
 		}, alice);
 		assert.strictEqual(passwordLessResponse.status, 204);
 
-		const usersShowResponse = await api('i', {}, alice);
-		assert.strictEqual(usersShowResponse.status, 200);
-		assert.strictEqual((usersShowResponse.body as unknown as { usePasswordLessLogin: boolean }).usePasswordLessLogin, true);
+		const iResponse = await api('i', {}, alice);
+		assert.strictEqual(iResponse.status, 200);
+		assert.strictEqual((iResponse.body as unknown as { usePasswordLessLogin: boolean }).usePasswordLessLogin, true);
 
 		const signinResponse = await api('signin', {
 			...signinParam(),

From e8d93e791ebef0fe356a6ce19933a22a071993cd Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 3 Oct 2024 23:04:28 +0900
Subject: [PATCH 27/32] fix test

---
 packages/backend/test/e2e/2fa.ts   | 3 +--
 packages/backend/test/e2e/users.ts | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/backend/test/e2e/2fa.ts b/packages/backend/test/e2e/2fa.ts
index 7baff4931620..88c32b434692 100644
--- a/packages/backend/test/e2e/2fa.ts
+++ b/packages/backend/test/e2e/2fa.ts
@@ -318,7 +318,7 @@ describe('2要素認証', () => {
 
 		const iResponse = await api('i', {}, alice);
 		assert.strictEqual(iResponse.status, 200);
-		assert.strictEqual((iResponse.body as unknown as { usePasswordLessLogin: boolean }).usePasswordLessLogin, true);
+		assert.strictEqual(iResponse.body.usePasswordLessLogin, true);
 
 		const signinResponse = await api('signin', {
 			...signinParam(),
@@ -336,7 +336,6 @@ describe('2要素認証', () => {
 		assert.strictEqual(signinResponseBody.error.next, 'passkey');
 		assert.notEqual(signinResponseBody.error.authRequest.challenge, undefined);
 		assert.notEqual(signinResponseBody.error.authRequest.allowCredentials, undefined);
-		assert.strictEqual(signinResponseBody.error.authRequest.allowCredentials && signinResponseBody.error.authRequest.allowCredentials[0]?.id, credentialId.toString('base64url'));
 
 		const signinResponse2 = await api('signin', {
 			...signinWithSecurityKeyParam({
diff --git a/packages/backend/test/e2e/users.ts b/packages/backend/test/e2e/users.ts
index c7587a5e3f8b..822ca14ae6c3 100644
--- a/packages/backend/test/e2e/users.ts
+++ b/packages/backend/test/e2e/users.ts
@@ -85,9 +85,6 @@ describe('ユーザー', () => {
 			followersVisibility: user.followersVisibility,
 			roles: user.roles,
 			memo: user.memo,
-			twoFactorEnabled: user.twoFactorEnabled ?? false,
-			usePasswordLessLogin: user.usePasswordLessLogin ?? false,
-			securityKeys: user.securityKeys ?? false,
 		});
 	};
 
@@ -149,6 +146,9 @@ describe('ユーザー', () => {
 			achievements: user.achievements,
 			loggedInDays: user.loggedInDays,
 			policies: user.policies,
+			twoFactorEnabled: user.twoFactorEnabled,
+			usePasswordLessLogin: user.usePasswordLessLogin,
+			securityKeys: user.securityKeys,
 			...(security ? {
 				email: user.email,
 				emailVerified: user.emailVerified,

From 88325d8e5eb59abd952bc7de17243bb15387b069 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 4 Oct 2024 09:35:08 +0900
Subject: [PATCH 28/32] =?UTF-8?q?fix:=20=E4=B8=80=E9=83=A8=E3=81=AE?=
 =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=81=8C=E3=81=A1=E3=82=83=E3=82=93?=
 =?UTF-8?q?=E3=81=A8=E5=87=BA=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkSignin.vue | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 2a521e011910..81a98cae0e4c 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -163,16 +163,6 @@ async function onUsernameSubmitted(username: string) {
 		username,
 	}).catch(() => null);
 
-	if (userInfo.value == null) {
-		await os.alert({
-			type: 'error',
-			title: i18n.ts.noSuchUser,
-			text: i18n.ts.signinFailed,
-		});
-		waiting.value = false;
-		return;
-	}
-
 	await tryLogin({
 		username,
 	});
@@ -223,15 +213,19 @@ async function onTotpSubmitted(token: string) {
 }
 
 async function tryLogin(req: Partial<Misskey.entities.SigninRequest>): Promise<Misskey.entities.SigninResponse> {
-	if (userInfo.value == null) {
-		throw new Error('No such user');
-	}
-
 	const _req = {
-		username: userInfo.value.username,
+		username: req.username ?? userInfo.value?.username,
 		...req,
 	};
 
+	function assertIsSigninRequest(x: Partial<Misskey.entities.SigninRequest>): x is Misskey.entities.SigninRequest {
+		return x.username != null;
+	}
+
+	if (!assertIsSigninRequest(_req)) {
+		throw new Error('Invalid request');
+	}
+
 	return await misskeyApi('signin', _req).then(async (res) => {
 		emit('login', res);
 		await onLoginSucceeded(res);

From 46f68cb6be1d258c4686406b2bc48c5beeef3b67 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:00:18 +0900
Subject: [PATCH 29/32] Update Changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d354af9f9b15..a31be063f008 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 - サーバー初期設定時に使用する初期パスワードを設定できるようになりました。今後Misskeyサーバーを新たに設置する際には、初回の起動前にコンフィグファイルの`setupPassword`をコメントアウトし、初期パスワードを設定することをおすすめします。（すでに初期設定を完了しているサーバーについては、この変更に伴い対応する必要はありません）  
   - ホスティングサービスを運営している場合は、コンフィグファイルを構築する際に`setupPassword`をランダムな値に設定し、ユーザーに通知するようにシステムを更新することをおすすめします。
   - なお、初期パスワードが設定されていない場合でも初期設定を行うことが可能です（UI上で初期パスワードの入力欄を空欄にすると続行できます）。
+- ユーザーデータを読み込む際の型が一部変更されました。
+	- `twoFactorEnabled`, `usePasswordLessLogin`, `securityKeys`: 自分とモデレーター以外のユーザーからは取得できなくなりました
 
 ### General
 - Feat: サーバー初期設定時に初期パスワードを設定できるように
@@ -18,6 +20,7 @@
 
 ### Server
 - Enhance: セキュリティ向上のため、ログイン時にメール通知を行うように
+- Enhance: 自分とモデレーター以外のユーザーから二要素認証関連のデータが取得できないように
 
 
 ## 2024.9.0

From 9cf047c44e9050942c9c3a103a3c517887e6888a Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:51:08 +0900
Subject: [PATCH 30/32] :art:

---
 .../src/components/MkSignin.input.vue         |  4 +-
 .../src/components/MkSignin.passkey.vue       |  2 +-
 .../src/components/MkSignin.password.vue      |  2 +-
 .../frontend/src/components/MkSignin.totp.vue |  2 +-
 .../src/components/MkSigninDialog.vue         | 38 +++++++++++++------
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index 67ebcbdd93c3..6336b78c8031 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.wrapper" data-cy-signin-page-input>
 	<div :class="$style.root">
-		<div :class="$style.avatar" :style="{ marginBottom: message ? '1.5em' : undefined }">
+		<div :class="$style.avatar">
 			<i class="ti ti-user"></i>
 		</div>
 
@@ -153,7 +153,7 @@ async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<v
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 300px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSignin.passkey.vue b/packages/frontend/src/components/MkSignin.passkey.vue
index 297db95f8907..0d68955fab97 100644
--- a/packages/frontend/src/components/MkSignin.passkey.vue
+++ b/packages/frontend/src/components/MkSignin.passkey.vue
@@ -66,7 +66,7 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 0748c59ffc72..2d79e2aeb155 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -125,7 +125,7 @@ defineExpose({
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSignin.totp.vue b/packages/frontend/src/components/MkSignin.totp.vue
index e64cdc1f262b..880c08315ea4 100644
--- a/packages/frontend/src/components/MkSignin.totp.vue
+++ b/packages/frontend/src/components/MkSignin.totp.vue
@@ -48,7 +48,7 @@ const isBackupCode = ref(false);
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index 5b10928aa08e..bd338257a117 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -11,11 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<div :class="$style.root">
-		<div :class="$style.header"><i class="ti ti-login-2"></i> {{ i18n.ts.login }}</div>
-		<button :class="$style.closeButton" class="_button" @click="onClose"><i class="ti ti-x"></i></button>
-		<MkSpacer :marginMin="20" :marginMax="28" style="margin: auto;">
+		<div :class="$style.header">
+			<div :class="$style.headerText"><i class="ti ti-login-2"></i> {{ i18n.ts.login }}</div>
+			<button :class="$style.closeButton" class="_button" @click="onClose"><i class="ti ti-x"></i></button>
+		</div>
+		<div :class="$style.content">
 			<MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/>
-		</MkSpacer>
+		</div>
 	</div>
 </MkModal>
 </template>
@@ -58,11 +60,9 @@ function onLogin(res) {
 
 <style lang="scss" module>
 .root {
-	display: flex;
 	overflow: auto;
 	margin: auto;
 	position: relative;
-	padding: 32px;
 	width: 100%;
 	max-width: 400px;
 	height: 100%;
@@ -73,19 +73,33 @@ function onLogin(res) {
 }
 
 .header {
-	position: absolute;
+	position: sticky;
 	top: 0;
 	left: 0;
+	width: 100%;
+	min-height: 50px;
+	display: flex;
+	align-items: center;
 	font-weight: bold;
-	padding: 16px 20px;
+	backdrop-filter: var(--blur, blur(15px));
+	background: var(--acrylicBg);
+	border-bottom: solid .5px var(--divider);
+	z-index: 1;
+}
+
+.headerText {
+	padding: 0 20px;
+	box-sizing: border-box;
 }
 
 .closeButton {
-	position: absolute;
-	z-index: 1;
-	top: 0;
-	right: 0;
+	margin-left: auto;
 	padding: 16px;
 	font-size: 16px;
 }
+
+.content {
+	padding: 32px;
+	box-sizing: border-box;
+}
 </style>

From 70e772ed28de5c4495f7fa733f66b97581796ee7 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 4 Oct 2024 11:09:44 +0900
Subject: [PATCH 31/32] :art:

---
 packages/frontend/src/components/MkSigninDialog.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index bd338257a117..25e35a7876b7 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -77,13 +77,14 @@ function onLogin(res) {
 	top: 0;
 	left: 0;
 	width: 100%;
-	min-height: 50px;
+	height: 50px;
+	box-sizing: border-box;
 	display: flex;
 	align-items: center;
 	font-weight: bold;
 	backdrop-filter: var(--blur, blur(15px));
 	background: var(--acrylicBg);
-	border-bottom: solid .5px var(--divider);
+	border-bottom: solid 1px var(--divider);
 	z-index: 1;
 }
 
@@ -96,6 +97,7 @@ function onLogin(res) {
 	margin-left: auto;
 	padding: 16px;
 	font-size: 16px;
+	line-height: 16px;
 }
 
 .content {

From 6efa4a3ef6573d53cce75c9fc56fb2a9cf474b25 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 4 Oct 2024 12:00:11 +0900
Subject: [PATCH 32/32] remove border

---
 packages/frontend/src/components/MkSigninDialog.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index 25e35a7876b7..8351d7d5e044 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -84,7 +84,6 @@ function onLogin(res) {
 	font-weight: bold;
 	backdrop-filter: var(--blur, blur(15px));
 	background: var(--acrylicBg);
-	border-bottom: solid 1px var(--divider);
 	z-index: 1;
 }