Merge pull request #2356 from logto-io/merge/suspend

chore: merge branch master into feature/suspend
2025-03-31 22:51:25 -05:00 · 2022-11-09 11:45:11 +08:00 · 2022-11-09 11:45:11 +08:00 · fc44c9a503
commit fc44c9a503
parent 73bb938c3c 854e373b81
386 changed files with 12636 additions and 4758 deletions
--- a/.changeset/config.json
+++ b/.changeset/config.json
@ -12,13 +12,6 @@
    "@logto/integration-tests",
    "@logto/ui"
  ]],
-  "//": "Ignore other release group members, only keep the major one.",
-  "ignore": [
-    "@logto/create",
-    "@logto/console",
-    "@logto/integration-tests",
-    "@logto/ui"
-  ],
  "linked": [[
    "@logto/phrases",
    "@logto/phrases-ui",
--- a/.changeset/fifty-balloons-taste.md
+++ b/.changeset/fifty-balloons-taste.md
@ -0,0 +1,6 @@
+---
+"@logto/phrases": minor
+"@logto/phrases-ui": minor
+---
+
+Add German language
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@ -0,0 +1,18 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@logto/cli": "1.0.0-beta.12",
+    "@logto/console": "1.0.0-beta.12",
+    "@logto/core": "1.0.0-beta.12",
+    "@logto/create": "1.0.0-beta.12",
+    "@logto/demo-app": "1.0.0-beta.12",
+    "@logto/integration-tests": "1.0.0-beta.12",
+    "@logto/phrases": "1.0.0-beta.12",
+    "@logto/phrases-ui": "1.0.0-beta.12",
+    "@logto/schemas": "1.0.0-beta.12",
+    "@logto/shared": "1.0.0-beta.12",
+    "@logto/ui": "1.0.0-beta.12"
+  },
+  "changesets": []
+}
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -0,0 +1,13 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {}
+  },
+  "updateContentCommand": "npm i -g pnpm && pnpm i && pnpm prepack && pnpm cli connector add --official -p .",
+  "postStartCommand": "docker run -d -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=p0stgr3s postgres:14-alpine",
+  "postAttachCommand": "pnpm cli db seed && [[ ! -z $CODESPACES  ]] && export ENDPOINT=https://$CODESPACE_NAME-3001.preview.app.github.dev",
+  "containerEnv": {
+    "DB_URL": "postgres://postgres:p0stgr3s@localhost:5432/logto",
+    "TRUST_PROXY_HEADER": "1"
+  }
+}
--- a/.github/workflows/integration-test.yml
+++ b/.github/workflows/integration-test.yml
@ -38,9 +38,9 @@ jobs:

    strategy:
      matrix:
-        os: [ubuntu-latest]
+        node_version: [16, 18]

-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
@ -55,6 +55,7 @@ jobs:
      - name: Setup Node and pnpm
        uses: silverhand-io/actions-node-pnpm-run-steps@v2
        with:
+          node-version: ${{ matrix.node_version }}
          run-install: false

      # Setup integration test
@ -63,6 +64,9 @@ jobs:
          cd tests
          pnpm i
          pnpm prepack
+          # Install Chromium
+          cd packages/integration-tests/node_modules/puppeteer
+          pnpm postinstall

      # Setup environment
      - name: Setup Postgres
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -47,11 +47,17 @@ jobs:
  main-test:
    runs-on: ubuntu-latest

+    strategy:
+      matrix:
+        node_version: [16, 18]
+
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node and pnpm
        uses: silverhand-io/actions-node-pnpm-run-steps@v2
+        with:
+          node-version: ${{ matrix.node_version }}

      - name: Prepack
        run: pnpm prepack
--- a/.gitignore
+++ b/.gitignore
@ -29,6 +29,7 @@ cache
 .idea/
 *.pem
 .history
+fly.toml

 # connectors
 /packages/core/connectors
--- a/5
+++ b/5
@ -2,13 +2,14 @@
 FROM node:16-alpine as builder
 WORKDIR /etc/logto
 ENV CI=true
-COPY . .

 # Install toolchain
-RUN npm add --location=global pnpm@^7.2.1
+RUN npm add --location=global pnpm@^7.14.0
 # https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md#node-gyp-alpine
 RUN apk add --no-cache python3 make g++

+COPY . .
+
 # Install dependencies and build
 RUN pnpm i
 RUN pnpm -r build
