feat(demo-app): implementation (#982)

* feat(demo-app): init card * feat(demo-app): ui * feat(demo-app): sign in using React SDK * fix: typo
2025-03-10 22:22:45 -05:00 · 2022-05-31 12:39:03 +08:00 · 2022-05-31 12:39:03 +08:00 · 7f4f4f84ad
commit 7f4f4f84ad
parent d6411b46cc
21 changed files with 338 additions and 45 deletions
--- a/package.json
+++ b/package.json
@ -8,7 +8,7 @@
    "bootstrap": "lerna bootstrap",
    "prepare": "if test \"$NODE_ENV\" != \"production\" && test \"$CI\" != \"true\" ; then husky install ; fi",
    "prepack": "lerna run --stream prepack",
-    "dev": "lerna run --stream prepack && lerna --scope=@logto/{core,ui,console} exec -- pnpm dev",
+    "dev": "lerna run --stream prepack && lerna --scope=@logto/{core,ui,console,demo-app} exec -- pnpm dev",
    "start": "cd packages/core && NODE_ENV=production node . --from-root",
    "ci:build": "lerna run --stream build",
    "ci:lint": "lerna run --parallel lint",
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@ -1,5 +1,6 @@
 import { LogtoProvider } from '@logto/react';
 import { adminConsoleApplicationId, managementApiResource } from '@logto/schemas';
+import { getBasename } from '@logto/shared';
 import React from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { SWRConfig } from 'swr';
@ -25,7 +26,6 @@ import Settings from './pages/Settings';
 import SignInExperience from './pages/SignInExperience';
 import UserDetails from './pages/UserDetails';
 import Users from './pages/Users';
-import { getBasename } from './utilities/app';

 void initI18n();

@ -75,7 +75,7 @@ const Main = () => {
 };

 const App = () => (
-  <BrowserRouter basename={getBasename()}>
+  <BrowserRouter basename={getBasename('console', '5002')}>
    <LogtoProvider
      config={{
        endpoint: window.location.origin,
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@ -1,5 +1,5 @@
@use '@/scss/underscore' as _;
-@use '@/scss/colors' as colors;
+@use '@logto/shared/scss/console-themes' as themes;

 .app {
  position: absolute;
@ -28,21 +28,21 @@
 }

 .light {
-  @include colors.light-theme;
+  @include themes.light;
 }

 .dark {
-  @include colors.dark-theme;
+  @include themes.dark;
 }

@media (prefers-color-scheme: light) {
  body {
-    @include colors.light-theme;
+    @include themes.light;
  }
 }

@media (prefers-color-scheme: dark) {
  body {
-    @include colors.dark-theme;
+    @include themes.dark;
  }
 }
--- a/packages/console/src/pages/Callback/index.tsx
+++ b/packages/console/src/pages/Callback/index.tsx
@ -1,12 +1,13 @@
 import { LogtoError, OidcError, useHandleSignInCallback } from '@logto/react';
 import React from 'react';
+import { useHref } from 'react-router-dom';

 import AppError from '@/components/AppError';
 import LogtoLoading from '@/components/LogtoLoading';
-import { getBasename } from '@/utilities/app';

 const Callback = () => {
-  const { error } = useHandleSignInCallback(getBasename());
+  const basename = useHref('/');
+  const { error } = useHandleSignInCallback(basename.slice(0, -1));

  if (error) {
    const errorCode =
--- a/packages/console/src/utilities/app.ts
+++ b/packages/console/src/utilities/app.ts
@ -1,5 +0,0 @@
-export const getBasename = (): string => {
-  const isBasenameNeeded = process.env.NODE_ENV !== 'development' || process.env.PORT === '5002';
-
-  return isBasenameNeeded ? '/console' : '';
-};
--- a/packages/core/src/app/init.ts
+++ b/packages/core/src/app/init.ts
@ -38,6 +38,9 @@ export default async function initApp(app: Koa): Promise<void> {
  app.use(
    mount('/' + MountedApps.Console, koaSpaProxy(MountedApps.Console, 5002, MountedApps.Console))
  );
+  app.use(
+    mount('/' + MountedApps.DemoApp, koaSpaProxy(MountedApps.DemoApp, 5003, MountedApps.DemoApp))
+  );

  app.use(koaProxyGuard(provider));
  app.use(koaSpaProxy());
--- a/packages/core/src/env-set/index.ts
+++ b/packages/core/src/env-set/index.ts
@ -8,6 +8,7 @@ export enum MountedApps {
  Api = 'api',
  Oidc = 'oidc',
  Console = 'console',
+  DemoApp = 'demo-app',
 }

 const loadEnvValues = async () => {
--- a/packages/demo-app/package.json
+++ b/packages/demo-app/package.json
@ -9,7 +9,7 @@
    "test": "echo \"Error: no test specified\" && exit 1",
    "precommit": "lint-staged",
    "start": "parcel src/index.html",
-    "dev": "PORT=5003 parcel src/index.html --public-url /console --no-cache --hmr-port 6003",
+    "dev": "PORT=5003 parcel src/index.html --public-url /demo-app --no-cache --hmr-port 6003",
    "check": "tsc --noEmit",
    "build": "pnpm check && rm -rf dist && parcel build src/index.html --no-autoinstall --no-cache --public-url /demo-app",
    "lint": "eslint --ext .ts --ext .tsx src",
@ -17,6 +17,8 @@
    "stylelint": "stylelint \"src/**/*.scss\""
  },
  "devDependencies": {
+    "@logto/react": "^0.1.11",
+    "@logto/schemas": "^0.1.0",
    "@logto/shared": "^0.1.0",
    "@parcel/core": "2.5.0",
    "@parcel/transformer-sass": "2.5.0",
--- a/packages/demo-app/src/App.module.scss
+++ b/packages/demo-app/src/App.module.scss
@ -0,0 +1,109 @@
+@use '@/scss/underscore' as _;
+@use '@logto/shared/scss/console-themes' as themes;
+
+body {
+  background: #edebf6;
+}
+
+.app {
+  @include themes.light;
+
+  .card {
+    background: var(--color-background);
+    border-radius: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 640px;
+    height: 640px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 14px;
+    line-height: 20px;
+
+    .title {
+      margin-top: _.unit(6);
+      color: var(--color-neutral-10);
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .text {
+      margin-top: _.unit(1);
+      color: var(--color-caption);
+    }
+
+    .infoCard {
+      margin-top: _.unit(4);
+      padding: _.unit(1.5) _.unit(4);
+      color: var(--color-text);
+      background: var(--color-layer-2);
+      border-radius: 8px;
+      width: 400px;
+
+
+      p {
+        margin: _.unit(2.5) 0;
+      }
+    }
+
+    .button {
+      user-select: none;
+      margin-top: _.unit(8);
+      border: 1px solid var(--color-outline);
+      border-radius: 8px;
+      padding: _.unit(3) _.unit(6);
+      font-weight: 500;
+      color: var(--color-text);
+      transition: background ease-in-out 0.2s;
+
+      &:hover {
+        cursor: pointer;
+        background: var(--color-hover);
+      }
+    }
+
+    .continue {
+      margin-top: _.unit(12);
+      display: flex;
+      align-items: center;
+      column-gap: _.unit(4);
+      color: var(--color-caption);
+
+      .hr {
+        width: 110px;
+        border-top: 1px solid var(--color-divider);
+      }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      margin-top: _.unit(5);
+
+      span {
+        opacity: 60%;
+        height: 12px;
+        width: 1px;
+        background: var(--color-primary);
+        margin: 0 _.unit(4);
+        border-radius: 1px;
+      }
+
+      a {
+        color: var(--color-primary);
+        text-decoration: none;
+        padding: _.unit(0.5) _.unit(1);
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
--- a/packages/demo-app/src/App.tsx
+++ b/packages/demo-app/src/App.tsx
@ -1,9 +1,78 @@
-import React from 'react';
+import { LogtoProvider, useLogto } from '@logto/react';
+import { demoAppApplicationId } from '@logto/schemas';
+import React, { useEffect } from 'react';

 import '@/scss/normalized.scss';
+import * as styles from './App.module.scss';
+import Callback from './Callback';
+import congrats from './assets/congrats.svg';
+
+const Main = () => {
+  const { isAuthenticated, signIn } = useLogto();
+  const isInCallback = Boolean(new URL(window.location.href).searchParams.get('code'));
+
+  // Pending SDK fix
+  const username = 'foo';
+  const userId = 'bar';
+
+  useEffect(() => {
+    if (!isAuthenticated && !isInCallback) {
+      void signIn(window.location.href);
+    }
+  }, [isAuthenticated, isInCallback, signIn]);
+
+  if (isInCallback) {
+    return <Callback />;
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className={styles.app}>
+      <div className={styles.card}>
+        <img src={congrats} alt="Congrats" />
+        <div className={styles.title}>You&apos;ve successfully signed in the demo app!</div>
+        <div className={styles.text}>Here is your personal information:</div>
+        <div className={styles.infoCard}>
+          <p>
+            Username: <b>{username}</b>
+          </p>
+          <p>
+            User ID: <b>{userId}</b>
+          </p>
+        </div>
+        {/* Pending SDK fix */}
+        <div className={styles.button}>Sign out the demo app</div>
+        <div className={styles.continue}>
+          <div className={styles.hr} />
+          or continue to explore
+          <div className={styles.hr} />
+        </div>
+        <div className={styles.actions}>
+          <a href="#">Customize sign-in experience</a>
+          <span />
+          <a href="#">Enable passwordless</a>
+          <span />
+          <a href="#">Add a social connector</a>
+        </div>
+      </div>
+    </div>
+  );
+};

 const App = () => {
-  return <div>App</div>;
+  return (
+    <LogtoProvider
+      config={{
+        endpoint: window.location.origin,
+        appId: demoAppApplicationId,
+      }}
+    >
+      <Main />
+    </LogtoProvider>
+  );
 };

 export default App;
--- a/packages/demo-app/src/Callback.tsx
+++ b/packages/demo-app/src/Callback.tsx
@ -0,0 +1,27 @@
+import { useHandleSignInCallback } from '@logto/react';
+import React from 'react';
+
+const Callback = () => {
+  const { error, isAuthenticated } = useHandleSignInCallback('.');
+
+  if (isAuthenticated) {
+    const { href } = window.location;
+    window.location.assign(href.slice(0, href.indexOf('?')));
+
+    return null;
+  }
+
+  if (error) {
+    return (
+      <div>
+        Error Occurred:
+        <br />
+        {error.message}
+      </div>
+    );
+  }
+
+  return <div>Loading...</div>;
+};
+
+export default Callback;
--- a/packages/demo-app/src/assets/congrats.svg
+++ b/packages/demo-app/src/assets/congrats.svg
@ -0,0 +1,33 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60 97.5C80.7107 97.5 97.5 80.7107 97.5 60C97.5 39.2893 80.7107 22.5 60 22.5C39.2893 22.5 22.5 39.2893 22.5 60C22.5 80.7107 39.2893 97.5 60 97.5ZM60 78.75C70.3553 78.75 78.75 70.3553 78.75 60C78.75 49.6447 70.3553 41.25 60 41.25C49.6447 41.25 41.25 49.6447 41.25 60C41.25 70.3553 49.6447 78.75 60 78.75Z" fill="#EFF1F1"/>
+<path d="M33.4297 38.541L35.1777 36.5471C36.1431 35.4459 36.033 33.7705 34.9317 32.8052V32.8052C33.8305 31.8398 33.7204 30.1644 34.6858 29.0632V29.0632C35.6512 27.962 35.5411 26.2867 34.4398 25.3213V25.3213C33.3386 24.3559 33.2285 22.6806 34.1939 21.5794L35.9419 19.5854" stroke="#83DA85" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="41.7188" y="20.6992" width="7.5" height="7.5" transform="rotate(-30.6488 41.7188 20.6992)" fill="#FAABFF"/>
+<rect x="101.754" y="34.0195" width="3.75" height="3.75" transform="rotate(35.5802 101.754 34.0195)" fill="#FAABFF"/>
+<rect x="66.5625" y="60" width="11.25" height="11.25" fill="#FAABFF"/>
+<path d="M56.526 27.1883C56.4989 27.1373 56.5372 27.0761 56.5949 27.0782L64.99 27.3771C65.0477 27.3792 65.0816 27.4429 65.051 27.4918L60.5945 34.6128C60.5639 34.6617 60.4918 34.6591 60.4647 34.6081L56.526 27.1883Z" fill="#68BE6C"/>
+<path d="M80.755 57.7178C80.7329 57.6461 80.7968 57.5774 80.8699 57.5942L91.5062 60.0339C91.5793 60.0507 91.6068 60.1403 91.5557 60.1952L84.1248 68.1867C84.0737 68.2416 83.9823 68.2206 83.9603 68.1489L80.755 57.7178Z" fill="#68BE6C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.0615 40.469C49.0615 40.3825 49.1315 40.3125 49.218 40.3125H52.0342C52.1206 40.3125 52.1906 40.3825 52.1906 40.469V45.4245L56.4819 42.9469C56.5567 42.9037 56.6524 42.9293 56.6956 43.0042L58.1037 45.4431C58.147 45.5179 58.1213 45.6136 58.0465 45.6568L53.7544 48.1349L58.0472 50.6133C58.122 50.6565 58.1476 50.7522 58.1044 50.8271L56.6963 53.266C56.6531 53.3408 56.5574 53.3665 56.4826 53.3233L52.1906 50.8453V55.8018C52.1906 55.8882 52.1206 55.9583 52.0342 55.9583H49.218C49.1315 55.9583 49.0615 55.8882 49.0615 55.8018V50.8443L44.7678 53.3233C44.693 53.3665 44.5973 53.3408 44.5541 53.266L43.146 50.8271C43.1028 50.7522 43.1284 50.6565 43.2033 50.6133L47.4961 48.1349L43.2039 45.6568C43.1291 45.6136 43.1035 45.5179 43.1467 45.4431L44.5548 43.0042C44.598 42.9293 44.6937 42.9037 44.7685 42.9469L49.0615 45.4255V40.469Z" fill="#7958FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.3436 58.3122C76.3141 58.3122 80.3434 54.2828 80.3434 49.3123C80.3434 44.3419 76.3141 40.3125 71.3436 40.3125C66.3731 40.3125 62.3438 44.3419 62.3438 49.3123C62.3438 54.2828 66.3731 58.3122 71.3436 58.3122ZM71.3444 53.8122C73.8296 53.8122 75.8443 51.7975 75.8443 49.3122C75.8443 46.827 73.8296 44.8123 71.3444 44.8123C68.8592 44.8123 66.8445 46.827 66.8445 49.3122C66.8445 51.7975 68.8592 53.8122 71.3444 53.8122Z" fill="#FFB95A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.75 30C20.8211 30 22.5 28.3211 22.5 26.25C22.5 24.1789 20.8211 22.5 18.75 22.5C16.6789 22.5 15 24.1789 15 26.25C15 28.3211 16.6789 30 18.75 30ZM18.75 28.125C19.7855 28.125 20.625 27.2855 20.625 26.25C20.625 25.2145 19.7855 24.375 18.75 24.375C17.7145 24.375 16.875 25.2145 16.875 26.25C16.875 27.2855 17.7145 28.125 18.75 28.125Z" fill="#FFB95A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M102.187 19.2187C103.223 19.2187 104.062 18.3793 104.062 17.3437C104.062 16.3082 103.223 15.4688 102.187 15.4688C101.152 15.4688 100.312 16.3082 100.312 17.3437C100.312 18.3793 101.152 19.2187 102.187 19.2187ZM102.188 18.2812C102.705 18.2812 103.125 17.8615 103.125 17.3438C103.125 16.826 102.705 16.4062 102.188 16.4062C101.67 16.4062 101.25 16.826 101.25 17.3438C101.25 17.8615 101.67 18.2812 102.188 18.2812Z" fill="#FFDDB5"/>
+<path d="M59.3419 22.5C63.0038 22.5 66.5432 23.0249 69.8888 24.0035C78.414 26.4973 85.6813 31.9373 90.5138 39.1468M88.0393 84.1406C87.2126 85.1224 86.3364 86.0612 85.4145 86.9531C84.5015 87.8365 83.5438 88.6739 82.545 89.4615C80.8591 90.7912 79.0562 91.9792 77.1544 93.0077C74.8654 94.2455 72.4331 95.2522 69.8888 95.9965C66.5432 96.9751 63.0038 97.5 59.3419 97.5C50.5812 97.5 42.5222 94.4959 36.1388 89.4615C29.1826 83.9755 24.2162 76.0786 22.5 67.0312M28.6573 38.4375C27.3141 40.3455 26.1443 42.3844 25.1709 44.5312C24.2223 46.6233 23.4603 48.8179 22.9059 51.0938" stroke="#E6DEFF" stroke-width="0.9375"/>
+<path d="M32.4505 102.365C32.298 103.964 34.0958 105.002 35.4045 104.071L79.221 72.8747C80.3331 72.0829 80.2533 70.406 79.071 69.7234L40.3629 47.3752C39.1806 46.6927 37.6885 47.462 37.5588 48.821L32.4505 102.365Z" fill="url(#paint0_linear_3315_123405)"/>
+<mask id="mask0_3315_123405" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="47" width="49" height="58">
+<path d="M32.4505 102.365C32.298 103.964 34.0958 105.002 35.4045 104.071L79.221 72.8747C80.3331 72.0829 80.2533 70.406 79.071 69.7234L40.3629 47.3752C39.1806 46.6927 37.6885 47.462 37.5588 48.821L32.4505 102.365Z" fill="#AF9EFF"/>
+</mask>
+<g mask="url(#mask0_3315_123405)">
+<rect x="26.8359" y="58.0078" width="60" height="7.5" rx="0.6" fill="#F07EFF"/>
+<rect x="17.4609" y="74.2441" width="60" height="7.5" rx="0.6" fill="#F07EFF"/>
+<rect x="8.08594" y="90.4824" width="60" height="7.5" rx="0.6" fill="#F07EFF"/>
+</g>
+<path d="M77.3711 28.4258L79.39 26.7066C80.505 25.7572 80.6391 24.0836 79.6897 22.9686V22.9686C78.7402 21.8537 78.8744 20.1801 79.9894 19.2306L82.0083 17.5115" stroke="#C4C7C7" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M79.2188 38.6348L81.8485 38.975C83.3008 39.163 84.6306 38.138 84.8185 36.6856V36.6856C85.0064 35.2332 86.3361 34.2082 87.7885 34.3962V34.3962C89.2408 34.5841 90.5706 33.5591 90.7585 32.1067V32.1067C90.9464 30.6544 92.2761 29.6293 93.7285 29.8173L96.3582 30.1575" stroke="#AF9EFF" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M57.2734 15.7617L56.6337 13.1884C56.2804 11.7672 57.1462 10.3287 58.5674 9.97536V9.97536C59.9886 9.62207 60.8543 8.18354 60.501 6.76233L59.8613 4.189" stroke="#E6DEFF" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M89.0781 53.4805L90.9461 51.5984C91.9777 50.559 93.6566 50.5527 94.696 51.5843V51.5843C95.7355 52.616 97.4144 52.6096 98.446 51.5702L100.314 49.6882" stroke="#E6DEFF" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_3315_123405" x1="31.6383" y1="104.766" x2="81.1147" y2="72.7284" gradientUnits="userSpaceOnUse">
+<stop stop-color="#492EF3"/>
+<stop offset="1" stop-color="#CF69FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/packages/demo-app/src/scss/_underscore.scss
+++ b/packages/demo-app/src/scss/_underscore.scss
@ -0,0 +1,3 @@
+@function unit($factor: 1) {
+  @return #{$factor * 4}px;
+}
--- a/packages/schemas/src/types/oidc-config.ts
+++ b/packages/schemas/src/types/oidc-config.ts
@ -26,3 +26,5 @@ export const adminConsoleApplicationId = 'admin_console';
 * Admin Console requires the access token of this resource to be functional.
 */
 export const managementApiResource = 'https://api.logto.io';
+
+export const demoAppApplicationId = 'demo_app';
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@ -5,6 +5,7 @@
  "author": "Silverhand Inc. <contact@silverhand.io>",
  "license": "MPL-2.0",
  "files": [
+    "declaration",
    "lib",
    "scss"
  ],
@ -15,23 +16,31 @@
    "build": "rm -rf lib/ && tsc --p tsconfig.build.json",
    "lint": "eslint --ext .ts src",
    "lint:report": "pnpm lint --format json --output-file report.json",
-    "prepack": "pnpm build"
+    "prepack": "pnpm build",
+    "stylelint": "stylelint \"scss/**/*.scss\""
  },
  "engines": {
    "node": "^16.0.0"
  },
  "devDependencies": {
    "@silverhand/eslint-config": "^0.14.0",
+    "@silverhand/eslint-config-react": "^0.14.0",
    "@silverhand/essentials": "^1.1.6",
    "@silverhand/ts-config": "^0.14.0",
+    "@silverhand/ts-config-react": "^0.14.0",
    "@types/node": "^16.3.1",
    "eslint": "^8.10.0",
    "lint-staged": "^12.0.0",
+    "postcss": "^8.4.6",
    "prettier": "^2.3.2",
+    "stylelint": "^14.8.2",
    "typescript": "^4.6.2"
  },
  "eslintConfig": {
-    "extends": "@silverhand"
+    "extends": "@silverhand/react"
+  },
+  "stylelint": {
+    "extends": "@silverhand/eslint-config-react/.stylelintrc"
  },
  "prettier": "@silverhand/eslint-config/.prettierrc"
 }
--- a/packages/shared/scss/_console-themes.scss
+++ b/packages/shared/scss/_console-themes.scss
@ -1,4 +1,4 @@
-@mixin light-theme {
+@mixin light {
  // tonal palettes
  --color-all-0: #000;
  --color-all-100: #fff;
@ -161,7 +161,7 @@
  --color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
 }

-@mixin dark-theme {
+@mixin dark {
  // tonal palettes
  --color-all-0: #fff;
  --color-all-100: #000;
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@ -1,2 +1,2 @@
-export * from './file-utils';
+export * from './utilities';
 export * from './regex';
--- a/packages/shared/src/utilities/file.ts
+++ b/packages/shared/src/utilities/file.ts
--- a/packages/shared/src/utilities/index.ts
+++ b/packages/shared/src/utilities/index.ts
@ -0,0 +1,2 @@
+export * from './file';
+export * from './react-router';
--- a/packages/shared/src/utilities/react-router.ts
+++ b/packages/shared/src/utilities/react-router.ts
@ -0,0 +1,6 @@
+export const getBasename = (prefix: string, developmentPort: string): string => {
+  const isBasenameNeeded =
+    process.env.NODE_ENV !== 'development' || process.env.PORT === developmentPort;
+
+  return isBasenameNeeded ? '/' + prefix : '';
+};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -900,6 +900,8 @@ importers:

  packages/demo-app:
    specifiers:
+      '@logto/react': ^0.1.11
+      '@logto/schemas': ^0.1.0
      '@logto/shared': ^0.1.0
      '@parcel/core': 2.5.0
      '@parcel/transformer-sass': 2.5.0
@ -919,6 +921,8 @@ importers:
      stylelint: ^14.8.2
      typescript: ^4.7.2
    devDependencies:
+      '@logto/react': 0.1.11_react@17.0.2
+      '@logto/schemas': link:../schemas
      '@logto/shared': link:../shared
      '@parcel/core': 2.5.0
      '@parcel/transformer-sass': 2.5.0_@parcel+core@2.5.0
@ -1063,21 +1067,29 @@ importers:
  packages/shared:
    specifiers:
      '@silverhand/eslint-config': ^0.14.0
+      '@silverhand/eslint-config-react': ^0.14.0
      '@silverhand/essentials': ^1.1.6
      '@silverhand/ts-config': ^0.14.0
+      '@silverhand/ts-config-react': ^0.14.0
      '@types/node': ^16.3.1
      eslint: ^8.10.0
      lint-staged: ^12.0.0
+      postcss: ^8.4.6
      prettier: ^2.3.2
+      stylelint: ^14.8.2
      typescript: ^4.6.2
    devDependencies:
      '@silverhand/eslint-config': 0.14.0_xpq2m6kgodzytx4bqbpsfgmxbe
+      '@silverhand/eslint-config-react': 0.14.0_wfs3lj7jctdcr2gsfi4lvs3yoa
      '@silverhand/essentials': 1.1.7
      '@silverhand/ts-config': 0.14.0_typescript@4.6.3
+      '@silverhand/ts-config-react': 0.14.0_typescript@4.6.3
      '@types/node': 16.11.12
      eslint: 8.10.0
      lint-staged: 12.4.0
+      postcss: 8.4.14
      prettier: 2.5.1
+      stylelint: 14.8.2
      typescript: 4.6.3

  packages/ui:
@ -6686,6 +6698,26 @@ packages:
      - typescript
    dev: true

+  /@silverhand/eslint-config-react/0.14.0_wfs3lj7jctdcr2gsfi4lvs3yoa:
+    resolution: {integrity: sha512-7ylw/SFiYHbcCUNCki9Hv+zdMBIieW6AmNNmqjX3Orn8CvlN/yAUxN/hy9JPpuOCOXquz6mVMDYtmWFGndwy2Q==}
+    peerDependencies:
+      stylelint: ^14.8.2
+    dependencies:
+      '@silverhand/eslint-config': 0.14.0_xpq2m6kgodzytx4bqbpsfgmxbe
+      eslint-config-xo-react: 0.25.0_4sqgcfzewo5ft67t52hgdwo42a
+      eslint-plugin-react: 7.29.3_eslint@8.10.0
+      eslint-plugin-react-hooks: 4.3.0_eslint@8.10.0
+      stylelint: 14.8.2
+      stylelint-config-xo-scss: 0.15.0_cazrl3eatzhkw4y7xb6glndqh4
+    transitivePeerDependencies:
+      - eslint
+      - eslint-import-resolver-webpack
+      - postcss
+      - prettier
+      - supports-color
+      - typescript
+    dev: true
+
  /@silverhand/eslint-config/0.14.0_hjjt7jwmhwqm7bjf55k5ihcdqq:
    resolution: {integrity: sha512-Fiaf3FUSbHzPeYqmMncgw5sQ/48rF7MMTzKhgKQ5RhVy7ja7rmD7XaptRxqIHkxnsVcQK4NkPMGa+tjIASwRzg==}
    engines: {node: '>=14.15.0'}
@ -6922,6 +6954,16 @@ packages:
      typescript: 4.6.2
    dev: true

+  /@silverhand/ts-config-react/0.14.0_typescript@4.6.3:
+    resolution: {integrity: sha512-5LMSGFOagoYGUJ6GyawZYraUfET2hOm8qE6d4J6m/pr2C0JsamuW0lO9eTNQ6lUZSGRotvJwMgMT3gC+Ylgysw==}
+    engines: {node: '>=14.15.0'}
+    peerDependencies:
+      typescript: ^4.3.5
+    dependencies:
+      '@silverhand/ts-config': 0.14.0_typescript@4.6.3
+      typescript: 4.6.3
+    dev: true
+
  /@silverhand/ts-config-react/0.14.0_typescript@4.7.2:
    resolution: {integrity: sha512-5LMSGFOagoYGUJ6GyawZYraUfET2hOm8qE6d4J6m/pr2C0JsamuW0lO9eTNQ6lUZSGRotvJwMgMT3gC+Ylgysw==}
    engines: {node: '>=14.15.0'}
@ -10433,7 +10475,7 @@ packages:
    dev: true

  /decamelize-keys/1.1.0:
-    resolution: {integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=}
+    resolution: {integrity: sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==}
    engines: {node: '>=0.10.0'}
    dependencies:
      decamelize: 1.2.0
@ -10441,7 +10483,7 @@ packages:
    dev: true

  /decamelize/1.2.0:
-    resolution: {integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=}
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
    engines: {node: '>=0.10.0'}
    dev: true

@ -11147,8 +11189,6 @@ packages:
    dependencies:
      debug: 3.2.7
      resolve: 1.22.0
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /eslint-import-resolver-typescript/2.5.0_rnagsyfcubvpoxo2ynj23pim7u:
@ -12376,7 +12416,7 @@ packages:
    dev: true

  /globjoin/0.1.4:
-    resolution: {integrity: sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=}
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
    dev: true

  /goober/2.1.8_csstype@3.0.11:
@ -17484,13 +17524,13 @@ packages:
    resolution: {integrity: sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=}
    dev: true

-  /postcss-safe-parser/6.0.0_postcss@8.4.13:
+  /postcss-safe-parser/6.0.0_postcss@8.4.14:
    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
    engines: {node: '>=12.0'}
    peerDependencies:
      postcss: ^8.3.3
    dependencies:
-      postcss: 8.4.13
+      postcss: 8.4.14
    dev: true

  /postcss-scss/4.0.4_postcss@8.4.14:
@ -17537,12 +17577,12 @@ packages:
      sort-css-media-queries: 2.0.4
    dev: true

-  /postcss-sorting/7.0.1_postcss@8.4.13:
+  /postcss-sorting/7.0.1_postcss@8.4.14:
    resolution: {integrity: sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==}
    peerDependencies:
      postcss: ^8.3.9
    dependencies:
-      postcss: 8.4.13
+      postcss: 8.4.14
    dev: true

  /postcss-svgo/5.1.0_postcss@8.4.14:
@ -17588,15 +17628,6 @@ packages:
      source-map-js: 1.0.2
    dev: true

-  /postcss/8.4.13:
-    resolution: {integrity: sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.4
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
  /postcss/8.4.14:
    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
    engines: {node: ^10 || ^12 || >=14}
@ -20027,8 +20058,8 @@ packages:
    peerDependencies:
      stylelint: ^14.0.0
    dependencies:
-      postcss: 8.4.13
-      postcss-sorting: 7.0.1_postcss@8.4.13
+      postcss: 8.4.14
+      postcss-sorting: 7.0.1_postcss@8.4.14
      stylelint: 14.8.2
    dev: true

@ -20075,10 +20106,10 @@ packages:
      normalize-path: 3.0.0
      normalize-selector: 0.2.0
      picocolors: 1.0.0
-      postcss: 8.4.13
+      postcss: 8.4.14
      postcss-media-query-parser: 0.2.3
      postcss-resolve-nested-selector: 0.1.1
-      postcss-safe-parser: 6.0.0_postcss@8.4.13
+      postcss-safe-parser: 6.0.0_postcss@8.4.14
      postcss-selector-parser: 6.0.10
      postcss-value-parser: 4.2.0
      resolve-from: 5.0.0