--- a/package.json
+++ b/package.json
@ -33,8 +33,8 @@
    ]
  },
  "engines": {
-    "node": ">=14.15.0",
-    "pnpm": ">=6"
+    "node": "^16.13.0 || ^18.12.0",
+    "pnpm": "^7.14.0"
  },
  "alias": {
    "html-parse-stringify": "html-parse-stringify/dist/html-parse-stringify.module.js",
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -34,7 +34,7 @@
    "prepack": "pnpm build"
  },
  "engines": {
-    "node": "^16.0.0"
+    "node": "^16.13.0 || ^18.12.0"
  },
  "bugs": {
    "url": "https://github.com/logto-io/logto/issues"
@ -47,7 +47,7 @@
    "decamelize": "^5.0.0",
    "dotenv": "^16.0.0",
    "fs-extra": "^10.1.0",
-    "got": "^11.8.2",
+    "got": "^11.8.5",
    "hpagent": "^1.0.0",
    "inquirer": "^8.2.2",
    "nanoid": "^3.3.4",
--- a/packages/cli/src/commands/connector/utils.ts
+++ b/packages/cli/src/commands/connector/utils.ts
@ -1,6 +1,6 @@
 import { exec } from 'child_process';
 import { existsSync } from 'fs';
-import { readFile, mkdir, unlink, readdir } from 'fs/promises';
+import { readFile, mkdir, unlink } from 'fs/promises';
 import path from 'path';
 import { promisify } from 'util';

@ -13,7 +13,7 @@ import tar from 'tar';
 import { z } from 'zod';

 import { connectorDirectory } from '../../constants';
-import { isTty, log, oraPromise } from '../../utilities';
+import { getConnectorPackagesFromDirectory, isTty, log, oraPromise } from '../../utilities';
 import { defaultPath } from '../install/utils';

 const coreDirectory = 'packages/core';
@ -102,40 +102,10 @@ const getConnectorDirectory = (instancePath: string) =>
 export const isOfficialConnector = (packageName: string) =>
  packageName.startsWith('@logto/connector-');

-const getConnectorPackageName = async (directory: string) => {
-  const filePath = path.join(directory, 'package.json');
-
-  if (!existsSync(filePath)) {
-    return;
-  }
-
-  const json = await readFile(filePath, 'utf8');
-  const { name } = z.object({ name: z.string() }).parse(JSON.parse(json));
-
-  if (name.startsWith('connector-') || Boolean(name.split('/')[1]?.startsWith('connector-'))) {
-    return name;
-  }
-};
-
-export type ConnectorPackage = {
-  name: string;
-  path: string;
-};
-
 export const getConnectorPackagesFrom = async (instancePath?: string) => {
  const directory = getConnectorDirectory(await inquireInstancePath(instancePath));
-  const content = await readdir(directory, 'utf8');
-  const rawPackages = await Promise.all(
-    content.map(async (value) => {
-      const currentDirectory = path.join(directory, value);

-      return { name: await getConnectorPackageName(currentDirectory), path: currentDirectory };
-    })
-  );
-
-  return rawPackages.filter(
-    (packageInfo): packageInfo is ConnectorPackage => typeof packageInfo.name === 'string'
-  );
+  return getConnectorPackagesFromDirectory(directory);
 };

 export const addConnectors = async (instancePath: string, packageNames: string[]) => {
--- a/packages/cli/src/commands/install/utils.ts
+++ b/packages/cli/src/commands/install/utils.ts
@ -27,16 +27,17 @@ export const defaultPath = path.join(os.homedir(), 'logto');
 const pgRequired = new semver.SemVer('14.0.0');

 export const validateNodeVersion = () => {
-  const required = new semver.SemVer('16.0.0');
+  const required = [new semver.SemVer('16.13.0'), new semver.SemVer('18.12.0')];
+  const requiredVersionString = required.map((version) => '^' + version.version).join(' || ');
  const current = new semver.SemVer(execSync('node -v', { encoding: 'utf8', stdio: 'pipe' }));

-  if (required.compare(current) > 0) {
-    log.error(`Logto requires NodeJS >=${required.version}, but ${current.version} found.`);
+  if (required.every((version) => version.major !== current.major)) {
+    log.error(`Logto requires NodeJS ${requiredVersionString}, but ${current.version} found.`);
  }

-  if (current.major > required.major) {
+  if (required.some((version) => version.major === current.major && version.compare(current) > 0)) {
    log.warn(
-      `Logto is tested under NodeJS ^${required.version}, but version ${current.version} found.`
+      `Logto is tested under NodeJS ${requiredVersionString}, but version ${current.version} found.`
    );
  }
 };
--- a/packages/cli/src/database.ts
+++ b/packages/cli/src/database.ts
@ -50,7 +50,9 @@ export const createPoolAndDatabaseIfNeeded = async () => {
    // - Database name is required to connect in the previous pool
    // - It will throw error when creating database using '?'
    const databaseName = dsn.databaseName ?? '?';
-    const maintenancePool = await createPool(stringifyDsn({ ...dsn, databaseName: 'postgres' }));
+    const maintenancePool = await createPool(stringifyDsn({ ...dsn, databaseName: 'postgres' }), {
+      interceptors: createInterceptors(),
+    });
    await maintenancePool.query(sql`
      create database ${sql.identifier([databaseName])}
        with
--- a/packages/cli/src/utilities.ts
+++ b/packages/cli/src/utilities.ts
@ -1,5 +1,6 @@
 import { execSync } from 'child_process';
-import { createWriteStream } from 'fs';
+import { createWriteStream, existsSync } from 'fs';
+import { readdir, readFile } from 'fs/promises';
 import path from 'path';

 import type { Optional } from '@silverhand/essentials';
@ -10,6 +11,7 @@ import got from 'got';
 import { HttpsProxyAgent } from 'hpagent';
 import inquirer from 'inquirer';
 import ora from 'ora';
+import { z } from 'zod';

 export const safeExecSync = (command: string) => {
  try {
@ -173,3 +175,38 @@ export function findLastIndex<T>(

  return -1;
 }
+
+const getConnectorPackageName = async (directory: string) => {
+  const filePath = path.join(directory, 'package.json');
+
+  if (!existsSync(filePath)) {
+    return;
+  }
+
+  const json = await readFile(filePath, 'utf8');
+  const { name } = z.object({ name: z.string() }).parse(JSON.parse(json));
+
+  if (name.startsWith('connector-') || Boolean(name.split('/')[1]?.startsWith('connector-'))) {
+    return name;
+  }
+};
+
+export type ConnectorPackage = {
+  name: string;
+  path: string;
+};
+
+export const getConnectorPackagesFromDirectory = async (directory: string) => {
+  const content = await readdir(directory, 'utf8');
+  const rawPackages = await Promise.all(
+    content.map(async (value) => {
+      const currentDirectory = path.join(directory, value);
+
+      return { name: await getConnectorPackageName(currentDirectory), path: currentDirectory };
+    })
+  );
+
+  return rawPackages.filter(
+    (packageInfo): packageInfo is ConnectorPackage => typeof packageInfo.name === 'string'
+  );
+};
--- a/packages/console/package.json
+++ b/packages/console/package.json
@ -22,7 +22,7 @@
    "@logto/language-kit": "1.0.0-beta.20",
    "@logto/phrases": "workspace:^",
    "@logto/phrases-ui": "workspace:^",
-    "@logto/react": "1.0.0-beta.11",
+    "@logto/react": "1.0.0-beta.13",
    "@logto/schemas": "workspace:^",
    "@mdx-js/react": "^1.6.22",
    "@parcel/core": "2.7.0",
@ -36,6 +36,7 @@
    "@silverhand/ts-config-react": "1.2.1",
    "@tsconfig/docusaurus": "^1.0.5",
    "@types/color": "^3.0.3",
+    "@types/lodash.get": "^4.4.7",
    "@types/lodash.kebabcase": "^4.1.6",
    "@types/mdx": "^2.0.1",
    "@types/mdx-js__react": "^1.5.5",
@ -48,6 +49,8 @@
    "cross-env": "^7.0.3",
    "csstype": "^3.0.11",
    "dayjs": "^1.10.5",
+    "deep-object-diff": "^1.1.7",
+    "date-fns": "^2.29.3",
    "deepmerge": "^4.2.2",
    "dnd-core": "^16.0.0",
    "eslint": "^8.21.0",
@ -56,6 +59,7 @@
    "i18next-browser-languagedetector": "^6.1.4",
    "ky": "^0.31.0",
    "lint-staged": "^13.0.0",
+    "lodash.get": "^4.4.2",
    "lodash.kebabcase": "^4.1.1",
    "nanoid": "^3.1.23",
    "parcel": "2.7.0",
@ -79,11 +83,23 @@
    "react-syntax-highlighter": "^15.5.0",
    "recharts": "^2.1.13",
    "remark-gfm": "^3.0.1",
+    "snake-case": "^3.0.4",
    "stylelint": "^14.9.1",
    "swr": "^1.3.0",
    "typescript": "^4.7.4",
    "zod": "^3.19.1"
  },
+  "engines": {
+    "node": "^16.13.0 || ^18.12.0"
+  },
+  "//": "https://github.com/parcel-bundler/parcel/issues/7636",
+  "targets": {
+    "default": {
+      "engines": {
+        "browsers": "defaults"
+      }
+    }
+  },
  "alias": {
    "@/*": "./src/$1",
    "@mdx/components/*": "./src/mdx-components/$1"
--- a/packages/console/src/assets/avatars/avatar-002.png
+++ b/packages/console/src/assets/avatars/avatar-002.png
--- a/packages/console/src/assets/avatars/avatar-005.png
+++ b/packages/console/src/assets/avatars/avatar-005.png
--- a/packages/console/src/assets/avatars/avatar-010.png
+++ b/packages/console/src/assets/avatars/avatar-010.png
--- a/packages/console/src/assets/images/switch-arrow.svg
+++ b/packages/console/src/assets/images/switch-arrow.svg
@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5915 7.7415L15.2581 4.40816C15.1804 4.33046 15.0882 4.26883 14.9867 4.22678C14.8851 4.18473 14.7763 4.16309 14.6665 4.16309C14.4445 4.16309 14.2317 4.25124 14.0748 4.40816C13.9179 4.56508 13.8297 4.77791 13.8297 4.99983C13.8297 5.22175 13.9179 5.43458 14.0748 5.5915L15.9915 7.49983H6.33312C6.11211 7.49983 5.90015 7.58763 5.74387 7.74391C5.58759 7.90019 5.49979 8.11215 5.49979 8.33316C5.49979 8.55418 5.58759 8.76614 5.74387 8.92242C5.90015 9.0787 6.11211 9.1665 6.33312 9.1665H17.9998C18.1643 9.16567 18.3249 9.11617 18.4613 9.02423C18.5978 8.93228 18.7039 8.80201 18.7665 8.64983C18.8303 8.49807 18.8477 8.33081 18.8166 8.16915C18.7854 8.00749 18.7071 7.85868 18.5915 7.7415ZM14.6665 10.8332H2.99979C2.83527 10.834 2.67467 10.8835 2.53824 10.9754C2.40181 11.0674 2.29564 11.1976 2.23312 11.3498C2.16931 11.5016 2.15187 11.6688 2.18302 11.8305C2.21416 11.9922 2.29249 12.141 2.40812 12.2582L5.74146 15.5915C5.81893 15.6696 5.91109 15.7316 6.01264 15.7739C6.11419 15.8162 6.22311 15.838 6.33312 15.838C6.44313 15.838 6.55206 15.8162 6.6536 15.7739C6.75515 15.7316 6.84732 15.6696 6.92479 15.5915C7.0029 15.514 7.06489 15.4219 7.1072 15.3203C7.14951 15.2188 7.17129 15.1098 7.17129 14.9998C7.17129 14.8898 7.14951 14.7809 7.1072 14.6793C7.06489 14.5778 7.0029 14.4856 6.92479 14.4082L5.00812 12.4998H14.6665C14.8875 12.4998 15.0994 12.412 15.2557 12.2558C15.412 12.0995 15.4998 11.8875 15.4998 11.6665C15.4998 11.4455 15.412 11.2335 15.2557 11.0772C15.0994 10.921 14.8875 10.8332 14.6665 10.8332Z" fill="currentColor"/>
+</svg>
--- a/packages/console/src/components/ActionMenu/index.tsx
+++ b/packages/console/src/components/ActionMenu/index.tsx
@ -1,6 +1,9 @@
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useRef, useState } from 'react';

+import type { HorizontalAlignment } from '@/hooks/use-position';
+
 import type { Props as ButtonProps } from '../Button';
 import Dropdown from '../Dropdown';
 import ActionMenuButton from './ActionMenuButton';
@ -12,9 +15,19 @@ type Props = {
  children: ReactNode;
  buttonProps: ButtonProps;
  title?: ReactNode;
+  dropdownHorizontalAlign?: HorizontalAlignment;
+  dropdownClassName?: string;
+  isDropdownFullWidth?: boolean;
 };

-const ActionMenu = ({ children, buttonProps, title }: Props) => {
+const ActionMenu = ({
+  children,
+  buttonProps,
+  title,
+  dropdownHorizontalAlign,
+  dropdownClassName,
+  isDropdownFullWidth = false,
+}: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  const anchorReference = useRef<HTMLDivElement>(null);

@ -31,7 +44,9 @@ const ActionMenu = ({ children, buttonProps, title }: Props) => {
        title={title}
        anchorRef={anchorReference}
        isOpen={isOpen}
-        className={styles.content}
+        className={classNames(styles.content, dropdownClassName)}
+        horizontalAlign={dropdownHorizontalAlign}
+        isFullWidth={isDropdownFullWidth}
        onClose={() => {
          setIsOpen(false);
        }}
--- a/packages/console/src/components/Alert/index.tsx
+++ b/packages/console/src/components/Alert/index.tsx
@ -15,6 +15,7 @@ type Props = {
  href?: string;
  onClick?: () => void;
  variant?: 'plain' | 'shadow';
+  className?: string;
 };

 const Alert = ({
@ -24,9 +25,10 @@ const Alert = ({
  onClick,
  severity = 'info',
  variant = 'plain',
+  className,
 }: Props) => {
  return (
-    <div className={classNames(styles.alert, styles[severity], styles[variant])}>
+    <div className={classNames(styles.alert, styles[severity], styles[variant], className)}>
      <div className={styles.icon}>
        <Info />
      </div>
--- a/packages/console/src/components/DateTime/index.tsx
+++ b/packages/console/src/components/DateTime/index.tsx
@ -1,18 +1,18 @@
 import type { Nullable } from '@silverhand/essentials';
-import dayjs from 'dayjs';
+import { isValid } from 'date-fns';

 type Props = {
  children: Nullable<string | number>;
 };

 const DateTime = ({ children }: Props) => {
-  const date = dayjs(children);
+  const date = children && new Date(children);

-  if (!children || !date.isValid()) {
+  if (!date || !isValid(date)) {
    return <span>-</span>;
  }

-  return <span>{date.toDate().toLocaleDateString()}</span>;
+  return <span>{date.toLocaleDateString()}</span>;
 };

 export default DateTime;
--- a/packages/console/src/components/IconButton/index.tsx
+++ b/packages/console/src/components/IconButton/index.tsx
@ -39,8 +39,8 @@ const IconButton = (
        <Tooltip
          anchorRef={innerReference}
          content={t(tooltip)}
+          position="top"
          horizontalAlign="center"
-          verticalAlign="top"
        />
      )}
    </>
--- a/packages/console/src/components/TipBubble/index.module.scss
+++ b/packages/console/src/components/TipBubble/index.module.scss
@ -0,0 +1,54 @@
+@use '@/scss/underscore' as _;
+
+.tipBubble {
+  position: relative;
+  border-radius: 8px;
+  background: var(--color-tooltip-background);
+  color: var(--color-tooltip-text);
+  box-shadow: var(--shadow-1);
+  padding: _.unit(2) _.unit(3);
+  font: var(--font-body-medium);
+  max-width: 300px;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: inherit;
+    border-radius: _.unit(0.5) 0 _.unit(0.5);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  &.top::after {
+    top: 100%;
+  }
+
+  &.right::after {
+    top: 50%;
+    left: 0%;
+  }
+
+  &.bottom::after {
+    top: 0%;
+  }
+
+  &.left::after {
+    top: 50%;
+    left: 100%;
+  }
+
+  &.start::after {
+    left: _.unit(10);
+  }
+
+
+  &.center::after {
+    left: 50%;
+  }
+
+  &.end::after {
+    right: _.unit(7.5);
+  }
+}
--- a/packages/console/src/components/TipBubble/index.tsx
+++ b/packages/console/src/components/TipBubble/index.tsx
@ -0,0 +1,43 @@
+import { conditional } from '@silverhand/essentials';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import type { ForwardedRef, ReactNode, HTMLProps } from 'react';
+
+import type { HorizontalAlignment } from '@/hooks/use-position';
+
+import * as styles from './index.module.scss';
+
+export type TipBubblePosition = 'top' | 'right' | 'bottom' | 'left';
+
+type Props = HTMLProps<HTMLDivElement> & {
+  children: ReactNode;
+  position?: TipBubblePosition;
+  horizontalAlignment?: HorizontalAlignment;
+  className?: string;
+};
+
+const supportHorizontalAlignmentPositions = new Set<TipBubblePosition>(['top', 'bottom']);
+
+const TipBubble = (
+  { children, position = 'bottom', horizontalAlignment = 'center', className, ...rest }: Props,
+  reference: ForwardedRef<HTMLDivElement>
+) => {
+  return (
+    <div
+      {...rest}
+      ref={reference}
+      className={classNames(
+        styles.tipBubble,
+        styles[position],
+        conditional(
+          supportHorizontalAlignmentPositions.has(position) && styles[horizontalAlignment]
+        ),
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef(TipBubble);
--- a/packages/console/src/components/TipBubble/utils.ts
+++ b/packages/console/src/components/TipBubble/utils.ts
@ -0,0 +1,57 @@
+import type { HorizontalAlignment, VerticalAlignment } from '@/hooks/use-position';
+
+import type { TipBubblePosition } from '.';
+
+export const getVerticalOffset = (position: TipBubblePosition) => {
+  switch (position) {
+    case 'top':
+      return -16;
+    case 'bottom':
+      return 16;
+    default:
+      return 0;
+  }
+};
+
+export const getHorizontalOffset = (
+  tooltipPosition: TipBubblePosition,
+  horizontalAlignment: HorizontalAlignment
+): number => {
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    switch (horizontalAlignment) {
+      case 'start':
+        return -32;
+      case 'end':
+        return 32;
+      default:
+        return 0;
+    }
+  } else {
+    return tooltipPosition === 'left' ? -32 : 32;
+  }
+};
+
+export const getVerticalAlignment = (position: TipBubblePosition): VerticalAlignment => {
+  switch (position) {
+    case 'top':
+      return 'top';
+    case 'bottom':
+      return 'bottom';
+    default:
+      return 'middle';
+  }
+};
+
+export const getHorizontalAlignment = (
+  position: TipBubblePosition,
+  fallback: HorizontalAlignment
+): HorizontalAlignment => {
+  switch (position) {
+    case 'right':
+      return 'start';
+    case 'left':
+      return 'end';
+    default:
+      return fallback;
+  }
+};
--- a/packages/console/src/components/ToggleTip/index.module.scss
+++ b/packages/console/src/components/ToggleTip/index.module.scss
@ -0,0 +1,16 @@
+@use '@/scss/underscore' as _;
+
+.content {
+  box-shadow: var(--shadow-2);
+  position: absolute;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.overlay {
+  background: transparent;
+  position: fixed;
+  inset: 0;
+}
--- a/packages/console/src/components/ToggleTip/index.tsx
+++ b/packages/console/src/components/ToggleTip/index.tsx
@ -0,0 +1,78 @@
+import type { HTMLProps, ReactNode, RefObject } from 'react';
+import { useRef } from 'react';
+import ReactModal from 'react-modal';
+
+import type { HorizontalAlignment } from '@/hooks/use-position';
+import usePosition from '@/hooks/use-position';
+
+import type { TipBubblePosition } from '../TipBubble';
+import TipBubble from '../TipBubble';
+import {
+  getVerticalAlignment,
+  getHorizontalAlignment,
+  getVerticalOffset,
+  getHorizontalOffset,
+} from '../TipBubble/utils';
+import * as styles from './index.module.scss';
+
+type Props = HTMLProps<HTMLDivElement> & {
+  children: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  anchorRef: RefObject<HTMLElement>;
+  position?: TipBubblePosition;
+  horizontalAlign?: HorizontalAlignment;
+};
+
+const ToggleTip = ({
+  children,
+  isOpen,
+  onClose,
+  anchorRef,
+  position = 'top',
+  horizontalAlign = 'start',
+}: Props) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const {
+    position: layoutPosition,
+    positionState,
+    mutate,
+  } = usePosition({
+    verticalAlign: getVerticalAlignment(position),
+    horizontalAlign: getHorizontalAlignment(position, horizontalAlign),
+    offset: {
+      vertical: getVerticalOffset(position),
+      horizontal: getHorizontalOffset(position, horizontalAlign),
+    },
+    anchorRef,
+    overlayRef,
+  });
+
+  return (
+    <ReactModal
+      shouldCloseOnOverlayClick
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      style={{
+        content: {
+          ...layoutPosition,
+        },
+      }}
+      className={styles.content}
+      overlayClassName={styles.overlay}
+      onRequestClose={onClose}
+      onAfterOpen={mutate}
+    >
+      <TipBubble
+        ref={overlayRef}
+        position={position}
+        horizontalAlignment={positionState.horizontalAlign}
+      >
+        {children}
+      </TipBubble>
+    </ReactModal>
+  );
+};
+
+export default ToggleTip;
--- a/packages/console/src/components/Tooltip/index.module.scss
+++ b/packages/console/src/components/Tooltip/index.module.scss
@ -2,48 +2,6 @@

 .tooltip {
  position: absolute;
-  border-radius: 8px;
-  background: var(--color-tooltip-background);
-  color: var(--color-tooltip-text);
-  box-shadow: var(--shadow-1);
-  padding: _.unit(2) _.unit(3);
-  font: var(--font-body-medium);
-  max-width: 300px;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    top: 100%;
-    left: 50%;
-    background-color: inherit;
-    border-radius: _.unit(0.5) 0 _.unit(0.5);
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-
-  &.arrowUp::after {
-    top: 0%;
-  }
-
-  &.arrowRight::after {
-    top: 50%;
-    left: 100%;
-  }
-
-  &.arrowLeft::after {
-    top: 50%;
-    left: 0%;
-  }
-
-  &.start::after {
-    left: _.unit(10);
-  }
-
-  &.end::after {
-    right: _.unit(10);
-  }

  .content {
    @include _.multi-line-ellipsis(6);
--- a/packages/console/src/components/Tooltip/index.tsx
+++ b/packages/console/src/components/Tooltip/index.tsx
@ -1,11 +1,18 @@
-import classNames from 'classnames';
 import type { ReactNode, RefObject } from 'react';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';

-import type { VerticalAlignment, HorizontalAlignment } from '@/hooks/use-position';
+import type { HorizontalAlignment } from '@/hooks/use-position';
 import usePosition from '@/hooks/use-position';

+import TipBubble from '../TipBubble';
+import type { TipBubblePosition } from '../TipBubble';
+import {
+  getVerticalAlignment,
+  getHorizontalAlignment,
+  getVerticalOffset,
+  getHorizontalOffset,
+} from '../TipBubble/utils';
 import * as styles from './index.module.scss';

 type Props = {
@ -13,20 +20,8 @@ type Props = {
  anchorRef: RefObject<Element>;
  className?: string;
  isKeepOpen?: boolean;
-  verticalAlign?: VerticalAlignment;
+  position?: TipBubblePosition;
  horizontalAlign?: HorizontalAlignment;
-  flip?: 'right' | 'left';
-};
-
-const getHorizontalOffset = (alignment: HorizontalAlignment, flipped: string): number => {
-  switch (alignment) {
-    case 'start':
-      return flipped === 'right' ? 32 : -32;
-    case 'end':
-      return flipped === 'left' ? -32 : 32;
-    default:
-      return 0;
-  }
 };

 const Tooltip = ({
@ -34,17 +29,23 @@ const Tooltip = ({
  anchorRef,
  className,
  isKeepOpen = false,
-  verticalAlign = 'top',
+  position = 'top',
  horizontalAlign = 'start',
-  flip,
 }: Props) => {
  const [tooltipDom, setTooltipDom] = useState<HTMLDivElement>();
  const tooltipRef = useRef<HTMLDivElement>(null);

-  const { position, positionState, mutate } = usePosition({
-    verticalAlign,
-    horizontalAlign,
-    offset: { vertical: 16, horizontal: getHorizontalOffset(horizontalAlign, flip ?? '') },
+  const {
+    position: layoutPosition,
+    positionState,
+    mutate,
+  } = usePosition({
+    verticalAlign: getVerticalAlignment(position),
+    horizontalAlign: getHorizontalAlignment(position, horizontalAlign),
+    offset: {
+      vertical: getVerticalOffset(position),
+      horizontal: getHorizontalOffset(position, horizontalAlign),
+    },
    anchorRef,
    overlayRef: tooltipRef,
  });
@ -124,24 +125,17 @@ const Tooltip = ({
    return null;
  }

-  const isArrowUp = positionState.verticalAlign === 'bottom';
-  const isArrowRight = flip === 'left' && positionState.horizontalAlign === 'end';
-  const isArrowLeft = flip === 'right' && positionState.horizontalAlign === 'start';
-
  return createPortal(
-    <div
-      ref={tooltipRef}
-      className={classNames(
-        styles.tooltip,
-        isArrowUp && styles.arrowUp,
-        isArrowRight && styles.arrowRight,
-        isArrowLeft && styles.arrowLeft,
-        !flip && styles[horizontalAlign],
-        className
-      )}
-      style={{ ...position }}
-    >
-      <div className={styles.content}>{content}</div>
+    <div className={styles.tooltip}>
+      <TipBubble
+        ref={tooltipRef}
+        className={className}
+        style={{ ...layoutPosition }}
+        position={position}
+        horizontalAlignment={positionState.horizontalAlign}
+      >
+        <div className={styles.content}>{content}</div>
+      </TipBubble>
    </div>,
    tooltipDom
  );
--- a/packages/console/src/consts/avatars.ts
+++ b/packages/console/src/consts/avatars.ts
@ -7,7 +7,6 @@ import avatar006 from '@/assets/avatars/avatar-006.png';
 import avatar007 from '@/assets/avatars/avatar-007.png';
 import avatar008 from '@/assets/avatars/avatar-008.png';
 import avatar009 from '@/assets/avatars/avatar-009.png';
-import avatar010 from '@/assets/avatars/avatar-010.png';

 export const Avatars = [
  avatar001,
@ -19,7 +18,6 @@ export const Avatars = [
  avatar007,
  avatar008,
  avatar009,
-  avatar010,
 ];

 export const generateAvatarPlaceHolderById = (id: string) =>
--- a/packages/console/src/hooks/use-connector-in-use.ts
+++ b/packages/console/src/hooks/use-connector-in-use.ts
@ -1,5 +1,5 @@
 import type { SignInExperience } from '@logto/schemas';
-import { ConnectorType, SignInMethodState } from '@logto/schemas';
+import { SignUpIdentifier, SignInIdentifier, ConnectorType } from '@logto/schemas';
 import useSWR from 'swr';

 import type { RequestError } from './use-api';
@ -12,11 +12,23 @@ const useConnectorInUse = (type?: ConnectorType, target?: string): boolean | und
  }

  if (type === ConnectorType.Email) {
-    return data.signInMethods.email !== SignInMethodState.Disabled;
+    return (
+      data.signIn.methods.some(
+        ({ identifier, verificationCode }) =>
+          verificationCode && identifier === SignInIdentifier.Email
+      ) ||
+      (data.signUp.identifier === SignUpIdentifier.Email && data.signUp.verify)
+    );
  }

  if (type === ConnectorType.Sms) {
-    return data.signInMethods.sms !== SignInMethodState.Disabled;
+    return (
+      data.signIn.methods.some(
+        ({ identifier, verificationCode }) =>
+          verificationCode && identifier === SignInIdentifier.Email
+      ) ||
+      (data.signUp.identifier === SignUpIdentifier.Email && data.signUp.verify)
+    );
  }

  if (!target) {
--- a/packages/console/src/hooks/use-position.ts
+++ b/packages/console/src/hooks/use-position.ts
@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 import { useCallback, useEffect, useState } from 'react';

-export type VerticalAlignment = 'top' | 'center' | 'bottom';
+export type VerticalAlignment = 'top' | 'middle' | 'bottom';

 export type HorizontalAlignment = 'start' | 'center' | 'end';

@ -29,22 +29,22 @@ const windowSafePadding = 12;
 const selectVerticalAlignment = ({
  verticalAlign,
  verticalTop,
-  verticalCenter,
+  verticalMiddle,
  verticalBottom,
  overlayHeight,
 }: {
  verticalAlign: VerticalAlignment;
  verticalTop: number;
-  verticalCenter: number;
+  verticalMiddle: number;
  verticalBottom: number;
  overlayHeight: number;
-}) => {
+}): VerticalAlignment => {
  const minY = windowSafePadding;
  const maxY = window.innerHeight - windowSafePadding;

  const isTopAllowed = verticalTop >= minY;
  const isCenterAllowed =
-    verticalCenter - overlayHeight / 2 >= minY && verticalCenter + overlayHeight / 2 <= maxY;
+    verticalMiddle - overlayHeight / 2 >= minY && verticalMiddle + overlayHeight / 2 <= maxY;
  const isBottomAllowed = verticalBottom + overlayHeight <= maxY;

  switch (verticalAlign) {
@ -58,15 +58,15 @@ const selectVerticalAlignment = ({
      }

      if (isCenterAllowed) {
-        return 'center';
+        return 'middle';
      }

      return verticalAlign;
    }

-    case 'center': {
+    case 'middle': {
      if (isCenterAllowed) {
-        return 'center';
+        return 'middle';
      }

      if (isTopAllowed) {
@ -90,7 +90,7 @@ const selectVerticalAlignment = ({
      }

      if (isCenterAllowed) {
-        return 'center';
+        return 'middle';
      }

      return verticalAlign;
@ -197,14 +197,14 @@ export default function usePosition({
    const anchorRect = anchorRef.current.getBoundingClientRect();
    const overlayRect = overlayRef.current.getBoundingClientRect();

-    const verticalTop = anchorRect.y - overlayRect.height - offset.vertical;
-    const verticalCenter =
-      anchorRect.y - anchorRect.height / 2 - overlayRect.height / 2 + offset.vertical;
+    const verticalTop = anchorRect.y - overlayRect.height + offset.vertical;
+    const verticalMiddle =
+      anchorRect.y + anchorRect.height / 2 - overlayRect.height / 2 + offset.vertical;
    const verticalBottom = anchorRect.y + anchorRect.height + offset.vertical;

    const verticalPositionMap = {
      top: verticalTop,
-      center: verticalCenter,
+      middle: verticalMiddle,
      bottom: verticalBottom,
    };

@ -222,7 +222,7 @@ export default function usePosition({
    const selectedVerticalAlign = selectVerticalAlignment({
      verticalAlign,
      verticalTop,
-      verticalCenter,
+      verticalMiddle,
      verticalBottom,
      overlayHeight: overlayRect.height,
    });
--- a/packages/console/src/hooks/use-user-preferences.ts
+++ b/packages/console/src/hooks/use-user-preferences.ts
@ -19,6 +19,7 @@ const userPreferencesGuard = z.object({
  appearanceMode: z.nativeEnum(AppearanceMode),
  experienceNoticeConfirmed: z.boolean().optional(),
  getStartedHidden: z.boolean().optional(),
+  connectorSieNoticeConfirmed: z.boolean().optional(),
 });

 export type UserPreferences = z.infer<typeof userPreferencesGuard>;
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/index.tsx
@ -1,6 +1,5 @@
 import type { LogDto, User } from '@logto/schemas';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import useSWR from 'swr';
@ -85,7 +84,7 @@ const AuditLogDetails = () => {
                </div>
                <div className={styles.infoItem}>
                  <div className={styles.label}>{t('log_details.time')}</div>
-                  <div>{dayjs(data.createdAt).toDate().toLocaleString()}</div>
+                  <div>{new Date(data.createdAt).toLocaleString()}</div>
                </div>
              </div>
              <div>
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@ -3,7 +3,7 @@ import { AppearanceMode, ConnectorType } from '@logto/schemas';
 import classNames from 'classnames';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import useSWR, { useSWRConfig } from 'swr';

@ -14,6 +14,7 @@ import Reset from '@/assets/images/reset.svg';
 import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
+import ConfirmModal from '@/components/ConfirmModal';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import Drawer from '@/components/Drawer';
@ -49,6 +50,18 @@ const ConnectorDetails = () => {
  const api = useApi();
  const navigate = useNavigate();
  const theme = useTheme();
+  const isSocial = data?.type === ConnectorType.Social;
+  const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
+
+  const onDeleteClick = async () => {
+    if (!isSocial || !inUse) {
+      await handleDelete();
+
+      return;
+    }
+
+    setIsDeleteAlertOpen(true);
+  };

  const handleDelete = async () => {
    if (!connectorId) {
@ -65,7 +78,7 @@ const ConnectorDetails = () => {
    await mutateGlobal('/api/connectors');
    setIsDeleted(true);

-    if (data?.type === ConnectorType.Social) {
+    if (isSocial) {
      navigate(`/connectors/social`, { replace: true });
    } else {
      navigate(`/connectors`, { replace: true });
@ -75,16 +88,14 @@ const ConnectorDetails = () => {
  return (
    <div className={detailsStyles.container}>
      <LinkButton
-        to={data?.type === ConnectorType.Social ? '/connectors/social' : '/connectors'}
+        to={isSocial ? '/connectors/social' : '/connectors'}
        icon={<Back />}
        title="connector_details.back_to_connectors"
        className={styles.backLink}
      />
      {isLoading && <DetailsSkeleton />}
      {!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
-      {data?.type === ConnectorType.Social && (
-        <ConnectorTabs target={data.target} connectorId={data.id} />
-      )}
+      {isSocial && <ConnectorTabs target={data.target} connectorId={data.id} />}
      {data && (
        <Card className={styles.header}>
          <div className={styles.logoContainer}>
@ -137,7 +148,7 @@ const ConnectorDetails = () => {
              buttonProps={{ icon: <More className={styles.moreIcon} />, size: 'large' }}
              title={t('general.more_options')}
            >
-              {data.type !== ConnectorType.Social && (
+              {!isSocial && (
                <ActionMenuItem
                  icon={<Reset />}
                  iconClassName={styles.resetIcon}
@ -152,7 +163,7 @@ const ConnectorDetails = () => {
                  )}
                </ActionMenuItem>
              )}
-              <ActionMenuItem icon={<Delete />} type="danger" onClick={handleDelete}>
+              <ActionMenuItem icon={<Delete />} type="danger" onClick={onDeleteClick}>
                {t('general.delete')}
              </ActionMenuItem>
            </ActionMenu>
@ -183,6 +194,22 @@ const ConnectorDetails = () => {
          />
        </Card>
      )}
+      {data && (
+        <ConfirmModal
+          isOpen={isDeleteAlertOpen}
+          confirmButtonText="general.delete"
+          onCancel={() => {
+            setIsDeleteAlertOpen(false);
+          }}
+          onConfirm={handleDelete}
+        >
+          <Trans
+            t={t}
+            i18nKey="connector_details.in_use_deletion_description"
+            components={{ name: <UnnamedTrans resource={data.name} /> }}
+          />
+        </ConfirmModal>
+      )}
    </div>
  );
 };
--- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss
@ -0,0 +1,12 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  .notice {
+    margin: _.unit(4) 0 0;
+  }
+
+  a {
+    color: var(--color-text-link);
+    text-decoration: none;
+  }
+}
--- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
+++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx
@ -0,0 +1,50 @@
+import type { ConnectorResponse } from '@logto/schemas';
+import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import useSWR from 'swr';
+
+import Alert from '@/components/Alert';
+import useUserPreferences from '@/hooks/use-user-preferences';
+
+import * as styles from './index.module.scss';
+
+const SignInExperienceSetupNotice = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { data: connectors } = useSWR<ConnectorResponse[]>('/api/connectors');
+  const {
+    data: { connectorSieNoticeConfirmed },
+    update,
+  } = useUserPreferences();
+
+  if (!connectors || connectorSieNoticeConfirmed) {
+    return null;
+  }
+
+  const hasSetupConnector = connectors.some(({ enabled }) => enabled);
+
+  if (!hasSetupConnector) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <Alert
+        action="general.got_it"
+        className={styles.notice}
+        onClick={() => {
+          void update({ connectorSieNoticeConfirmed: true });
+        }}
+      >
+        <Trans
+          components={{
+            a: <Link to="/sign-in-experience/sign-up-and-sign-in" target="_blank" />,
+          }}
+        >
+          {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })}
+        </Trans>
+      </Alert>
+    </div>
+  );
+};
+
+export default SignInExperienceSetupNotice;
--- a/packages/console/src/pages/Connectors/index.module.scss
+++ b/packages/console/src/pages/Connectors/index.module.scss
@ -7,6 +7,7 @@
 .headline {
  display: flex;
  justify-content: space-between;
+  align-items: center;
 }

 .tabs {
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@ -20,6 +20,7 @@ import * as tableStyles from '@/scss/table.module.scss';

 import ConnectorRow from './components/ConnectorRow';
 import CreateForm from './components/CreateForm';
+import SignInExperienceSetupNotice from './components/SignInExperienceSetupNotice';
 import * as styles from './index.module.scss';

 const Connectors = () => {
@ -73,6 +74,7 @@ const Connectors = () => {
            />
          )}
        </div>
+        <SignInExperienceSetupNotice />
        <TabNav className={styles.tabs}>
          <TabNavItem href="/connectors">{t('connectors.tab_email_sms')}</TabNavItem>
          <TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
--- a/packages/console/src/pages/Dashboard/index.tsx
+++ b/packages/console/src/pages/Dashboard/index.tsx
@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import { format } from 'date-fns';
 import type { ChangeEventHandler } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@ -36,7 +36,7 @@ const tickFormatter = new Intl.NumberFormat('en-US', {
 });

 const Dashboard = () => {
-  const [date, setDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
+  const [date, setDate] = useState<string>(format(Date.now(), 'yyyy-MM-dd'));
  const { data: totalData, error: totalError } = useSWR<TotalUsersResponse, RequestError>(
    '/api/dashboard/users/total'
  );
--- a/packages/console/src/pages/SignInExperience/components/AuthenticationForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/AuthenticationForm.tsx
@ -14,10 +14,10 @@ const AuthenticationForm = () => {
  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.others.authentication.title')}</div>
-      <FormField title="sign_in_exp.others.authentication.enable_create_account">
+      <FormField title="sign_in_exp.others.authentication.enable_user_registration">
        <Switch
          {...register('createAccountEnabled')}
-          label={t('sign_in_exp.others.authentication.enable_create_account_description')}
+          label={t('sign_in_exp.others.authentication.enable_user_registration_description')}
        />
      </FormField>
    </>
--- a/packages/console/src/pages/SignInExperience/components/ConnectorSetupWarning.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ConnectorSetupWarning.tsx
@ -1,52 +0,0 @@
-import type { ConnectorResponse } from '@logto/schemas';
-import { ConnectorType, SignInMethodKey } from '@logto/schemas';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import useSWR from 'swr';
-
-import Alert from '@/components/Alert';
-import type { RequestError } from '@/hooks/use-api';
-
-type Props = {
-  method: SignInMethodKey;
-};
-
-const ConnectorSetupWarning = ({ method }: Props) => {
-  const { data: connectors } = useSWR<ConnectorResponse[], RequestError>('/api/connectors');
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
-  const type = useMemo(() => {
-    if (method === SignInMethodKey.Username) {
-      return;
-    }
-
-    if (method === SignInMethodKey.Sms) {
-      return ConnectorType.Sms;
-    }
-
-    if (method === SignInMethodKey.Email) {
-      return ConnectorType.Email;
-    }
-
-    return ConnectorType.Social;
-  }, [method]);
-
-  if (!type || !connectors) {
-    return null;
-  }
-
-  if (connectors.some(({ type: connectorType, enabled }) => connectorType === type && enabled)) {
-    return null;
-  }
-
-  return (
-    <Alert
-      action="general.set_up"
-      href={type === ConnectorType.Social ? '/connectors/social' : '/connectors'}
-    >
-      {t('sign_in_exp.setup_warning.no_connector', { context: type.toLowerCase() })}
-    </Alert>
-  );
-};
-
-export default ConnectorSetupWarning;
--- a/packages/console/src/pages/SignInExperience/components/Preview.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Preview.tsx
@ -4,7 +4,7 @@ import type { ConnectorResponse, ConnectorMetadata, SignInExperience } from '@lo
 import { AppearanceMode } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
+import { format } from 'date-fns';
 import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
@ -195,7 +195,7 @@ const Preview = ({ signInExperience, className }: Props) => {
          <div className={classNames(styles.device, styles[mode])}>
            {platform !== 'desktopWeb' && (
              <div className={styles.topBar}>
-                <div className={styles.time}>{dayjs().format('HH:mm')}</div>
+                <div className={styles.time}>{format(Date.now(), 'HH:mm')}</div>
                <PhoneInfo />
              </div>
            )}
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsChangePreview.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsChangePreview.module.scss
@ -1,28 +1,33 @@
@use '@/scss/underscore' as _;

+.container {
+  min-width: 552px;
+}
+
 .description {
  font: var(--font-body-medium);
 }

 .content {
-  margin-top: _.unit(6);
+  display: flex;
+  flex-direction: row;
+  margin-top: _.unit(3);
  border-radius: 8px;
-  padding: _.unit(5);
-  background: var(--color-layer-2);
  font: var(--font-body-medium);
+  justify-content: space-between;
+  align-items: stretch;
+  column-gap: _.unit(3);

  .section {
-    &:not(:first-child) {
-      margin-top: _.unit(3);
-    }
+    flex: 1;
+    background: var(--color-layer-2);
+    border-radius: 8px;
+    padding: _.unit(5);
+    color: var(--color-text);

    .title {
-      font: var(--font-subhead-2);
+      font: var(--font-title-medium);
      margin: _.unit(1) 0;
    }
-
-    .connector {
-      margin-left: _.unit(1);
-    }
  }
 }
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsChangePreview.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsChangePreview.tsx
@ -1,8 +1,8 @@
 import type { SignInExperience } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';

+import SignUpAndSignInDiffSection from '../tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection';
 import * as styles from './SignInMethodsChangePreview.module.scss';
-import SignInMethodsPreview from './SignInMethodsPreview';

 type Props = {
  before: SignInExperience;
@ -13,16 +13,16 @@ const SignInMethodsChangePreview = ({ before, after }: Props) => {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

  return (
-    <div>
+    <div className={styles.container}>
      <div className={styles.description}>{t('sign_in_exp.save_alert.description')}</div>
      <div className={styles.content}>
        <div className={styles.section}>
          <div className={styles.title}>{t('sign_in_exp.save_alert.before')}</div>
-          <SignInMethodsPreview data={before} />
+          <SignUpAndSignInDiffSection before={before} after={after} />
        </div>
        <div className={styles.section}>
          <div className={styles.title}>{t('sign_in_exp.save_alert.after')}</div>
-          <SignInMethodsPreview data={after} />
+          <SignUpAndSignInDiffSection isAfter before={before} after={after} />
        </div>
      </div>
    </div>
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
@ -1,147 +0,0 @@
-import { SignInMethodKey } from '@logto/schemas';
-import { useMemo } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import Checkbox from '@/components/Checkbox';
-import FormField from '@/components/FormField';
-import Select from '@/components/Select';
-import Switch from '@/components/Switch';
-
-import type { SignInExperienceForm } from '../types';
-import ConnectorSetupWarning from './ConnectorSetupWarning';
-import ConnectorsTransfer from './ConnectorsTransfer';
-import * as styles from './index.module.scss';
-
-const signInMethods = Object.values(SignInMethodKey);
-
-const SignInMethodsForm = () => {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { register, watch, control, getValues, setValue } = useFormContext<SignInExperienceForm>();
-  const primaryMethod = watch('signInMethods.primary');
-  const enableSecondary = watch('signInMethods.enableSecondary');
-  const sms = watch('signInMethods.sms');
-  const email = watch('signInMethods.email');
-  const social = watch('signInMethods.social');
-
-  const postPrimaryMethodChange = (
-    oldPrimaryMethod?: SignInMethodKey,
-    primaryMethod?: SignInMethodKey
-  ) => {
-    if (oldPrimaryMethod) {
-      // The secondary sign-in method should select the old primary method by default.
-      setValue(`signInMethods.${oldPrimaryMethod}`, true);
-    }
-
-    if (primaryMethod) {
-      // When one of the sign-in methods has been primary, it should not be able to be secondary simultaneously.
-      setValue(`signInMethods.${primaryMethod}`, false);
-    }
-  };
-
-  const secondaryMethodsFields = useMemo(
-    () =>
-      signInMethods.map((method) => {
-        const label = (
-          <>
-            {t('sign_in_exp.sign_in_methods.methods', { context: method })}
-            {primaryMethod === method && (
-              <span className={styles.primaryTag}>
-                {t('sign_in_exp.sign_in_methods.methods_primary_tag')}
-              </span>
-            )}
-          </>
-        );
-
-        const enabled =
-          (method === SignInMethodKey.Email && email) ||
-          (method === SignInMethodKey.Sms && sms) ||
-          (method === SignInMethodKey.Social && social);
-
-        return (
-          <div key={method} className={styles.method}>
-            <Controller
-              name={`signInMethods.${method}`}
-              control={control}
-              render={({ field: { value, onChange } }) => (
-                <Checkbox
-                  label={label}
-                  disabled={primaryMethod === method}
-                  value={value}
-                  onChange={onChange}
-                />
-              )}
-            />
-            {enabled && <ConnectorSetupWarning method={method} />}
-          </div>
-        );
-      }),
-    [t, primaryMethod, email, sms, social, control]
-  );
-
-  return (
-    <>
-      <div className={styles.title}>{t('sign_in_exp.sign_in_methods.title')}</div>
-      <FormField title="sign_in_exp.sign_in_methods.primary">
-        <Controller
-          name="signInMethods.primary"
-          control={control}
-          render={({ field: { value, onChange } }) => (
-            <Select
-              value={value}
-              options={signInMethods.map((method) => ({
-                value: method,
-                title: t('sign_in_exp.sign_in_methods.methods', { context: method }),
-              }))}
-              onChange={(value) => {
-                const oldPrimaryMethod = getValues('signInMethods.primary');
-                onChange(value);
-                postPrimaryMethodChange(oldPrimaryMethod, value);
-              }}
-            />
-          )}
-        />
-      </FormField>
-      {primaryMethod && <ConnectorSetupWarning method={primaryMethod} />}
-      {primaryMethod === SignInMethodKey.Social && (
-        <div className={styles.primarySocial}>
-          <Controller
-            name="socialSignInConnectorTargets"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <ConnectorsTransfer value={value} onChange={onChange} />
-            )}
-          />
-        </div>
-      )}
-      <FormField title="sign_in_exp.sign_in_methods.enable_secondary">
-        <Switch
-          /**
-           * DO NOT SET THIS FIELD TO REQUIRED UNLESS YOU KNOW WHAT YOU ARE DOING.
-           * https://github.com/react-hook-form/react-hook-form/issues/2323
-           */
-          {...register('signInMethods.enableSecondary')}
-          label={t('sign_in_exp.sign_in_methods.enable_secondary_description')}
-        />
-      </FormField>
-      {enableSecondary && (
-        <>
-          {secondaryMethodsFields}
-          {social && (
-            <FormField title="sign_in_exp.sign_in_methods.define_social_methods">
-              <Controller
-                name="socialSignInConnectorTargets"
-                control={control}
-                render={({ field: { value, onChange } }) => (
-                  <ConnectorsTransfer value={value} onChange={onChange} />
-                )}
-              />
-            </FormField>
-          )}
-        </>
-      )}
-    </>
-  );
-};
-
-export default SignInMethodsForm;
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsPreview.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsPreview.tsx
@ -1,55 +0,0 @@
-import type { SignInExperience } from '@logto/schemas';
-import { SignInMethodKey, SignInMethodState } from '@logto/schemas';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import UnnamedTrans from '@/components/UnnamedTrans';
-import useConnectorGroups from '@/hooks/use-connector-groups';
-
-import * as styles from './SignInMethodsChangePreview.module.scss';
-
-type Props = {
-  data: SignInExperience;
-};
-
-const SignInMethodsPreview = ({ data }: Props) => {
-  const { data: groups, error } = useConnectorGroups();
-  const { signInMethods, socialSignInConnectorTargets } = data;
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
-  const connectorNames = useMemo(() => {
-    if (!groups) {
-      return null;
-    }
-
-    return socialSignInConnectorTargets.map((connectorTarget) => {
-      const group = groups.find(({ target }) => target === connectorTarget);
-
-      if (!group) {
-        return null;
-      }
-
-      return (
-        <UnnamedTrans key={connectorTarget} className={styles.connector} resource={group.name} />
-      );
-    });
-  }, [groups, socialSignInConnectorTargets]);
-
-  return (
-    <div>
-      {!groups && !error && <div>loading</div>}
-      {!groups && error && <div>{error.body?.message ?? error.message}</div>}
-      {groups &&
-        Object.values(SignInMethodKey)
-          .filter((key) => signInMethods[key] !== SignInMethodState.Disabled)
-          .map((key) => (
-            <div key={key}>
-              {t('sign_in_exp.sign_in_methods.methods', { context: key })}
-              {key === SignInMethodKey.Social && <span>: {connectorNames}</span>}
-            </div>
-          ))}
-    </div>
-  );
-};
-
-export default SignInMethodsPreview;
--- a/packages/console/src/pages/SignInExperience/index.tsx
+++ b/packages/console/src/pages/SignInExperience/index.tsx
@ -26,9 +26,9 @@ import usePreviewConfigs from './hooks';
 import * as styles from './index.module.scss';
 import BrandingTab from './tabs/BrandingTab';
 import OthersTab from './tabs/OthersTab';
-import SignInMethodsTab from './tabs/SignInMethodsTab';
+import SignUpAndSignInTab from './tabs/SignUpAndSignInTab';
 import type { SignInExperienceForm } from './types';
-import { compareSignInMethods, signInExperienceParser } from './utilities';
+import { compareSignUpAndSignInConfigs, signInExperienceParser } from './utilities';

 const SignInExperience = () => {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@ -84,7 +84,7 @@ const SignInExperience = () => {
    const formatted = signInExperienceParser.toRemoteModel(formData);

    // Sign-in methods changed, need to show confirm modal first.
-    if (!compareSignInMethods(data, formatted)) {
+    if (!compareSignUpAndSignInConfigs(data, formatted)) {
      setDataToCompare(formatted);

      return;
@ -125,8 +125,8 @@ const SignInExperience = () => {
            <TabNavItem href="/sign-in-experience/branding">
              {t('sign_in_exp.tabs.branding')}
            </TabNavItem>
-            <TabNavItem href="/sign-in-experience/methods">
-              {t('sign_in_exp.tabs.methods')}
+            <TabNavItem href="/sign-in-experience/sign-up-and-sign-in">
+              {t('sign_in_exp.tabs.sign_up_and_sign_in')}
            </TabNavItem>
            <TabNavItem href="/sign-in-experience/others">
              {t('sign_in_exp.tabs.others')}
@ -140,8 +140,8 @@ const SignInExperience = () => {
                  {tab === 'branding' && (
                    <BrandingTab defaultData={defaultFormData} isDataDirty={isDirty} />
                  )}
-                  {tab === 'methods' && (
-                    <SignInMethodsTab defaultData={defaultFormData} isDataDirty={isDirty} />
+                  {tab === 'sign-up-and-sign-in' && (
+                    <SignUpAndSignInTab defaultData={defaultFormData} isDataDirty={isDirty} />
                  )}
                  {tab === 'others' && (
                    <OthersTab defaultData={defaultFormData} isDataDirty={isDirty} />
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignInForm.tsx
@ -0,0 +1,56 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import FormField from '@/components/FormField';
+
+import type { SignInExperienceForm } from '../../types';
+import SignInMethodEditBox from './components/SignInMethodEditBox';
+import { signUpToSignInIdentifierMapping } from './constants';
+import * as styles from './index.module.scss';
+
+const SignInForm = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { control, watch } = useFormContext<SignInExperienceForm>();
+
+  const signUpIdentifier = watch('signUp.identifier');
+  const setupPasswordAtSignUp = watch('signUp.password');
+  const setupVerificationAtSignUp = watch('signUp.verify');
+
+  if (
+    !signUpIdentifier ||
+    setupPasswordAtSignUp === undefined ||
+    setupVerificationAtSignUp === undefined
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.title}>{t('sign_in_exp.sign_up_and_sign_in.sign_in.title')}</div>
+      <FormField title="sign_in_exp.sign_up_and_sign_in.sign_in.sign_in_identifier_and_auth">
+        <div className={styles.formFieldDescription}>
+          {t('sign_in_exp.sign_up_and_sign_in.sign_in.description')}
+        </div>
+        <Controller
+          control={control}
+          name="signIn.methods"
+          defaultValue={[]}
+          render={({ field: { value, onChange } }) => {
+            return (
+              <SignInMethodEditBox
+                value={value}
+                requiredSignInIdentifiers={signUpToSignInIdentifierMapping[signUpIdentifier]}
+                isSignUpPasswordRequired={setupPasswordAtSignUp}
+                isSignUpVerificationRequired={setupVerificationAtSignUp}
+                onChange={onChange}
+              />
+            );
+          }}
+        />
+      </FormField>
+    </>
+  );
+};
+
+export default SignInForm;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx
@ -0,0 +1,127 @@
+import { SignUpIdentifier } from '@logto/schemas';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { snakeCase } from 'snake-case';
+
+import Checkbox from '@/components/Checkbox';
+import FormField from '@/components/FormField';
+import Select from '@/components/Select';
+
+import type { SignInExperienceForm } from '../../types';
+import ConnectorSetupWarning from './components/ConnectorSetupWarning';
+import {
+  requiredVerifySignUpIdentifiers,
+  signUpIdentifiers,
+  signUpIdentifierToRequiredConnectorMapping,
+} from './constants';
+import * as styles from './index.module.scss';
+
+const SignUpForm = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { control, setValue, watch } = useFormContext<SignInExperienceForm>();
+
+  const signUpIdentifier = watch('signUp.identifier');
+
+  if (!signUpIdentifier) {
+    return null;
+  }
+
+  const postSignUpIdentifierChange = (signUpIdentifier: SignUpIdentifier) => {
+    if (signUpIdentifier === SignUpIdentifier.Username) {
+      setValue('signUp.password', true);
+      setValue('signUp.verify', false);
+
+      return;
+    }
+
+    if (signUpIdentifier === SignUpIdentifier.None) {
+      setValue('signUp.password', false);
+      setValue('signUp.verify', false);
+
+      return;
+    }
+
+    if (requiredVerifySignUpIdentifiers.includes(signUpIdentifier)) {
+      setValue('signUp.verify', true);
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.title}>{t('sign_in_exp.sign_up_and_sign_in.sign_up.title')}</div>
+      <FormField title="sign_in_exp.sign_up_and_sign_in.sign_up.sign_up_identifier">
+        <Controller
+          name="signUp.identifier"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Select
+              value={value}
+              options={signUpIdentifiers.map((identifier) => ({
+                value: identifier,
+                title: (
+                  <div>
+                    {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
+                      context: snakeCase(identifier),
+                    })}
+                    {identifier === SignUpIdentifier.None && (
+                      <span className={styles.socialOnlyDescription}>
+                        {t(
+                          'sign_in_exp.sign_up_and_sign_in.sign_up.social_only_creation_description'
+                        )}
+                      </span>
+                    )}
+                  </div>
+                ),
+              }))}
+              onChange={(value) => {
+                if (!value) {
+                  return;
+                }
+                onChange(value);
+                postSignUpIdentifierChange(value);
+              }}
+            />
+          )}
+        />
+        <ConnectorSetupWarning
+          requiredConnectors={signUpIdentifierToRequiredConnectorMapping[signUpIdentifier]}
+        />
+      </FormField>
+      {signUpIdentifier !== SignUpIdentifier.None && (
+        <FormField
+          title="sign_in_exp.sign_up_and_sign_in.sign_up.sign_up_authentication"
+          className={styles.signUpAuthentication}
+        >
+          <Controller
+            name="signUp.password"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <Checkbox
+                label={t('sign_in_exp.sign_up_and_sign_in.sign_up.set_a_password_option')}
+                disabled={signUpIdentifier === SignUpIdentifier.Username}
+                value={value ?? false}
+                onChange={onChange}
+              />
+            )}
+          />
+          {signUpIdentifier !== SignUpIdentifier.Username && (
+            <Controller
+              name="signUp.verify"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Checkbox
+                  label={t('sign_in_exp.sign_up_and_sign_in.sign_up.verify_at_sign_up_option')}
+                  value={value ?? false}
+                  disabled={requiredVerifySignUpIdentifiers.includes(signUpIdentifier)}
+                  onChange={onChange}
+                />
+              )}
+            />
+          )}
+        </FormField>
+      )}
+    </>
+  );
+};
+
+export default SignUpForm;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SocialSignInForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SocialSignInForm.tsx
@ -0,0 +1,37 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import FormField from '@/components/FormField';
+
+import type { SignInExperienceForm } from '../../types';
+import SocialConnectorEditBox from './components/SocialConnectorEditBox';
+import * as styles from './index.module.scss';
+
+const SocialSignInForm = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { control } = useFormContext<SignInExperienceForm>();
+
+  return (
+    <>
+      <div className={styles.title}>
+        {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.title')}
+      </div>
+
+      <FormField title="sign_in_exp.sign_up_and_sign_in.social_sign_in.social_sign_in">
+        <div className={styles.formFieldDescription}>
+          {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.description')}
+        </div>
+        <Controller
+          control={control}
+          defaultValue={[]}
+          name="socialSignInConnectorTargets"
+          render={({ field: { value, onChange } }) => {
+            return <SocialConnectorEditBox value={value} onChange={onChange} />;
+          }}
+        />
+      </FormField>
+    </>
+  );
+};
+
+export default SocialSignInForm;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/ConnectorSetupWarning.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/ConnectorSetupWarning.tsx
@ -0,0 +1,46 @@
+import type { ConnectorResponse } from '@logto/schemas';
+import { ConnectorType } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import Alert from '@/components/Alert';
+import type { RequestError } from '@/hooks/use-api';
+
+type Props = {
+  requiredConnectors: ConnectorType[];
+};
+
+const ConnectorSetupWarning = ({ requiredConnectors }: Props) => {
+  const { data: connectors } = useSWR<ConnectorResponse[], RequestError>('/api/connectors');
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  if (!connectors) {
+    return null;
+  }
+
+  const missingConnectors = requiredConnectors.filter(
+    (connectorType) => !connectors.some(({ type, enabled }) => type === connectorType && enabled)
+  );
+
+  if (missingConnectors.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {missingConnectors.map((connectorType) => (
+        <Alert
+          key={connectorType}
+          action="general.set_up"
+          href={connectorType === ConnectorType.Social ? '/connectors/social' : '/connectors'}
+        >
+          {t('sign_in_exp.setup_warning.no_connector', {
+            context: connectorType.toLowerCase(),
+          })}
+        </Alert>
+      ))}
+    </>
+  );
+};
+
+export default ConnectorSetupWarning;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddButton.tsx
@ -0,0 +1,63 @@
+import type { SignInIdentifier } from '@logto/schemas';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { snakeCase } from 'snake-case';
+
+import Plus from '@/assets/images/plus.svg';
+import ActionMenu from '@/components/ActionMenu';
+import type { Props as ButtonProps } from '@/components/Button';
+import { DropdownItem } from '@/components/Dropdown';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  options: SignInIdentifier[];
+  onSelected: (signInIdentifier: SignInIdentifier) => void;
+  hasSelectedIdentifiers: boolean;
+};
+
+const AddButton = ({ options, onSelected, hasSelectedIdentifiers }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  if (options.length === 0) {
+    return null;
+  }
+  const addSignInMethodButtonProps: ButtonProps = {
+    type: 'default',
+    size: 'medium',
+    title: 'sign_in_exp.sign_up_and_sign_in.sign_in.add_sign_in_method',
+    icon: <Plus className={styles.plusIcon} />,
+  };
+
+  const addAnotherButtonProps: ButtonProps = {
+    type: 'text',
+    size: 'small',
+    title: 'general.add_another',
+  };
+
+  return (
+    <ActionMenu
+      buttonProps={hasSelectedIdentifiers ? addAnotherButtonProps : addSignInMethodButtonProps}
+      dropdownHorizontalAlign="start"
+      dropdownClassName={classNames(
+        hasSelectedIdentifiers
+          ? styles.addAnotherSignInMethodDropdown
+          : styles.addSignInMethodDropDown
+      )}
+      isDropdownFullWidth={!hasSelectedIdentifiers}
+    >
+      {options.map((identifier) => (
+        <DropdownItem
+          key={identifier}
+          onClick={() => {
+            onSelected(identifier);
+          }}
+        >
+          {t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) })}
+        </DropdownItem>
+      ))}
+    </ActionMenu>
+  );
+};
+
+export default AddButton;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/SignInMethodItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/SignInMethodItem.tsx
@ -0,0 +1,97 @@
+import { SignInIdentifier } from '@logto/schemas';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { snakeCase } from 'snake-case';
+
+import Draggable from '@/assets/images/draggable.svg';
+import Minus from '@/assets/images/minus.svg';
+import SwitchArrowIcon from '@/assets/images/switch-arrow.svg';
+import Checkbox from '@/components/Checkbox';
+import IconButton from '@/components/IconButton';
+
+import * as styles from './index.module.scss';
+import type { SignInMethod } from './types';
+
+type Props = {
+  signInMethod: SignInMethod;
+  isPasswordCheckable: boolean;
+  isVerificationCodeCheckable: boolean;
+  isDeletable: boolean;
+  onVerificationStateChange: (
+    identifier: SignInIdentifier,
+    verification: 'password' | 'verificationCode',
+    checked: boolean
+  ) => void;
+  onToggleVerificationPrimary: (identifier: SignInIdentifier) => void;
+  onDelete: (identifier: SignInIdentifier) => void;
+};
+
+const SignInMethodItem = ({
+  signInMethod: { identifier, password, verificationCode, isPasswordPrimary },
+  isPasswordCheckable,
+  isVerificationCodeCheckable,
+  isDeletable,
+  onVerificationStateChange,
+  onToggleVerificationPrimary,
+  onDelete,
+}: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div key={snakeCase(identifier)} className={styles.signInMethodItem}>
+      <div className={styles.signInMethod}>
+        <div className={styles.identifier}>
+          <Draggable className={styles.draggableIcon} />
+          {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
+            context: snakeCase(identifier),
+          })}
+        </div>
+        <div
+          className={classNames(
+            styles.authentication,
+            !isPasswordPrimary && styles.verifyCodePrimary
+          )}
+        >
+          <Checkbox
+            label={t('sign_in_exp.sign_up_and_sign_in.sign_in.password_auth')}
+            value={password}
+            disabled={!isPasswordCheckable}
+            onChange={(checked) => {
+              onVerificationStateChange(identifier, 'password', checked);
+            }}
+          />
+          {identifier !== SignInIdentifier.Username && (
+            <>
+              <IconButton
+                tooltip="sign_in_exp.sign_up_and_sign_in.sign_in.auth_swap_tip"
+                onClick={() => {
+                  onToggleVerificationPrimary(identifier);
+                }}
+              >
+                <SwitchArrowIcon />
+              </IconButton>
+              <Checkbox
+                label={t('sign_in_exp.sign_up_and_sign_in.sign_in.verification_code_auth')}
+                value={verificationCode}
+                disabled={!isVerificationCodeCheckable}
+                onChange={(checked) => {
+                  onVerificationStateChange(identifier, 'verificationCode', checked);
+                }}
+              />
+            </>
+          )}
+        </div>
+      </div>
+      <IconButton
+        disabled={!isDeletable}
+        onClick={() => {
+          onDelete(identifier);
+        }}
+      >
+        <Minus />
+      </IconButton>
+    </div>
+  );
+};
+
+export default SignInMethodItem;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/index.module.scss
@ -0,0 +1,55 @@
+@use '@/scss/underscore' as _;
+
+.signInMethodItem {
+  display: flex;
+  align-items: center;
+  margin: _.unit(2) 0;
+}
+
+.signInMethod {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  width: 100%;
+  margin-right: _.unit(2);
+  padding: _.unit(3) _.unit(2);
+  background-color: var(--color-layer-2);
+  border-radius: 8px;
+  cursor: move;
+  color: var(--color-text);
+
+  .identifier {
+    width: 130px;
+    display: flex;
+    font: var(--font-label-large);
+    align-items: center;
+  }
+
+  .authentication {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 _.unit(2);
+    flex-grow: 1;
+
+    &.verifyCodePrimary {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .draggableIcon {
+    color: var(--color-text-secondary);
+  }
+}
+
+.plusIcon {
+  color: var(--color-text-secondary);
+}
+
+.addAnotherSignInMethodDropdown {
+  min-width: 208px;
+}
+
+.addSignInMethodDropDown {
+  min-width: unset;
+}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/index.tsx
@ -0,0 +1,172 @@
+import type { ConnectorType } from '@logto/schemas';
+import { SignInIdentifier } from '@logto/schemas';
+import { useCallback, useEffect, useRef } from 'react';
+
+import DragDropProvider from '@/components/Transfer/DragDropProvider';
+import DraggableItem from '@/components/Transfer/DraggableItem';
+
+import { signInIdentifiers, signInIdentifierToRequiredConnectorMapping } from '../../constants';
+import ConnectorSetupWarning from '../ConnectorSetupWarning';
+import AddButton from './AddButton';
+import SignInMethodItem from './SignInMethodItem';
+import type { SignInMethod } from './types';
+import {
+  computeOnSignInMethodAppended,
+  computeOnVerificationStateChanged,
+  computeOnPasswordPrimaryFlagToggled,
+  getSignInMethodPasswordCheckState,
+  getSignInMethodVerificationCodeCheckState,
+} from './utilities';
+
+type Props = {
+  value: SignInMethod[];
+  onChange: (value: SignInMethod[]) => void;
+  requiredSignInIdentifiers: SignInIdentifier[];
+  isSignUpPasswordRequired: boolean;
+  isSignUpVerificationRequired: boolean;
+};
+
+const SignInMethodEditBox = ({
+  value,
+  onChange,
+  requiredSignInIdentifiers,
+  isSignUpPasswordRequired,
+  isSignUpVerificationRequired,
+}: Props) => {
+  const signInIdentifierOptions = signInIdentifiers.filter((candidateIdentifier) =>
+    value.every(({ identifier }) => identifier !== candidateIdentifier)
+  );
+
+  // Note: add a reference to avoid infinite loop when change the value by `useEffect`
+  const signInMethods = useRef(value);
+
+  const handleChange = useCallback(
+    (value: SignInMethod[]) => {
+      // eslint-disable-next-line @silverhand/fp/no-mutation
+      signInMethods.current = value;
+      onChange(value);
+    },
+    [onChange]
+  );
+
+  const addSignInMethod = useCallback(
+    (identifier: SignInIdentifier) => {
+      handleChange(
+        computeOnSignInMethodAppended(value, {
+          identifier,
+          password: getSignInMethodPasswordCheckState(identifier, isSignUpPasswordRequired),
+          verificationCode: getSignInMethodVerificationCodeCheckState(identifier),
+          isPasswordPrimary: true,
+        })
+      );
+    },
+    [handleChange, value, isSignUpPasswordRequired]
+  );
+
+  useEffect(() => {
+    const allSignInMethods = requiredSignInIdentifiers.reduce(
+      (previous, current) =>
+        computeOnSignInMethodAppended(previous, {
+          identifier: current,
+          password: getSignInMethodPasswordCheckState(current, isSignUpPasswordRequired),
+          verificationCode: getSignInMethodVerificationCodeCheckState(current),
+          isPasswordPrimary: true,
+        }),
+      signInMethods.current
+    );
+
+    handleChange(
+      allSignInMethods.map((method) => ({
+        ...method,
+        password: getSignInMethodPasswordCheckState(
+          method.identifier,
+          isSignUpPasswordRequired,
+          method.password
+        ),
+        verificationCode: getSignInMethodVerificationCodeCheckState(method.identifier),
+      }))
+    );
+  }, [
+    handleChange,
+    isSignUpPasswordRequired,
+    isSignUpVerificationRequired,
+    requiredSignInIdentifiers,
+  ]);
+
+  const onMoveItem = (dragIndex: number, hoverIndex: number) => {
+    const dragItem = value[dragIndex];
+    const hoverItem = value[hoverIndex];
+
+    if (!dragItem || !hoverItem) {
+      return;
+    }
+
+    handleChange(
+      value.map((value_, index) => {
+        if (index === dragIndex) {
+          return hoverItem;
+        }
+
+        if (index === hoverIndex) {
+          return dragItem;
+        }
+
+        return value_;
+      })
+    );
+  };
+
+  return (
+    <div>
+      <DragDropProvider>
+        {value.map((signInMethod, index) => (
+          <DraggableItem
+            key={signInMethod.identifier}
+            id={signInMethod.identifier}
+            sortIndex={index}
+            moveItem={onMoveItem}
+          >
+            <SignInMethodItem
+              signInMethod={signInMethod}
+              isPasswordCheckable={
+                signInMethod.identifier !== SignInIdentifier.Username && !isSignUpPasswordRequired
+              }
+              isVerificationCodeCheckable={
+                (isSignUpPasswordRequired && isSignUpVerificationRequired) ||
+                // Note: the next line is used to handle the case when the sign-up identifier is `Username`
+                (isSignUpPasswordRequired && signInMethod.identifier !== SignInIdentifier.Username)
+              }
+              isDeletable={!requiredSignInIdentifiers.includes(signInMethod.identifier)}
+              onVerificationStateChange={(identifier, verification, checked) => {
+                handleChange(
+                  computeOnVerificationStateChanged(value, identifier, verification, checked)
+                );
+              }}
+              onToggleVerificationPrimary={(identifier) => {
+                handleChange(computeOnPasswordPrimaryFlagToggled(value, identifier));
+              }}
+              onDelete={(identifier) => {
+                handleChange(value.filter((method) => method.identifier !== identifier));
+              }}
+            />
+          </DraggableItem>
+        ))}
+      </DragDropProvider>
+      <ConnectorSetupWarning
+        requiredConnectors={value.reduce<ConnectorType[]>(
+          (connectors, { identifier: signInIdentifier }) => {
+            return [...connectors, ...signInIdentifierToRequiredConnectorMapping[signInIdentifier]];
+          },
+          []
+        )}
+      />
+      <AddButton
+        options={signInIdentifierOptions}
+        hasSelectedIdentifiers={value.length > 0}
+        onSelected={addSignInMethod}
+      />
+    </div>
+  );
+};
+
+export default SignInMethodEditBox;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/types.ts
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/types.ts
@ -0,0 +1,3 @@
+import type { SignInExperience } from '@logto/schemas';
+
+export type SignInMethod = SignInExperience['signIn']['methods'][number];
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/utilities.ts
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/utilities.ts
@ -0,0 +1,60 @@
+import { SignInIdentifier } from '@logto/schemas';
+
+import type { SignInMethod } from './types';
+
+export const computeOnVerificationStateChanged = (
+  oldValue: SignInMethod[],
+  identifier: SignInIdentifier,
+  verification: 'password' | 'verificationCode',
+  checked: boolean
+) =>
+  oldValue.map((method) =>
+    method.identifier === identifier
+      ? {
+          ...method,
+          [verification]: checked,
+        }
+      : method
+  );
+
+export const computeOnSignInMethodAppended = (
+  appendTo: SignInMethod[],
+  appended: SignInMethod
+): SignInMethod[] => {
+  const { identifier: signInIdentifier } = appended;
+
+  if (appendTo.some((method) => method.identifier === signInIdentifier)) {
+    return appendTo;
+  }
+
+  return [...appendTo, appended];
+};
+
+export const computeOnPasswordPrimaryFlagToggled = (
+  oldValue: SignInMethod[],
+  identifier: SignInIdentifier
+) =>
+  oldValue.map((method) =>
+    method.identifier === identifier
+      ? {
+          ...method,
+          isPasswordPrimary: !method.isPasswordPrimary,
+        }
+      : method
+  );
+
+export const getSignInMethodPasswordCheckState = (
+  signInIdentifier: SignInIdentifier,
+  isSignUpPasswordRequired: boolean,
+  originCheckState = false
+) => {
+  if (signInIdentifier === SignInIdentifier.Username) {
+    return true;
+  }
+
+  return isSignUpPasswordRequired || originCheckState;
+};
+
+export const getSignInMethodVerificationCodeCheckState = (signInIdentifier: SignInIdentifier) => {
+  return signInIdentifier !== SignInIdentifier.Username;
+};
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/DiffSegment.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/DiffSegment.tsx
@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  children: ReactNode;
+  hasChanged: boolean;
+  isAfter?: boolean;
+};
+
+const DiffSegment = ({ children, hasChanged, isAfter = false }: Props) => {
+  if (!hasChanged) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>;
+  }
+
+  return <span className={isAfter ? styles.green : styles.red}>{children}</span>;
+};
+
+export default DiffSegment;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/SignInDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/SignInDiffSection.tsx
@ -0,0 +1,88 @@
+import type { SignInIdentifier } from '@logto/schemas';
+import { detailedDiff } from 'deep-object-diff';
+import get from 'lodash.get';
+import { useTranslation } from 'react-i18next';
+
+import type { SignInMethod } from '../SignInMethodEditBox/types';
+import DiffSegment from './DiffSegment';
+import * as styles from './index.module.scss';
+import type { SignInMethodsObject } from './types';
+import { convertToSignInMethodsObject } from './utilities';
+
+type Props = {
+  before: SignInMethod[];
+  after: SignInMethod[];
+  isAfter?: boolean;
+};
+
+const SignInDiffSection = ({ before, after, isAfter = false }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const beforeSignInMethodsObject = convertToSignInMethodsObject(before);
+  const afterSignInMethodsObject = convertToSignInMethodsObject(after);
+
+  const signInDiff = isAfter
+    ? detailedDiff(beforeSignInMethodsObject, afterSignInMethodsObject)
+    : detailedDiff(afterSignInMethodsObject, beforeSignInMethodsObject);
+
+  const displaySignInMethodsObject = isAfter ? afterSignInMethodsObject : beforeSignInMethodsObject;
+
+  const hasIdentifierChanged = (identifierKey: SignInIdentifier) =>
+    get(signInDiff, `added.${identifierKey.toLocaleLowerCase()}`) !== undefined;
+
+  const hasAuthenticationChanged = (
+    identifierKey: SignInIdentifier,
+    authenticationKey: keyof SignInMethodsObject[SignInIdentifier]
+  ) =>
+    get(signInDiff, `updated.${identifierKey.toLocaleLowerCase()}.${authenticationKey}`) !==
+    undefined;
+
+  return (
+    <div>
+      <div className={styles.title}>{t('sign_in_exp.save_alert.sign_in')}</div>
+      <ul className={styles.list}>
+        {
+          // eslint-disable-next-line no-restricted-syntax
+          (Object.keys(displaySignInMethodsObject).slice().sort() as SignInIdentifier[]).map(
+            (identifierKey) => {
+              const { password, verificationCode } = displaySignInMethodsObject[identifierKey];
+              const hasAuthentication = password || verificationCode;
+              const needDisjunction = password && verificationCode;
+
+              return (
+                <li key={identifierKey}>
+                  <DiffSegment hasChanged={hasIdentifierChanged(identifierKey)} isAfter={isAfter}>
+                    {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
+                      context: identifierKey.toLocaleLowerCase(),
+                    })}
+                    {hasAuthentication && ' ('}
+                    {password && (
+                      <DiffSegment
+                        hasChanged={hasAuthenticationChanged(identifierKey, 'password')}
+                        isAfter={isAfter}
+                      >
+                        {t('sign_in_exp.sign_up_and_sign_in.sign_in.password_auth')}
+                      </DiffSegment>
+                    )}
+                    {needDisjunction && ` ${String(t('sign_in_exp.sign_up_and_sign_in.or'))} `}
+                    {verificationCode && (
+                      <DiffSegment
+                        hasChanged={hasAuthenticationChanged(identifierKey, 'verificationCode')}
+                        isAfter={isAfter}
+                      >
+                        {t('sign_in_exp.sign_up_and_sign_in.sign_in.verification_code_auth')}
+                      </DiffSegment>
+                    )}
+                    {hasAuthentication && ')'}
+                  </DiffSegment>
+                </li>
+              );
+            }
+          )
+        }
+      </ul>
+    </div>
+  );
+};
+
+export default SignInDiffSection;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
@ -0,0 +1,54 @@
+import type { SignUp } from '@logto/schemas';
+import { diff } from 'deep-object-diff';
+import get from 'lodash.get';
+import { useTranslation } from 'react-i18next';
+
+import DiffSegment from './DiffSegment';
+import * as styles from './index.module.scss';
+
+type Props = {
+  before: SignUp;
+  after: SignUp;
+  isAfter?: boolean;
+};
+
+const SignUpDiffSection = ({ before, after, isAfter = false }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const signUpDiff = isAfter ? diff(before, after) : diff(after, before);
+  const signUp = isAfter ? after : before;
+  const hasChanged = (path: keyof SignUp) => get(signUpDiff, path) !== undefined;
+
+  const { identifier, password, verify } = signUp;
+  const hasAuthentication = password || verify;
+  const needConjunction = password && verify;
+
+  return (
+    <div>
+      <div className={styles.title}>{t('sign_in_exp.save_alert.sign_up')}</div>
+      <ul className={styles.list}>
+        <li>
+          <DiffSegment hasChanged={hasChanged('identifier')} isAfter={isAfter}>
+            {t('sign_in_exp.sign_up_and_sign_in.identifiers', {
+              context: identifier.toLowerCase(),
+            })}
+          </DiffSegment>
+          {hasAuthentication && ' ('}
+          {password && (
+            <DiffSegment hasChanged={hasChanged('password')} isAfter={isAfter}>
+              {t('sign_in_exp.sign_up_and_sign_in.sign_up.set_a_password_option')}
+            </DiffSegment>
+          )}
+          {needConjunction && ` ${String(t('sign_in_exp.sign_up_and_sign_in.and'))} `}
+          {verify && (
+            <DiffSegment hasChanged={hasChanged('verify')} isAfter={isAfter}>
+              {t('sign_in_exp.sign_up_and_sign_in.sign_up.verify_at_sign_up_option')}
+            </DiffSegment>
+          )}
+          {hasAuthentication && ')'}
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default SignUpDiffSection;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx
@ -0,0 +1,63 @@
+import { isLanguageTag } from '@logto/language-kit';
+import { conditional } from '@silverhand/essentials';
+import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
+
+import useConnectorGroups from '@/hooks/use-connector-groups';
+
+import DiffSegment from './DiffSegment';
+import * as styles from './index.module.scss';
+
+type Props = {
+  before: string[];
+  after: string[];
+  isAfter?: boolean;
+};
+
+const SocialTargetsDiffSection = ({ before, after, isAfter = false }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { data: groups, error } = useConnectorGroups();
+  const { language } = i18next;
+  const sortedBeforeTargets = before.slice().sort();
+  const sortedAfterTargets = after.slice().sort();
+
+  const displayTargets = isAfter ? sortedAfterTargets : sortedBeforeTargets;
+
+  const hasChanged = (target: string) => !(before.includes(target) && after.includes(target));
+
+  if (!groups) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className={styles.title}>{t('sign_in_exp.save_alert.social')}</div>
+      <ul className={styles.list}>
+        {displayTargets.map((target) => {
+          const connectorDetail = groups.find(
+            ({ target: connectorTarget }) => connectorTarget === target
+          );
+
+          if (!connectorDetail) {
+            return null;
+          }
+
+          return (
+            <li key={target}>
+              <DiffSegment hasChanged={hasChanged(target)} isAfter={isAfter}>
+                {conditional(isLanguageTag(language) && connectorDetail.name[language]) ??
+                  connectorDetail.name.en}
+              </DiffSegment>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default SocialTargetsDiffSection;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/index.module.scss
@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.title {
+  font: var(--font-title-small);
+}
+
+.list {
+  padding-left: _.unit(6);
+}
+
+.red {
+  background-color: rgba(221, 55, 48, 30%);
+}
+
+.green {
+  background-color: rgb(104, 190, 108, 40%);
+}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/index.tsx
@ -0,0 +1,45 @@
+import type { SignInExperience } from '@logto/schemas';
+
+import SignInDiffSection from './SignInDiffSection';
+import SignUpDiffSection from './SignUpDiffSection';
+import SocialTargetsDiffSection from './SocialTargetsDiffSection';
+import { isSignInMethodsDifferent, isSignUpDifferent, isSocialTargetsDifferent } from './utilities';
+
+type Props = {
+  before: SignInExperience;
+  after: SignInExperience;
+  isAfter?: boolean;
+};
+
+const SignUpAndSignInDiffSection = ({ before, after, isAfter = false }: Props) => {
+  const showSignUpDiff = isSignUpDifferent(before.signUp, after.signUp);
+  const showSignInDiff = isSignInMethodsDifferent(before.signIn.methods, after.signIn.methods);
+  const showSocialDiff = isSocialTargetsDifferent(
+    before.socialSignInConnectorTargets,
+    after.socialSignInConnectorTargets
+  );
+
+  return (
+    <>
+      {showSignUpDiff && (
+        <SignUpDiffSection before={before.signUp} after={after.signUp} isAfter={isAfter} />
+      )}
+      {showSignInDiff && (
+        <SignInDiffSection
+          before={before.signIn.methods}
+          after={after.signIn.methods}
+          isAfter={isAfter}
+        />
+      )}
+      {showSocialDiff && (
+        <SocialTargetsDiffSection
+          before={before.socialSignInConnectorTargets}
+          after={after.socialSignInConnectorTargets}
+          isAfter={isAfter}
+        />
+      )}
+    </>
+  );
+};
+
+export default SignUpAndSignInDiffSection;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/types.ts
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/types.ts
@ -0,0 +1,6 @@
+import type { SignInIdentifier } from '@logto/schemas';
+
+export type SignInMethodsObject = Record<
+  SignInIdentifier,
+  { password: boolean; verificationCode: boolean }
+>;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/utilities.ts
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/utilities.ts
@ -0,0 +1,27 @@
+import type { SignInExperience } from '@logto/schemas';
+import { diff } from 'deep-object-diff';
+
+import type { SignInMethod } from '../SignInMethodEditBox/types';
+import type { SignInMethodsObject } from './types';
+
+export const isSignUpDifferent = (
+  before: SignInExperience['signUp'],
+  after: SignInExperience['signUp']
+) => Object.keys(diff(before, after)).length > 0;
+
+export const convertToSignInMethodsObject = (signInMethods: SignInMethod[]): SignInMethodsObject =>
+  signInMethods.reduce<SignInMethodsObject>(
+    (methodsObject, { identifier, password, verificationCode }) => ({
+      ...methodsObject,
+      [identifier]: { password, verificationCode },
+    }),
+    // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, no-restricted-syntax
+    {} as SignInMethodsObject
+  );
+
+export const isSignInMethodsDifferent = (before: SignInMethod[], after: SignInMethod[]) =>
+  Object.keys(diff(convertToSignInMethodsObject(before), convertToSignInMethodsObject(after)))
+    .length > 0;
+
+export const isSocialTargetsDifferent = (before: string[], after: string[]) =>
+  Object.keys(diff(before.slice().sort(), after.slice().sort())).length > 0;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss
@ -0,0 +1,36 @@
+@use '@/scss/underscore' as _;
+
+.dropdown {
+  min-width: unset;
+}
+
+.addAnotherDropdown {
+  min-width: 208px;
+}
+
+.plusIcon {
+  color: var(--color-text-secondary);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+
+  .logo {
+    margin-right: _.unit(3);
+    width: 20px;
+    height: 20px;
+  }
+
+  .name {
+    font: var(--font-body-medium);
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    object-fit: cover;
+    margin-left: _.unit(1);
+    color: var(--color-text-secondary);
+  }
+}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx
@ -0,0 +1,71 @@
+import classNames from 'classnames';
+
+import Plus from '@/assets/images/plus.svg';
+import ActionMenu from '@/components/ActionMenu';
+import type { Props as ButtonProps } from '@/components/Button';
+import { DropdownItem } from '@/components/Dropdown';
+import UnnamedTrans from '@/components/UnnamedTrans';
+import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
+import type { ConnectorGroup } from '@/types/connector';
+
+import * as styles from './AddButton.module.scss';
+
+type Props = {
+  options: ConnectorGroup[];
+  onSelected: (signInIdentifier: string) => void;
+  hasSelectedConnectors: boolean;
+};
+
+const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
+  if (options.length === 0) {
+    return null;
+  }
+
+  const addSocialConnectorButtonProps: ButtonProps = {
+    type: 'default',
+    size: 'medium',
+    title: 'sign_in_exp.sign_up_and_sign_in.social_sign_in.add_social_connector',
+    icon: <Plus className={styles.plusIcon} />,
+  };
+
+  const addAnotherButtonProps: ButtonProps = {
+    type: 'text',
+    size: 'small',
+    title: 'general.add_another',
+  };
+
+  return (
+    <ActionMenu
+      buttonProps={hasSelectedConnectors ? addAnotherButtonProps : addSocialConnectorButtonProps}
+      dropdownHorizontalAlign="start"
+      dropdownClassName={classNames(
+        hasSelectedConnectors ? styles.addAnotherDropdown : styles.dropdown
+      )}
+      isDropdownFullWidth={!hasSelectedConnectors}
+    >
+      {options.map(({ target, logo, name, connectors }) => (
+        <DropdownItem
+          key={target}
+          onClick={() => {
+            onSelected(target);
+          }}
+        >
+          <div className={styles.title}>
+            <img src={logo} alt={target} className={styles.logo} />
+            <UnnamedTrans resource={name} className={styles.name} />
+            {connectors.length > 1 &&
+              connectors
+                .filter(({ enabled }) => enabled)
+                .map(({ platform }) => (
+                  <div key={platform} className={styles.icon}>
+                    {platform && <ConnectorPlatformIcon platform={platform} />}
+                  </div>
+                ))}
+          </div>
+        </DropdownItem>
+      ))}
+    </ActionMenu>
+  );
+};
+
+export default AddButton;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
@ -0,0 +1,44 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+  margin: _.unit(2) 0;
+
+
+  .info {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    width: 100%;
+    margin-right: _.unit(2);
+    padding: _.unit(3) _.unit(2);
+    background-color: var(--color-layer-2);
+    border-radius: 8px;
+    cursor: move;
+    color: var(--color-text);
+
+    .draggableIcon {
+      color: var(--color-text-secondary);
+    }
+
+    .logo {
+      margin: auto _.unit(3);
+      width: 20px;
+      height: 20px;
+    }
+
+    .name {
+      font: var(--font-label-large);
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      object-fit: cover;
+      margin-left: _.unit(1);
+      color: var(--color-text-secondary);
+    }
+  }
+}
+
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
@ -0,0 +1,42 @@
+import Draggable from '@/assets/images/draggable.svg';
+import Minus from '@/assets/images/minus.svg';
+import IconButton from '@/components/IconButton';
+import UnnamedTrans from '@/components/UnnamedTrans';
+import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
+import type { ConnectorGroup } from '@/types/connector';
+
+import * as styles from './SelectedConnectorItem.module.scss';
+
+type Props = {
+  data: ConnectorGroup;
+  onDelete: (connectorTarget: string) => void;
+};
+
+const SelectedConnectorItem = ({ data: { logo, target, name, connectors }, onDelete }: Props) => {
+  return (
+    <div className={styles.item}>
+      <div className={styles.info}>
+        <Draggable className={styles.draggableIcon} />
+        <img src={logo} alt={target} className={styles.logo} />
+        <UnnamedTrans resource={name} className={styles.name} />
+        {connectors.length > 1 &&
+          connectors
+            .filter(({ enabled }) => enabled)
+            .map(({ platform }) => (
+              <div key={platform} className={styles.icon}>
+                {platform && <ConnectorPlatformIcon platform={platform} />}
+              </div>
+            ))}
+      </div>
+      <IconButton
+        onClick={() => {
+          onDelete(target);
+        }}
+      >
+        <Minus />
+      </IconButton>
+    </div>
+  );
+};
+
+export default SelectedConnectorItem;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/index.module.scss
@ -0,0 +1,12 @@
+@use '@/scss/underscore' as _;
+
+.setUpHint {
+  font: var(--font-body-medium);
+  color: var(--color-text-secondary);
+  margin-top: _.unit(2);
+
+  a {
+    color: var(--color-text-link);
+    text-decoration: none;
+  }
+}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/index.tsx
@ -0,0 +1,94 @@
+import { ConnectorType } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import DragDropProvider from '@/components/Transfer/DragDropProvider';
+import DraggableItem from '@/components/Transfer/DraggableItem';
+import useConnectorGroups from '@/hooks/use-connector-groups';
+import type { ConnectorGroup } from '@/types/connector';
+
+import ConnectorSetupWarning from '../ConnectorSetupWarning';
+import AddButton from './AddButton';
+import SelectedConnectorItem from './SelectedConnectorItem';
+import * as styles from './index.module.scss';
+
+type Props = {
+  value: string[];
+  onChange: (value: string[]) => void;
+};
+
+const SocialConnectorEditBox = ({ value, onChange }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { data: connectorData, error } = useConnectorGroups();
+
+  if (!connectorData || error) {
+    return null;
+  }
+
+  const onMoveItem = (dragIndex: number, hoverIndex: number) => {
+    const dragItem = value[dragIndex];
+    const hoverItem = value[hoverIndex];
+
+    if (!dragItem || !hoverItem) {
+      return;
+    }
+
+    onChange(
+      value.map((value_, index) => {
+        if (index === dragIndex) {
+          return hoverItem;
+        }
+
+        if (index === hoverIndex) {
+          return dragItem;
+        }
+
+        return value_;
+      })
+    );
+  };
+
+  const selectedConnectorItems = value
+    .map((connectorTarget) => connectorData.find(({ target }) => target === connectorTarget))
+    // eslint-disable-next-line unicorn/prefer-native-coercion-functions
+    .filter((item): item is ConnectorGroup => Boolean(item));
+
+  const connectorOptions = connectorData.filter(
+    ({ target, type, enabled }) =>
+      !value.includes(target) && type === ConnectorType.Social && enabled
+  );
+
+  return (
+    <div>
+      <DragDropProvider>
+        {selectedConnectorItems.map((item, index) => (
+          <DraggableItem key={item.id} id={item.id} sortIndex={index} moveItem={onMoveItem}>
+            <SelectedConnectorItem
+              data={item}
+              onDelete={(target) => {
+                onChange(value.filter((connectorTarget) => connectorTarget !== target));
+              }}
+            />
+          </DraggableItem>
+        ))}
+      </DragDropProvider>
+      <AddButton
+        options={connectorOptions}
+        hasSelectedConnectors={selectedConnectorItems.length > 0}
+        onSelected={(target) => {
+          onChange([...value, target]);
+        }}
+      />
+      <ConnectorSetupWarning requiredConnectors={[ConnectorType.Social]} />
+      <div className={styles.setUpHint}>
+        {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.not_in_list')}{' '}
+        <Link to="/connectors/social" target="_blank">
+          {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.set_up_more')}
+        </Link>{' '}
+        {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.set_up_hint.go_to')}
+      </div>
+    </div>
+  );
+};
+
+export default SocialConnectorEditBox;
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/constants.ts
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/constants.ts
@ -0,0 +1,37 @@
+import { SignUpIdentifier, SignInIdentifier, ConnectorType } from '@logto/schemas';
+
+export const signUpIdentifiers = Object.values(SignUpIdentifier);
+
+export const signInIdentifiers = Object.values(SignInIdentifier);
+
+export const requiredVerifySignUpIdentifiers = [
+  SignUpIdentifier.Email,
+  SignUpIdentifier.Sms,
+  SignUpIdentifier.EmailOrSms,
+];
+
+export const signUpToSignInIdentifierMapping: { [key in SignUpIdentifier]: SignInIdentifier[] } = {
+  [SignUpIdentifier.Username]: [SignInIdentifier.Username],
+  [SignUpIdentifier.Email]: [SignInIdentifier.Email],
+  [SignUpIdentifier.Sms]: [SignInIdentifier.Sms],
+  [SignUpIdentifier.EmailOrSms]: [SignInIdentifier.Email, SignInIdentifier.Sms],
+  [SignUpIdentifier.None]: [],
+};
+
+export const signUpIdentifierToRequiredConnectorMapping: {
+  [key in SignUpIdentifier]: ConnectorType[];
+} = {
+  [SignUpIdentifier.Username]: [],
+  [SignUpIdentifier.Email]: [ConnectorType.Email],
+  [SignUpIdentifier.Sms]: [ConnectorType.Sms],
+  [SignUpIdentifier.EmailOrSms]: [ConnectorType.Email, ConnectorType.Sms],
+  [SignUpIdentifier.None]: [],
+};
+
+export const signInIdentifierToRequiredConnectorMapping: {
+  [key in SignInIdentifier]: ConnectorType[];
+} = {
+  [SignInIdentifier.Username]: [],
+  [SignInIdentifier.Email]: [ConnectorType.Email],
+  [SignInIdentifier.Sms]: [ConnectorType.Sms],
+};
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.module.scss
@ -0,0 +1,28 @@
+@use '@/scss/underscore' as _;
+
+.title {
+  @include _.subhead-cap;
+  color: var(--color-neutral-variant-60);
+  margin-top: _.unit(12);
+
+  &:first-child {
+    margin-top: _.unit(6);
+  }
+}
+
+.formFieldDescription {
+  font: var(--font-body-medium);
+  color: var(--color-text-secondary);
+  margin-bottom: _.unit(2);
+}
+
+.socialOnlyDescription {
+  margin-left: _.unit(1);
+  color: var(--color-text-secondary);
+}
+
+.signUpAuthentication {
+  > :not(:first-child) {
+    margin-top: _.unit(3);
+  }
+}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.tsx
@ -3,15 +3,17 @@ import { useFormContext } from 'react-hook-form';

 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';

-import SignInMethodsForm from '../components/SignInMethodsForm';
-import type { SignInExperienceForm } from '../types';
+import type { SignInExperienceForm } from '../../types';
+import SignInForm from './SignInForm';
+import SignUpForm from './SignUpForm';
+import SocialSignInForm from './SocialSignInForm';

 type Props = {
  defaultData: SignInExperienceForm;
  isDataDirty: boolean;
 };

-const SignInMethodsTab = ({ defaultData, isDataDirty }: Props) => {
+const SignUpAndSignInTab = ({ defaultData, isDataDirty }: Props) => {
  const { reset } = useFormContext<SignInExperienceForm>();

  useEffect(() => {
@ -22,10 +24,12 @@ const SignInMethodsTab = ({ defaultData, isDataDirty }: Props) => {

  return (
    <>
-      <SignInMethodsForm />
+      <SignUpForm />
+      <SignInForm />
+      <SocialSignInForm />
      <UnsavedChangesAlertModal hasUnsavedChanges={isDataDirty} />
    </>
  );
 };

-export default SignInMethodsTab;
+export default SignUpAndSignInTab;
--- a/packages/console/src/pages/SignInExperience/types.ts
+++ b/packages/console/src/pages/SignInExperience/types.ts
@ -1,13 +1,6 @@
-import type { SignInExperience, SignInMethodKey } from '@logto/schemas';
+import type { SignInExperience, SignUp } from '@logto/schemas';

-export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
-  signInMethods: {
-    primary?: SignInMethodKey;
-    enableSecondary: boolean;
-    username: boolean;
-    sms: boolean;
-    email: boolean;
-    social: boolean;
-  };
+export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'signUp'> & {
+  signUp: Partial<SignUp>;
  createAccountEnabled: boolean;
 };
--- a/packages/console/src/pages/SignInExperience/utilities.ts
+++ b/packages/console/src/pages/SignInExperience/utilities.ts
@ -1,58 +1,26 @@
 import en from '@logto/phrases-ui/lib/locales/en';
-import type { SignInExperience, SignInMethods, Translation } from '@logto/schemas';
-import { SignInMethodKey, SignInMethodState, SignInMode } from '@logto/schemas';
+import type { SignInExperience, Translation } from '@logto/schemas';
+import { SignUpIdentifier, SignInMode } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';

+import {
+  isSignInMethodsDifferent,
+  isSignUpDifferent,
+  isSocialTargetsDifferent,
+} from './tabs/SignUpAndSignInTab/components/SignUpAndSignInDiffSection/utilities';
 import type { SignInExperienceForm } from './types';

-const findMethodState = (
-  setup: SignInExperienceForm,
-  method: keyof SignInMethods
-): SignInMethodState => {
-  const { signInMethods } = setup;
-
-  if (signInMethods.primary === method) {
-    return SignInMethodState.Primary;
-  }
-
-  if (!signInMethods.enableSecondary) {
-    return SignInMethodState.Disabled;
-  }
-
-  if (signInMethods[method]) {
-    return SignInMethodState.Secondary;
-  }
-
-  return SignInMethodState.Disabled;
-};
-
 export const signInExperienceParser = {
  toLocalForm: (signInExperience: SignInExperience): SignInExperienceForm => {
-    const methodKeys = Object.values(SignInMethodKey);
-    const primaryMethod = methodKeys.find(
-      (key) => signInExperience.signInMethods[key] === SignInMethodState.Primary
-    );
-    const secondaryMethods = methodKeys.filter(
-      (key) => signInExperience.signInMethods[key] === SignInMethodState.Secondary
-    );
-
    const { signInMode } = signInExperience;

    return {
      ...signInExperience,
-      signInMethods: {
-        primary: primaryMethod,
-        enableSecondary: secondaryMethods.length > 0,
-        username: secondaryMethods.includes(SignInMethodKey.Username),
-        sms: secondaryMethods.includes(SignInMethodKey.Sms),
-        email: secondaryMethods.includes(SignInMethodKey.Email),
-        social: secondaryMethods.includes(SignInMethodKey.Social),
-      },
      createAccountEnabled: signInMode !== SignInMode.SignIn,
    };
  },
  toRemoteModel: (setup: SignInExperienceForm): SignInExperience => {
-    const { branding, createAccountEnabled } = setup;
+    const { branding, createAccountEnabled, signUp } = setup;

    return {
      ...setup,
@ -62,37 +30,28 @@ export const signInExperienceParser = {
        darkLogoUrl: conditional(branding.darkLogoUrl?.length && branding.darkLogoUrl),
        slogan: conditional(branding.slogan?.length && branding.slogan),
      },
-      signInMethods: {
-        username: findMethodState(setup, 'username'),
-        sms: findMethodState(setup, 'sms'),
-        email: findMethodState(setup, 'email'),
-        social: findMethodState(setup, 'social'),
+      signUp: {
+        identifier: signUp.identifier ?? SignUpIdentifier.Username,
+        password: Boolean(signUp.password),
+        verify: Boolean(signUp.verify),
      },
      signInMode: createAccountEnabled ? SignInMode.SignInAndRegister : SignInMode.SignIn,
    };
  },
 };

-export const compareSignInMethods = (
+export const compareSignUpAndSignInConfigs = (
  before: SignInExperience,
  after: SignInExperience
 ): boolean => {
-  if (before.socialSignInConnectorTargets.length !== after.socialSignInConnectorTargets.length) {
-    return false;
-  }
-
-  if (
-    before.socialSignInConnectorTargets.some(
-      (target) => !after.socialSignInConnectorTargets.includes(target)
+  return (
+    !isSignUpDifferent(before.signUp, after.signUp) &&
+    !isSignInMethodsDifferent(before.signIn.methods, after.signIn.methods) &&
+    !isSocialTargetsDifferent(
+      before.socialSignInConnectorTargets,
+      after.socialSignInConnectorTargets
    )
-  ) {
-    return false;
-  }
-
-  const { signInMethods: beforeMethods } = before;
-  const { signInMethods: afterMethods } = after;
-
-  return Object.values(SignInMethodKey).every((key) => beforeMethods[key] === afterMethods[key]);
+  );
 };

 export const flattenTranslation = (
--- a/packages/core/nodemon.json
+++ b/packages/core/nodemon.json
@ -1,5 +1,5 @@
 {
-  "exec": "tsc -p tsconfig.build.json --incremental && node ./build/index.js",
+  "exec": "tsc -p tsconfig.build.json --incremental && node ./build/index.js || exit 1",
  "ignore": [
    "node_modules/**/node_modules"
  ],
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -30,7 +30,7 @@
    "@silverhand/essentials": "^1.3.0",
    "chalk": "^4",
    "clean-deep": "^3.4.0",
-    "dayjs": "^1.10.5",
+    "date-fns": "^2.29.3",
    "debug": "^4.3.4",
    "decamelize": "^5.0.0",
    "deepmerge": "^4.2.2",
@ -38,7 +38,7 @@
    "etag": "^1.8.1",
    "find-up": "^5.0.0",
    "fs-extra": "^10.1.0",
-    "got": "^11.8.2",
+    "got": "^11.8.5",
    "hash-wasm": "^4.9.0",
    "i18next": "^21.8.16",
    "iconv-lite": "0.6.3",
@ -55,7 +55,7 @@
    "lodash.pick": "^4.4.0",
    "module-alias": "^2.2.2",
    "nanoid": "^3.1.23",
-    "oidc-provider": "^7.11.3",
+    "oidc-provider": "^7.13.0",
    "p-retry": "^4.6.1",
    "query-string": "^7.0.1",
    "roarr": "^7.11.0",
@ -84,7 +84,7 @@
    "@types/koa-send": "^4.1.3",
    "@types/lodash.pick": "^4.4.6",
    "@types/node": "^16.0.0",
-    "@types/oidc-provider": "^7.11.1",
+    "@types/oidc-provider": "^7.12.0",
    "@types/supertest": "^2.0.11",
    "copyfiles": "^2.4.1",
    "eslint": "^8.21.0",
@ -100,7 +100,7 @@
    "typescript": "^4.7.4"
  },
  "engines": {
-    "node": "^16.0.0"
+    "node": "^16.13.0 || ^18.12.0"
  },
  "_moduleAliases": {
    "@": "./build"
--- a/packages/core/src/mocks/connector-base-data.ts
+++ b/packages/core/src/mocks/connector-base-data.ts
@ -0,0 +1,125 @@
+import type { ConnectorMetadata } from '@logto/connector-kit';
+import { ConnectorPlatform } from '@logto/connector-kit';
+import type { Connector } from '@logto/schemas';
+
+export const mockMetadata: ConnectorMetadata = {
+  id: 'id',
+  target: 'connector',
+  platform: null,
+  name: {
+    en: 'Connector',
+    'pt-PT': 'Conector',
+    'zh-CN': '连接器',
+    'tr-TR': 'Connector',
+    ko: 'Connector',
+  },
+  logo: './logo.png',
+  logoDark: './logo-dark.png',
+  description: {
+    en: 'Connector',
+    'pt-PT': 'Conector',
+    'zh-CN': '连接器',
+    'tr-TR': 'Connector',
+    ko: 'Connector',
+  },
+  readme: 'README.md',
+  configTemplate: 'config-template.json',
+};
+
+export const mockMetadata0: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id0',
+  target: 'connector_0',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockMetadata1: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id1',
+  target: 'connector_1',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockMetadata2: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id2',
+  target: 'connector_2',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockMetadata3: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id3',
+  target: 'connector_3',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockMetadata4: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id4',
+  target: 'connector_4',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockMetadata5: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id5',
+  target: 'connector_5',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockMetadata6: ConnectorMetadata = {
+  ...mockMetadata,
+  id: 'id6',
+  target: 'connector_6',
+  platform: ConnectorPlatform.Universal,
+};
+
+export const mockConnector0: Connector = {
+  id: 'id0',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_123,
+};
+
+export const mockConnector1: Connector = {
+  id: 'id1',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_234,
+};
+
+export const mockConnector2: Connector = {
+  id: 'id2',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_345,
+};
+
+export const mockConnector3: Connector = {
+  id: 'id3',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_456,
+};
+
+export const mockConnector4: Connector = {
+  id: 'id4',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_567,
+};
+
+export const mockConnector5: Connector = {
+  id: 'id5',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_567,
+};
+
+export const mockConnector6: Connector = {
+  id: 'id6',
+  enabled: true,
+  config: {},
+  createdAt: 1_234_567_890_567,
+};
--- a/packages/core/src/mocks/connector.ts
+++ b/packages/core/src/mocks/connector.ts
@ -1,33 +1,29 @@
 import { ConnectorPlatform } from '@logto/connector-kit';
-import type { Connector, ConnectorMetadata } from '@logto/schemas';
+import type { Connector } from '@logto/schemas';
 import { ConnectorType } from '@logto/schemas';
 import { any } from 'zod';

 import type { LogtoConnector } from '@/connectors/types';

-export const mockMetadata: ConnectorMetadata = {
-  id: 'id',
-  target: 'connector',
-  platform: null,
-  name: {
-    en: 'Connector',
-    'pt-PT': 'Conector',
-    'zh-CN': '连接器',
-    'tr-TR': 'Connector',
-    ko: 'Connector',
-  },
-  logo: './logo.png',
-  logoDark: './logo-dark.png',
-  description: {
-    en: 'Connector',
-    'pt-PT': 'Conector',
-    'zh-CN': '连接器',
-    'tr-TR': 'Connector',
-    ko: 'Connector',
-  },
-  readme: 'README.md',
-  configTemplate: 'config-template.json',
-};
+import {
+  mockConnector0,
+  mockConnector1,
+  mockConnector2,
+  mockConnector3,
+  mockConnector4,
+  mockConnector5,
+  mockConnector6,
+  mockMetadata,
+  mockMetadata0,
+  mockMetadata1,
+  mockMetadata2,
+  mockMetadata3,
+  mockMetadata4,
+  mockMetadata5,
+  mockMetadata6,
+} from './connector-base-data';
+
+export { mockMetadata } from './connector-base-data';

 export const mockConnector: Connector = {
  id: 'id',
@ -44,104 +40,6 @@ export const mockLogtoConnector = {
  configGuard: any(),
 };

-const mockMetadata0: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id0',
-  target: 'connector_0',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockMetadata1: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id1',
-  target: 'connector_1',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockMetadata2: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id2',
-  target: 'connector_2',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockMetadata3: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id3',
-  target: 'connector_3',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockMetadata4: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id4',
-  target: 'connector_4',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockMetadata5: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id5',
-  target: 'connector_5',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockMetadata6: ConnectorMetadata = {
-  ...mockMetadata,
-  id: 'id6',
-  target: 'connector_6',
-  platform: ConnectorPlatform.Universal,
-};
-
-const mockConnector0: Connector = {
-  id: 'id0',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_123,
-};
-
-const mockConnector1: Connector = {
-  id: 'id1',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_234,
-};
-
-const mockConnector2: Connector = {
-  id: 'id2',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_345,
-};
-
-const mockConnector3: Connector = {
-  id: 'id3',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_456,
-};
-
-const mockConnector4: Connector = {
-  id: 'id4',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_567,
-};
-
-const mockConnector5: Connector = {
-  id: 'id5',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_567,
-};
-
-const mockConnector6: Connector = {
-  id: 'id6',
-  enabled: true,
-  config: {},
-  createdAt: 1_234_567_890_567,
-};
-
 export const mockConnectorList: Connector[] = [
  mockConnector0,
  mockConnector1,
@ -312,3 +210,52 @@ export const mockLogtoConnectors = [
  mockWechatConnector,
  mockWechatNativeConnector,
 ];
+
+export const disabledSocialTarget01 = 'disableSocialTarget-id01';
+export const disabledSocialTarget02 = 'disableSocialTarget-id02';
+export const enabledSocialTarget01 = 'enabledSocialTarget-id01';
+
+export const mockSocialConnectors: LogtoConnector[] = [
+  {
+    dbEntry: {
+      id: 'id0',
+      enabled: false,
+      config: {},
+      createdAt: 1_234_567_890_123,
+    },
+    metadata: {
+      ...mockMetadata,
+      target: disabledSocialTarget01,
+    },
+    type: ConnectorType.Social,
+    ...mockLogtoConnector,
+  },
+  {
+    dbEntry: {
+      id: 'id1',
+      enabled: true,
+      config: {},
+      createdAt: 1_234_567_890_123,
+    },
+    metadata: {
+      ...mockMetadata,
+      target: enabledSocialTarget01,
+    },
+    type: ConnectorType.Social,
+    ...mockLogtoConnector,
+  },
+  {
+    dbEntry: {
+      id: 'id2',
+      enabled: false,
+      config: {},
+      createdAt: 1_234_567_890_123,
+    },
+    metadata: {
+      ...mockMetadata,
+      target: disabledSocialTarget02,
+    },
+    type: ConnectorType.Social,
+    ...mockLogtoConnector,
+  },
+];
--- a/packages/core/src/mocks/sign-in-experience.ts
+++ b/packages/core/src/mocks/sign-in-experience.ts
@ -2,11 +2,12 @@ import type {
  Branding,
  LanguageInfo,
  SignInExperience,
-  SignInMethods,
  TermsOfUse,
  Color,
+  SignUp,
+  SignIn,
 } from '@logto/schemas';
-import { BrandingStyle, SignInMethodState, SignInMode } from '@logto/schemas';
+import { BrandingStyle, SignInMode, SignUpIdentifier, SignInIdentifier } from '@logto/schemas';

 export const mockSignInExperience: SignInExperience = {
  id: 'foo',
@ -27,11 +28,32 @@ export const mockSignInExperience: SignInExperience = {
    autoDetect: true,
    fallbackLanguage: 'en',
  },
-  signInMethods: {
-    username: SignInMethodState.Primary,
-    email: SignInMethodState.Disabled,
-    sms: SignInMethodState.Disabled,
-    social: SignInMethodState.Secondary,
+  signUp: {
+    identifier: SignUpIdentifier.Username,
+    password: true,
+    verify: false,
+  },
+  signIn: {
+    methods: [
+      {
+        identifier: SignInIdentifier.Username,
+        password: true,
+        isPasswordPrimary: true,
+        verificationCode: true,
+      },
+      {
+        identifier: SignInIdentifier.Email,
+        password: true,
+        verificationCode: true,
+        isPasswordPrimary: true,
+      },
+      {
+        identifier: SignInIdentifier.Sms,
+        password: true,
+        verificationCode: true,
+        isPasswordPrimary: true,
+      },
+    ],
  },
  socialSignInConnectorTargets: ['github', 'facebook', 'wechat'],
  signInMode: SignInMode.SignInAndRegister,
@ -59,9 +81,19 @@ export const mockLanguageInfo: LanguageInfo = {
  fallbackLanguage: 'en',
 };

-export const mockSignInMethods: SignInMethods = {
-  username: SignInMethodState.Primary,
-  email: SignInMethodState.Disabled,
-  sms: SignInMethodState.Disabled,
-  social: SignInMethodState.Disabled,
+export const mockSignUp: SignUp = {
+  identifier: SignUpIdentifier.Username,
+  password: true,
+  verify: false,
+};
+
+export const mockSignInMethod: SignIn['methods'][0] = {
+  identifier: SignInIdentifier.Username,
+  password: true,
+  verificationCode: false,
+  isPasswordPrimary: true,
+};
+
+export const mockSignIn = {
+  methods: [mockSignInMethod],
 };
--- a/packages/core/src/mocks/user.ts
+++ b/packages/core/src/mocks/user.ts
@ -8,8 +8,8 @@ export const mockUser: User = {
  primaryEmail: 'foo@logto.io',
  primaryPhone: '111111',
  roleNames: ['admin'],
-  passwordEncrypted: null,
-  passwordEncryptionMethod: null,
+  passwordEncrypted: 'password',
+  passwordEncryptionMethod: UsersPasswordEncryptionMethod.Argon2i,
  name: null,
  avatar: null,
  identities: {
--- a/packages/core/src/connectors/index.ts
+++ b/packages/core/src/connectors/index.ts
@ -1,8 +1,8 @@
 import { existsSync } from 'fs';
-import { readdir } from 'fs/promises';
 import path from 'path';

 import { connectorDirectory } from '@logto/cli/lib/constants';
+import { getConnectorPackagesFromDirectory } from '@logto/cli/lib/utilities';
 import type { AllConnector, CreateConnector } from '@logto/connector-kit';
 import { validateConfig } from '@logto/connector-kit';
 import { findPackage } from '@logto/shared';
@ -32,12 +32,11 @@ const loadConnectors = async () => {
    return [];
  }

-  const connectorFolders = await readdir(directory);
+  const connectorPackages = await getConnectorPackagesFromDirectory(directory);

  const connectors = await Promise.all(
-    connectorFolders.map(async (folder) => {
+    connectorPackages.map(async ({ path: packagePath, name }) => {
      try {
-        const packagePath = path.join(directory, folder);
        // eslint-disable-next-line no-restricted-syntax
        const { default: createConnector } = (await import(packagePath)) as {
          default: CreateConnector<AllConnector>;
@ -71,7 +70,7 @@ const loadConnectors = async () => {
        if (error instanceof Error) {
          console.log(
            `${chalk.red(
-              `[load-connector] skip ${chalk.bold(folder)} due to error: ${error.message}`
+              `[load-connector] skip ${chalk.bold(name)} due to error: ${error.message}`
            )}`
          );

--- a/packages/core/src/env-set/parameters.ts
+++ b/packages/core/src/env-set/parameters.ts
@ -1,2 +1,4 @@
-export const isTrue = (value: string) =>
-  ['1', 'true', 'y', 'yes', 'yep', 'yeah'].includes(value.toLowerCase());
+export const isTrue = (value?: string) =>
+  // We need to leverage the native type guard
+  // eslint-disable-next-line no-implicit-coercion
+  !!value && ['1', 'true', 'y', 'yes', 'yep', 'yeah'].includes(value.toLowerCase());
--- a/packages/core/src/lib/sign-in-experience.ts
+++ b/packages/core/src/lib/sign-in-experience.ts
@ -1,86 +0,0 @@
-import { builtInLanguages } from '@logto/phrases-ui';
-import type { Branding, LanguageInfo, SignInMethods, TermsOfUse } from '@logto/schemas';
-import { BrandingStyle, SignInMethodState } from '@logto/schemas';
-import type { Optional } from '@silverhand/essentials';
-
-import type { LogtoConnector } from '@/connectors/types';
-import { ConnectorType } from '@/connectors/types';
-import RequestError from '@/errors/RequestError';
-import { findAllCustomLanguageTags } from '@/queries/custom-phrase';
-import assertThat from '@/utils/assert-that';
-
-export const validateBranding = (branding: Branding) => {
-  if (branding.style === BrandingStyle.Logo_Slogan) {
-    assertThat(branding.slogan?.trim(), 'sign_in_experiences.empty_slogan');
-  }
-
-  assertThat(branding.logoUrl.trim(), 'sign_in_experiences.empty_logo');
-};
-
-export const validateLanguageInfo = async (languageInfo: LanguageInfo) => {
-  const supportedLanguages = [...builtInLanguages, ...(await findAllCustomLanguageTags())];
-
-  assertThat(
-    supportedLanguages.includes(languageInfo.fallbackLanguage),
-    new RequestError({
-      code: 'sign_in_experiences.unsupported_default_language',
-      language: languageInfo.fallbackLanguage,
-    })
-  );
-};
-
-export const validateTermsOfUse = (termsOfUse: TermsOfUse) => {
-  assertThat(
-    !termsOfUse.enabled || termsOfUse.contentUrl,
-    'sign_in_experiences.empty_content_url_of_terms_of_use'
-  );
-};
-
-export const isEnabled = (state: SignInMethodState) => state !== SignInMethodState.Disabled;
-
-export const validateSignInMethods = (
-  signInMethods: SignInMethods,
-  socialSignInConnectorTargets: Optional<string[]>,
-  enabledConnectors: LogtoConnector[]
-) => {
-  const signInMethodStates = Object.values(signInMethods);
-  assertThat(
-    signInMethodStates.filter((state) => state === SignInMethodState.Primary).length === 1,
-    'sign_in_experiences.not_one_and_only_one_primary_sign_in_method'
-  );
-
-  if (isEnabled(signInMethods.email)) {
-    assertThat(
-      enabledConnectors.some((item) => item.type === ConnectorType.Email),
-      new RequestError({
-        code: 'sign_in_experiences.enabled_connector_not_found',
-        type: ConnectorType.Email,
-      })
-    );
-  }
-
-  if (isEnabled(signInMethods.sms)) {
-    assertThat(
-      enabledConnectors.some((item) => item.type === ConnectorType.Sms),
-      new RequestError({
-        code: 'sign_in_experiences.enabled_connector_not_found',
-        type: ConnectorType.Sms,
-      })
-    );
-  }
-
-  if (isEnabled(signInMethods.social)) {
-    assertThat(
-      enabledConnectors.some((item) => item.type === ConnectorType.Social),
-      new RequestError({
-        code: 'sign_in_experiences.enabled_connector_not_found',
-        type: ConnectorType.Social,
-      })
-    );
-
-    assertThat(
-      socialSignInConnectorTargets && socialSignInConnectorTargets.length > 0,
-      'sign_in_experiences.empty_social_connectors'
-    );
-  }
-};
--- a/packages/core/src/lib/sign-in-experience/index.test.ts
+++ b/packages/core/src/lib/sign-in-experience/index.test.ts
@ -1,32 +1,53 @@
 import type { LanguageTag } from '@logto/language-kit';
 import { builtInLanguages } from '@logto/phrases-ui';
-import { BrandingStyle, SignInMethodState, ConnectorType } from '@logto/schemas';
+import type { CreateSignInExperience, SignInExperience } from '@logto/schemas';
+import { BrandingStyle } from '@logto/schemas';

 import {
-  mockAliyunDmConnector,
-  mockFacebookConnector,
-  mockGithubConnector,
+  disabledSocialTarget01,
+  disabledSocialTarget02,
+  enabledSocialTarget01,
  mockBranding,
-  mockSignInMethods,
+  mockSignInExperience,
+  mockSocialConnectors,
 } from '@/__mocks__';
+import type { LogtoConnector } from '@/connectors/types';
 import RequestError from '@/errors/RequestError';
 import {
-  isEnabled,
  validateBranding,
-  validateLanguageInfo,
-  validateSignInMethods,
  validateTermsOfUse,
+  validateLanguageInfo,
+  removeUnavailableSocialConnectorTargets,
 } from '@/lib/sign-in-experience';
-
-const enabledConnectors = [mockFacebookConnector, mockGithubConnector];
+import { updateDefaultSignInExperience } from '@/queries/sign-in-experience';

 const allCustomLanguageTags: LanguageTag[] = [];
 const findAllCustomLanguageTags = jest.fn(async () => allCustomLanguageTags);
+const getLogtoConnectorsPlaceHolder = jest.fn() as jest.MockedFunction<
+  () => Promise<LogtoConnector[]>
+>;
+const findDefaultSignInExperience = jest.fn() as jest.MockedFunction<
+  () => Promise<SignInExperience>
+>;

 jest.mock('@/queries/custom-phrase', () => ({
  findAllCustomLanguageTags: async () => findAllCustomLanguageTags(),
 }));

+jest.mock('@/connectors', () => ({
+  getLogtoConnectors: async () => getLogtoConnectorsPlaceHolder(),
+}));
+
+jest.mock('@/queries/sign-in-experience', () => ({
+  findDefaultSignInExperience: async () => findDefaultSignInExperience(),
+  updateDefaultSignInExperience: jest.fn(
+    async (data: Partial<CreateSignInExperience>): Promise<SignInExperience> => ({
+      ...mockSignInExperience,
+      ...data,
+    })
+  ),
+}));
+
 beforeEach(() => {
  jest.clearAllMocks();
 });
@ -134,97 +155,24 @@ describe('validate terms of use', () => {
  });
 });

-describe('check whether the social sign-in method state is enabled', () => {
-  it('should be truthy when sign-in method state is primary', () => {
-    expect(isEnabled(SignInMethodState.Primary)).toBeTruthy();
-  });
-
-  it('should be truthy when sign-in method state is secondary', () => {
-    expect(isEnabled(SignInMethodState.Secondary)).toBeTruthy();
-  });
-
-  it('should be falsy when sign-in method state is disabled', () => {
-    expect(isEnabled(SignInMethodState.Disabled)).toBeFalsy();
-  });
-});
-
-describe('validate sign-in methods', () => {
-  describe('There must be one and only one primary sign-in method.', () => {
-    test('should throw when there is no primary sign-in method', () => {
-      expect(() => {
-        validateSignInMethods(
-          { ...mockSignInMethods, username: SignInMethodState.Disabled },
-          [],
-          []
-        );
-      }).toMatchError(
-        new RequestError('sign_in_experiences.not_one_and_only_one_primary_sign_in_method')
-      );
-    });
-
-    test('should throw when there are more than one primary sign-in methods', () => {
-      expect(() => {
-        validateSignInMethods({ ...mockSignInMethods, social: SignInMethodState.Primary }, [], []);
-      }).toMatchError(
-        new RequestError('sign_in_experiences.not_one_and_only_one_primary_sign_in_method')
-      );
-    });
-  });
-
-  describe('There must be at least one enabled connector when the specific sign-in method is enabled.', () => {
-    test('should throw when there is no enabled email connector and email sign-in method is enabled', async () => {
-      expect(() => {
-        validateSignInMethods(
-          { ...mockSignInMethods, email: SignInMethodState.Secondary },
-          [],
-          enabledConnectors
-        );
-      }).toMatchError(
-        new RequestError({
-          code: 'sign_in_experiences.enabled_connector_not_found',
-          type: ConnectorType.Email,
-        })
-      );
-    });
-
-    test('should throw when there is no enabled SMS connector and SMS sign-in method is enabled', () => {
-      expect(() => {
-        validateSignInMethods(
-          { ...mockSignInMethods, sms: SignInMethodState.Secondary },
-          [],
-          enabledConnectors
-        );
-      }).toMatchError(
-        new RequestError({
-          code: 'sign_in_experiences.enabled_connector_not_found',
-          type: ConnectorType.Sms,
-        })
-      );
-    });
-
-    test('should throw when there is no enabled social connector and social sign-in method is enabled', () => {
-      expect(() => {
-        validateSignInMethods(
-          { ...mockSignInMethods, social: SignInMethodState.Secondary },
-          [],
-          [mockAliyunDmConnector]
-        );
-      }).toMatchError(
-        new RequestError({
-          code: 'sign_in_experiences.enabled_connector_not_found',
-          type: ConnectorType.Social,
-        })
-      );
-    });
-  });
-
-  test('should throw when the social connector targets are empty and social sign-in method is enabled', () => {
-    expect(() => {
-      validateSignInMethods(
-        { ...mockSignInMethods, social: SignInMethodState.Secondary },
-        [],
-        enabledConnectors
-      );
-    }).toMatchError(new RequestError('sign_in_experiences.empty_social_connectors'));
+describe('remove unavailable social connector targets', () => {
+  test('should remove unavailable social connector targets in sign-in experience', async () => {
+    const mockSocialConnectorTargets = mockSocialConnectors.map(
+      ({ metadata: { target } }) => target
+    );
+    findDefaultSignInExperience.mockResolvedValueOnce({
+      ...mockSignInExperience,
+      socialSignInConnectorTargets: mockSocialConnectorTargets,
+    });
+    getLogtoConnectorsPlaceHolder.mockResolvedValueOnce(mockSocialConnectors);
+    expect(mockSocialConnectorTargets).toEqual([
+      disabledSocialTarget01,
+      enabledSocialTarget01,
+      disabledSocialTarget02,
+    ]);
+    await removeUnavailableSocialConnectorTargets();
+    expect(updateDefaultSignInExperience).toBeCalledWith({
+      socialSignInConnectorTargets: [enabledSocialTarget01],
+    });
  });
 });
--- a/packages/core/src/lib/sign-in-experience/index.ts
+++ b/packages/core/src/lib/sign-in-experience/index.ts
@ -0,0 +1,58 @@
+import { builtInLanguages } from '@logto/phrases-ui';
+import type { Branding, LanguageInfo, TermsOfUse } from '@logto/schemas';
+import { ConnectorType, BrandingStyle } from '@logto/schemas';
+
+import { getLogtoConnectors } from '@/connectors';
+import RequestError from '@/errors/RequestError';
+import { findAllCustomLanguageTags } from '@/queries/custom-phrase';
+import {
+  findDefaultSignInExperience,
+  updateDefaultSignInExperience,
+} from '@/queries/sign-in-experience';
+import assertThat from '@/utils/assert-that';
+
+export * from './sign-up';
+export * from './sign-in';
+
+export const validateBranding = (branding: Branding) => {
+  if (branding.style === BrandingStyle.Logo_Slogan) {
+    assertThat(branding.slogan?.trim(), 'sign_in_experiences.empty_slogan');
+  }
+
+  assertThat(branding.logoUrl.trim(), 'sign_in_experiences.empty_logo');
+};
+
+export const validateLanguageInfo = async (languageInfo: LanguageInfo) => {
+  const supportedLanguages = [...builtInLanguages, ...(await findAllCustomLanguageTags())];
+
+  assertThat(
+    supportedLanguages.includes(languageInfo.fallbackLanguage),
+    new RequestError({
+      code: 'sign_in_experiences.unsupported_default_language',
+      language: languageInfo.fallbackLanguage,
+    })
+  );
+};
+
+export const validateTermsOfUse = (termsOfUse: TermsOfUse) => {
+  assertThat(
+    !termsOfUse.enabled || termsOfUse.contentUrl,
+    'sign_in_experiences.empty_content_url_of_terms_of_use'
+  );
+};
+
+export const removeUnavailableSocialConnectorTargets = async () => {
+  const connectors = await getLogtoConnectors();
+  const availableSocialConnectorTargets = new Set(
+    connectors
+      .filter(({ type, dbEntry: { enabled } }) => enabled && type === ConnectorType.Social)
+      .map(({ metadata: { target } }) => target)
+  );
+
+  const { socialSignInConnectorTargets } = await findDefaultSignInExperience();
+  await updateDefaultSignInExperience({
+    socialSignInConnectorTargets: socialSignInConnectorTargets.filter((target) =>
+      availableSocialConnectorTargets.has(target)
+    ),
+  });
+};
--- a/packages/core/src/lib/sign-in-experience/sign-in.test.ts
+++ b/packages/core/src/lib/sign-in-experience/sign-in.test.ts
@ -0,0 +1,264 @@
+import { ConnectorType, SignInIdentifier, SignUpIdentifier } from '@logto/schemas';
+
+import {
+  mockAliyunDmConnector,
+  mockAliyunSmsConnector,
+  mockSignInMethod,
+  mockSignUp,
+} from '@/__mocks__';
+import RequestError from '@/errors/RequestError';
+
+import { validateSignIn } from './sign-in';
+
+const enabledConnectors = [mockAliyunDmConnector, mockAliyunSmsConnector];
+
+describe('validate sign-in', () => {
+  describe('pass on valid cases', () => {
+    test('email or phone sign up', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Email,
+                verificationCode: true,
+              },
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Sms,
+                verificationCode: true,
+              },
+            ],
+          },
+          {
+            ...mockSignUp,
+            identifier: SignUpIdentifier.EmailOrSms,
+            password: false,
+            verify: true,
+          },
+          enabledConnectors
+        );
+      }).not.toThrow();
+    });
+
+    test('username sign up', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Username,
+                password: true,
+              },
+            ],
+          },
+          {
+            ...mockSignUp,
+            identifier: SignUpIdentifier.Username,
+            password: true,
+          },
+          []
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('There must be at least one enabled connector for the specific identifier.', () => {
+    it('throws when there is no enabled email connector and identifiers includes email', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Email,
+              },
+            ],
+          },
+          mockSignUp,
+          []
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.enabled_connector_not_found',
+          type: ConnectorType.Email,
+        })
+      );
+    });
+
+    it('throws when there is no enabled sms connector and identifiers includes phone', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Sms,
+              },
+            ],
+          },
+          mockSignUp,
+          []
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.enabled_connector_not_found',
+          type: ConnectorType.Sms,
+        })
+      );
+    });
+  });
+
+  describe('The sign up identifier must be included in sign in', () => {
+    it('throws when sign up is username and sign in methods does not include username', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Sms,
+              },
+            ],
+          },
+          {
+            ...mockSignUp,
+            identifier: SignUpIdentifier.Username,
+          },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+    });
+
+    it('throws when sign up is email and sign in methods does not include email', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Username,
+              },
+            ],
+          },
+          {
+            ...mockSignUp,
+            identifier: SignUpIdentifier.Email,
+          },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+    });
+
+    it('throws when sign up is phone and sign in methods does not include phone', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Username,
+              },
+            ],
+          },
+          {
+            ...mockSignUp,
+            identifier: SignUpIdentifier.Sms,
+          },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+    });
+
+    it('throws when sign up is `email or phone` and sign in methods does not include email and phone', () => {
+      expect(() => {
+        validateSignIn(
+          {
+            methods: [
+              {
+                ...mockSignInMethod,
+                identifier: SignInIdentifier.Email,
+              },
+            ],
+          },
+          {
+            ...mockSignUp,
+            identifier: SignUpIdentifier.EmailOrSms,
+          },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+    });
+  });
+
+  it('throws when sign up requires set a password and sign in password is not enabled', () => {
+    expect(() => {
+      validateSignIn(
+        {
+          methods: [
+            {
+              ...mockSignInMethod,
+              identifier: SignInIdentifier.Email,
+              password: false,
+            },
+          ],
+        },
+        {
+          ...mockSignUp,
+          identifier: SignUpIdentifier.Email,
+          password: true,
+        },
+        enabledConnectors
+      );
+    }).toMatchError(
+      new RequestError({
+        code: 'sign_in_experiences.password_sign_in_must_be_enabled',
+      })
+    );
+  });
+
+  it('throws when sign up only requires verify and sign in verification code is not enabled', () => {
+    expect(() => {
+      validateSignIn(
+        {
+          methods: [
+            {
+              ...mockSignInMethod,
+              identifier: SignInIdentifier.Email,
+              verificationCode: false,
+            },
+          ],
+        },
+        {
+          ...mockSignUp,
+          identifier: SignUpIdentifier.Email,
+          password: false,
+          verify: true,
+        },
+        enabledConnectors
+      );
+    }).toMatchError(
+      new RequestError({
+        code: 'sign_in_experiences.code_sign_in_must_be_enabled',
+      })
+    );
+  });
+});
--- a/packages/core/src/lib/sign-in-experience/sign-in.ts
+++ b/packages/core/src/lib/sign-in-experience/sign-in.ts
@ -0,0 +1,107 @@
+import type { SignIn, SignUp } from '@logto/schemas';
+import { ConnectorType, SignInIdentifier, SignUpIdentifier } from '@logto/schemas';
+
+import type { LogtoConnector } from '@/connectors/types';
+import RequestError from '@/errors/RequestError';
+import assertThat from '@/utils/assert-that';
+
+/* eslint-disable complexity */
+export const validateSignIn = (
+  signIn: SignIn,
+  signUp: SignUp,
+  enabledConnectors: LogtoConnector[]
+) => {
+  if (signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Email)) {
+    assertThat(
+      enabledConnectors.some((item) => item.type === ConnectorType.Email),
+      new RequestError({
+        code: 'sign_in_experiences.enabled_connector_not_found',
+        type: ConnectorType.Email,
+      })
+    );
+  }
+
+  if (signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Sms)) {
+    assertThat(
+      enabledConnectors.some((item) => item.type === ConnectorType.Sms),
+      new RequestError({
+        code: 'sign_in_experiences.enabled_connector_not_found',
+        type: ConnectorType.Sms,
+      })
+    );
+  }
+
+  switch (signUp.identifier) {
+    case SignUpIdentifier.Username: {
+      assertThat(
+        signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Username),
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+
+      break;
+    }
+
+    case SignUpIdentifier.Email: {
+      assertThat(
+        signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Email),
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+
+      break;
+    }
+
+    case SignUpIdentifier.Sms: {
+      assertThat(
+        signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Sms),
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+
+      break;
+    }
+
+    case SignUpIdentifier.EmailOrSms: {
+      assertThat(
+        signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Email) &&
+          signIn.methods.some(({ identifier }) => identifier === SignInIdentifier.Sms),
+        new RequestError({
+          code: 'sign_in_experiences.miss_sign_up_identifier_in_sign_in',
+        })
+      );
+
+      break;
+    }
+
+    case SignUpIdentifier.None: {
+      // No requirement
+    }
+    // No default
+  }
+
+  if (signUp.password) {
+    assertThat(
+      signIn.methods.every(({ password }) => password),
+      new RequestError({
+        code: 'sign_in_experiences.password_sign_in_must_be_enabled',
+      })
+    );
+  }
+
+  if (signUp.verify && !signUp.password) {
+    assertThat(
+      signIn.methods.every(
+        ({ verificationCode, identifier }) =>
+          verificationCode || identifier === SignInIdentifier.Username
+      ),
+      new RequestError({
+        code: 'sign_in_experiences.code_sign_in_must_be_enabled',
+      })
+    );
+  }
+};
+/* eslint-enable complexity */
--- a/packages/core/src/lib/sign-in-experience/sign-up.test.ts
+++ b/packages/core/src/lib/sign-in-experience/sign-up.test.ts
@ -0,0 +1,112 @@
+import { ConnectorType, SignUpIdentifier } from '@logto/schemas';
+
+import { mockAliyunDmConnector, mockAliyunSmsConnector, mockSignUp } from '@/__mocks__';
+import RequestError from '@/errors/RequestError';
+
+import { validateSignUp } from './sign-up';
+
+const enabledConnectors = [mockAliyunDmConnector, mockAliyunSmsConnector];
+
+describe('validate sign-up', () => {
+  describe('There must be at least one enabled connector for the specific identifier.', () => {
+    test('should throw when there is no enabled email connector and identifier is email', async () => {
+      expect(() => {
+        validateSignUp({ ...mockSignUp, identifier: SignUpIdentifier.Email }, []);
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.enabled_connector_not_found',
+          type: ConnectorType.Email,
+        })
+      );
+    });
+
+    test('should throw when there is no enabled email connector and identifier is email or phone', async () => {
+      expect(() => {
+        validateSignUp({ ...mockSignUp, identifier: SignUpIdentifier.EmailOrSms }, []);
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.enabled_connector_not_found',
+          type: ConnectorType.Email,
+        })
+      );
+    });
+
+    test('should throw when there is no enabled sms connector and identifier is phone', async () => {
+      expect(() => {
+        validateSignUp({ ...mockSignUp, identifier: SignUpIdentifier.Sms }, []);
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.enabled_connector_not_found',
+          type: ConnectorType.Sms,
+        })
+      );
+    });
+
+    test('should throw when there is no enabled email connector and identifier is email or phone', async () => {
+      expect(() => {
+        validateSignUp({ ...mockSignUp, identifier: SignUpIdentifier.EmailOrSms }, [
+          mockAliyunDmConnector,
+        ]);
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.enabled_connector_not_found',
+          type: ConnectorType.Sms,
+        })
+      );
+    });
+  });
+
+  test('should throw when identifier is username and password is false', async () => {
+    expect(() => {
+      validateSignUp(
+        { ...mockSignUp, identifier: SignUpIdentifier.Username, password: false },
+        enabledConnectors
+      );
+    }).toMatchError(
+      new RequestError({
+        code: 'sign_in_experiences.username_requires_password',
+      })
+    );
+  });
+
+  describe('verify should be true for passwordless identifier', () => {
+    test('should throw when identifier is email', async () => {
+      expect(() => {
+        validateSignUp(
+          { ...mockSignUp, identifier: SignUpIdentifier.Email, verify: false },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.passwordless_requires_verify',
+        })
+      );
+    });
+
+    test('should throw when identifier is phone', async () => {
+      expect(() => {
+        validateSignUp(
+          { ...mockSignUp, identifier: SignUpIdentifier.Email, verify: false },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.passwordless_requires_verify',
+        })
+      );
+    });
+
+    test('should throw when identifier is email or phone', async () => {
+      expect(() => {
+        validateSignUp(
+          { ...mockSignUp, identifier: SignUpIdentifier.EmailOrSms, verify: false },
+          enabledConnectors
+        );
+      }).toMatchError(
+        new RequestError({
+          code: 'sign_in_experiences.passwordless_requires_verify',
+        })
+      );
+    });
+  });
+});
--- a/packages/core/src/lib/sign-in-experience/sign-up.ts
+++ b/packages/core/src/lib/sign-in-experience/sign-up.ts
@ -0,0 +1,56 @@
+import type { SignUp } from '@logto/schemas';
+import { ConnectorType, SignUpIdentifier } from '@logto/schemas';
+
+import type { LogtoConnector } from '@/connectors/types';
+import RequestError from '@/errors/RequestError';
+import assertThat from '@/utils/assert-that';
+
+export const validateSignUp = (signUp: SignUp, enabledConnectors: LogtoConnector[]) => {
+  if (
+    signUp.identifier === SignUpIdentifier.Email ||
+    signUp.identifier === SignUpIdentifier.EmailOrSms
+  ) {
+    assertThat(
+      enabledConnectors.some((item) => item.type === ConnectorType.Email),
+      new RequestError({
+        code: 'sign_in_experiences.enabled_connector_not_found',
+        type: ConnectorType.Email,
+      })
+    );
+  }
+
+  if (
+    signUp.identifier === SignUpIdentifier.Sms ||
+    signUp.identifier === SignUpIdentifier.EmailOrSms
+  ) {
+    assertThat(
+      enabledConnectors.some((item) => item.type === ConnectorType.Sms),
+      new RequestError({
+        code: 'sign_in_experiences.enabled_connector_not_found',
+        type: ConnectorType.Sms,
+      })
+    );
+  }
+
+  if (signUp.identifier === SignUpIdentifier.Username) {
+    assertThat(
+      signUp.password,
+      new RequestError({
+        code: 'sign_in_experiences.username_requires_password',
+      })
+    );
+  }
+
+  if (
+    [SignUpIdentifier.Sms, SignUpIdentifier.Email, SignUpIdentifier.EmailOrSms].includes(
+      signUp.identifier
+    )
+  ) {
+    assertThat(
+      signUp.verify,
+      new RequestError({
+        code: 'sign_in_experiences.passwordless_requires_verify',
+      })
+    );
+  }
+};
--- a/packages/core/src/lib/user.ts
+++ b/packages/core/src/lib/user.ts
@ -1,13 +1,14 @@
 import type { User, CreateUser } from '@logto/schemas';
 import { Users, UsersPasswordEncryptionMethod } from '@logto/schemas';
 import { buildIdGenerator } from '@logto/shared';
+import type { Nullable } from '@silverhand/essentials';
 import { argon2Verify } from 'hash-wasm';
 import pRetry from 'p-retry';

 import { buildInsertInto } from '@/database/insert-into';
 import envSet from '@/env-set';
 import { findRolesByRoleNames, insertRoles } from '@/queries/roles';
-import { findUserByUsername, hasUserWithId } from '@/queries/user';
+import { hasUserWithId } from '@/queries/user';
 import assertThat from '@/utils/assert-that';
 import { encryptPassword } from '@/utils/password';

@ -43,11 +44,7 @@ export const encryptUserPassword = async (
  return { passwordEncrypted, passwordEncryptionMethod };
 };

-export const findUserByUsernameAndPassword = async (
-  username: string,
-  password: string
-): Promise<User> => {
-  const user = await findUserByUsername(username);
+export const verifyUserPassword = async (user: Nullable<User>, password: string): Promise<User> => {
  assertThat(user, 'session.invalid_credentials');
  const { passwordEncrypted, passwordEncryptionMethod } = user;

--- a/packages/core/src/middleware/koa-guard.ts
+++ b/packages/core/src/middleware/koa-guard.ts
@ -3,7 +3,7 @@ import { has } from '@silverhand/essentials';
 import type { MiddlewareType } from 'koa';
 import koaBody from 'koa-body';
 import type { IMiddleware, IRouterParamContext } from 'koa-router';
-import type { ZodType } from 'zod';
+import type { ZodType, ZodTypeDef } from 'zod';

 import envSet from '@/env-set';
 import RequestError from '@/errors/RequestError';
@ -48,7 +48,7 @@ export const isGuardMiddleware = <Type extends IMiddleware>(
 ): function_ is WithGuardConfig<Type> =>
  function_.name === 'guardMiddleware' && has(function_, 'config');

-const tryParse = <Output, Definition, Input>(
+const tryParse = <Output, Definition extends ZodTypeDef, Input>(
  type: 'query' | 'body' | 'params',
  guard: Optional<ZodType<Output, Definition, Input>>,
  data: unknown
--- a/packages/core/src/oidc/adapter.test.ts
+++ b/packages/core/src/oidc/adapter.test.ts
@ -27,18 +27,12 @@ jest.mock('@/queries/oidc-model-instance', () => ({
  revokeInstanceByGrantId: jest.fn(),
 }));

-jest.mock('@logto/shared', () => ({
-  // eslint-disable-next-line unicorn/consistent-function-scoping
-  buildIdGenerator: jest.fn(() => () => 'randomId'),
-}));
-
 const now = Date.now();

 jest.mock(
-  'dayjs',
-  // eslint-disable-next-line unicorn/consistent-function-scoping
-  jest.fn(() => () => ({
-    add: jest.fn((delta: number) => new Date(now + delta * 1000)),
+  'date-fns',
+  jest.fn(() => ({
+    addSeconds: jest.fn((_: Date, seconds: number) => new Date(now + seconds * 1000)),
  }))
 );

--- a/packages/core/src/oidc/adapter.ts
+++ b/packages/core/src/oidc/adapter.ts
@ -1,8 +1,10 @@
 import type { CreateApplication, OidcClientMetadata } from '@logto/schemas';
 import { ApplicationType } from '@logto/schemas';
 import { adminConsoleApplicationId, demoAppApplicationId } from '@logto/schemas/lib/seeds';
-import dayjs from 'dayjs';
+import { tryThat } from '@logto/shared';
+import { addSeconds } from 'date-fns';
 import type { AdapterFactory, AllClientMetadata } from 'oidc-provider';
+import { errors } from 'oidc-provider';
 import snakecaseKeys from 'snakecase-keys';

 import envSet, { MountedApps } from '@/env-set';
@ -83,7 +85,9 @@ export default function postgresAdapter(modelName: string): ReturnType<AdapterFa
          return buildAdminConsoleClientMetadata();
        }

-        return transpileClient(await findApplicationById(id));
+        return transpileClient(
+          await tryThat(findApplicationById(id), new errors.InvalidClient(`invalid client ${id}`))
+        );
      },
      findByUserCode: reject,
      findByUid: reject,
@ -99,7 +103,7 @@ export default function postgresAdapter(modelName: string): ReturnType<AdapterFa
        modelName,
        id,
        payload,
-        expiresAt: dayjs().add(expiresIn, 'second').valueOf(),
+        expiresAt: addSeconds(Date.now(), expiresIn).valueOf(),
      }),
    find: async (id) => findPayloadById(modelName, id),
    findByUserCode: async (userCode) => findPayloadByPayloadField(modelName, 'userCode', userCode),
--- a/packages/core/src/oidc/init.ts
+++ b/packages/core/src/oidc/init.ts
@ -4,6 +4,7 @@ import { readFileSync } from 'fs';

 import { userClaims } from '@logto/core-kit';
 import { CustomClientMetadataKey } from '@logto/schemas';
+import { tryThat } from '@logto/shared';
 import type Koa from 'koa';
 import mount from 'koa-mount';
 import { Provider, errors } from 'oidc-provider';
@ -162,7 +163,10 @@ export default async function initOidc(app: Koa): Promise<Provider> {
    extraTokenClaims: async (_ctx, token) => {
      if (token.kind === 'AccessToken') {
        const { accountId } = token;
-        const { roleNames } = await findUserById(accountId);
+        const { roleNames } = await tryThat(
+          findUserById(accountId),
+          new errors.InvalidClient(`invalid user ${accountId}`)
+        );

        return snakecaseKeys({
          roleNames,
@ -172,7 +176,11 @@ export default async function initOidc(app: Koa): Promise<Provider> {
      // `token.kind === 'ClientCredentials'`
      const { clientId } = token;
      assertThat(clientId, 'oidc.invalid_grant');
-      const { roleNames } = await findApplicationById(clientId);
+
+      const { roleNames } = await tryThat(
+        findApplicationById(clientId),
+        new errors.InvalidClient(`invalid client ${clientId}`)
+      );

      return snakecaseKeys({ roleNames });
    },
--- a/packages/core/src/queries/oidc-model-instance.ts
+++ b/packages/core/src/queries/oidc-model-instance.ts
@ -7,7 +7,7 @@ import { OidcModelInstances } from '@logto/schemas';
 import { convertToIdentifiers, convertToTimestamp } from '@logto/shared';
 import type { Nullable } from '@silverhand/essentials';
 import { conditional } from '@silverhand/essentials';
-import dayjs from 'dayjs';
+import { addSeconds, isBefore } from 'date-fns';
 import type { ValueExpression } from 'slonik';
 import { sql } from 'slonik';

@ -30,7 +30,7 @@ const isConsumed = (modelName: string, consumedAt: Nullable<number>): boolean =>
    return Boolean(consumedAt);
  }

-  return dayjs(consumedAt).add(refreshTokenReuseInterval, 'seconds').isBefore(dayjs());
+  return isBefore(addSeconds(consumedAt, refreshTokenReuseInterval), Date.now());
 };

 const withConsumed = <T>(
--- a/packages/core/src/queries/sign-in-experience.test.ts
+++ b/packages/core/src/queries/sign-in-experience.test.ts
@ -26,14 +26,15 @@ describe('sign-in-experience query', () => {
    branding: JSON.stringify(mockSignInExperience.branding),
    termsOfUse: JSON.stringify(mockSignInExperience.termsOfUse),
    languageInfo: JSON.stringify(mockSignInExperience.languageInfo),
-    signInMethods: JSON.stringify(mockSignInExperience.socialSignInConnectorTargets),
+    signIn: JSON.stringify(mockSignInExperience.signIn),
+    signUp: JSON.stringify(mockSignInExperience.signUp),
    socialSignInConnectorTargets: JSON.stringify(mockSignInExperience.socialSignInConnectorTargets),
  };

  it('findDefaultSignInExperience', async () => {
    /* eslint-disable sql/no-unsafe-query */
    const expectSql = `
-      select "id", "color", "branding", "language_info", "terms_of_use", "sign_in_methods", "social_sign_in_connector_targets", "sign_in_mode"
+      select "id", "color", "branding", "language_info", "terms_of_use", "sign_in", "sign_up", "social_sign_in_connector_targets", "sign_in_mode"
      from "sign_in_experiences"
      where "id"=$1
    `;
--- a/Show more
+++ b/Show more