feat(browser-sample): add browser sample pages

logto-io · Feb 25, 2022 · ebc990d · ebc990d
1 parent 15dd191
commit ebc990d
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 396 deletions.
diff --git a/package.json b/package.json
@@ -20,5 +20,8 @@
     "packages": [
       "packages/*"
     ]
+  },
+  "alias": {
+    "superstruct": "superstruct/lib/index.es.js"
   }
 }
diff --git a/packages/browser-sample/package.json b/packages/browser-sample/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "precommit": "lint-staged",
-    "start": "parcel src/index.html",
-    "build": "rm -rf dist && parcel build src/index.html --no-autoinstall",
+    "start": "parcel public/index.html -p 3000",
+    "build": "rm -rf dist && parcel build public/index.html --no-autoinstall",
     "lint": "eslint --ext .js src",
     "stylelint": "stylelint \"src/**/*.scss\""
   },
@@ -18,10 +18,13 @@
     "@parcel/transformer-sass": "^2.3.2",
     "@silverhand/eslint-config": "^0.9.1",
     "@silverhand/eslint-config-react": "^0.9.1",
+    "buffer": "^6.0.3",
+    "eslint": "^8.9.0",
     "lint-staged": "^12.3.4",
     "parcel": "^2.3.2",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
+    "process": "^0.11.10",
     "stylelint": "^13.13.1"
   },
   "eslintConfig": {

diff --git a/packages/browser-sample/src/index.html → packages/browser-sample/public/index.html b/packages/browser-sample/src/index.html → packages/browser-sample/public/index.html
@@ -9,7 +9,7 @@
 <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app"></div>
-    <script type="module" src="index.js"></script>
+    <script type="module" src="../src/index.js"></script>
 </body>
 
 </html>
diff --git a/packages/browser-sample/src/app.js b/packages/browser-sample/src/app.js
diff --git a/packages/browser-sample/src/app.scss b/packages/browser-sample/src/app.scss
diff --git a/packages/browser-sample/src/consts.js b/packages/browser-sample/src/consts.js
@@ -0,0 +1,6 @@
+export const baseUrl = window.location.origin;
+export const redirectUrl = `${baseUrl}/callback`;
+export const clientId = 'foo';
+
+// OIDC domain
+export const endpoint = 'https://logto.dev';
diff --git a/packages/browser-sample/src/index.js b/packages/browser-sample/src/index.js
@@ -1,5 +1,17 @@
-import { init } from './app.js';
+import LogtoClient from '@logto/browser';
+
+import { endpoint, clientId } from './consts.js';
+import Callback from './pages/Callback.js';
+import Home from './pages/Home.js';
+
+import './index.scss';
+
+const logtoClient = new LogtoClient({ endpoint, clientId });
 
 const app = document.querySelector('#app');
 
-init(app);
+// Could replace this with a formal router solution
+const isCallback = window.location.pathname.startsWith('/callback');
+const render = isCallback ? Callback : Home;
+
+render(app, logtoClient);
diff --git a/packages/browser-sample/src/index.scss b/packages/browser-sample/src/index.scss
@@ -0,0 +1,36 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: #101419;
+  color: #dadae0;
+  text-align: center;
+}
+
+.container {
+  width: 100%;
+  padding: 20px;
+}
+
+table {
+  margin: 50px auto;
+  table-layout: fixed;
+  width: 800px;
+  border: 1px solid #333;
+  border-spacing: 0;
+
+  th,
+  td {
+    padding: 10px;
+    word-wrap: break-word;
+    border: 1px solid #333;
+  }
+
+  th {
+    font-weight: bold;
+  }
+}
+
+button {
+  cursor: pointer;
+}
diff --git a/packages/browser-sample/src/pages/Callback.js b/packages/browser-sample/src/pages/Callback.js
@@ -0,0 +1,47 @@
+/* eslint-disable @silverhand/fp/no-mutation */
+import { baseUrl } from '../consts.js';
+
+const Callback = async (app, logtoClient) => {
+  if (!logtoClient) {
+    throw new Error('no logto client found');
+  }
+
+  const fragment = document.createDocumentFragment();
+  const container = document.createElement('div');
+  container.classList.add('container');
+
+  const h3 = document.createElement('h3');
+  h3.innerHTML = 'Authenticating...';
+
+  container.append(h3);
+  fragment.append(container);
+  app.append(fragment);
+
+  await logtoClient.handleSignInCallback(window.location.href);
+
+  if (logtoClient.isAuthenticated) {
+    h3.innerHTML = 'Signed in!';
+
+    const h4 = document.createElement('h4');
+    container.append(h4);
+
+    // eslint-disable-next-line @silverhand/fp/no-let
+    let countDown = 3;
+    h4.innerHTML = `Redirecting back to home page in ${countDown} seconds...`;
+
+    const interval = setInterval(() => {
+      countDown -= 1;
+      h4.innerHTML = `Redirecting back to home page in ${countDown} seconds...`;
+
+      if (countDown === 0) {
+        clearInterval(interval);
+        window.location.assign(baseUrl);
+      }
+    }, 1000);
+  } else {
+    h3.innerHTML = 'Sign in failed.';
+  }
+};
+
+export default Callback;
+/* eslint-enable @silverhand/fp/no-mutation */
diff --git a/packages/browser-sample/src/pages/Home.js b/packages/browser-sample/src/pages/Home.js
@@ -0,0 +1,62 @@
+/* eslint-disable @silverhand/fp/no-mutation */
+import { baseUrl, redirectUrl } from '../consts.js';
+
+const Home = (app, logtoClient) => {
+  if (!logtoClient) {
+    throw new Error('no logto client found');
+  }
+
+  const { isAuthenticated } = logtoClient;
+  const onClickSignIn = () => logtoClient.signIn(redirectUrl);
+  const onClickSignOut = () => logtoClient.signOut(baseUrl);
+
+  const fragment = document.createDocumentFragment();
+
+  const container = document.createElement('div');
+  container.classList.add('container');
+
+  const h3 = document.createElement('h3');
+  h3.innerHTML = 'Logto Browser Sample';
+
+  const button = document.createElement('button');
+  button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
+  button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);
+
+  container.append(h3, button);
+
+  if (isAuthenticated) {
+    // Generate display table for ID token claims
+    const table = document.createElement('table');
+
+    const thead = document.createElement('thead');
+    const tr = document.createElement('tr');
+    const thName = document.createElement('th');
+    const thValue = document.createElement('th');
+    thName.innerHTML = 'Name';
+    thValue.innerHTML = 'Value';
+    tr.append(thName, thValue);
+    thead.append(tr);
+    table.append(thead);
+
+    const tbody = document.createElement('tbody');
+    const entries = Object.entries(logtoClient.getIdTokenClaims());
+    for (const [key, value] of entries) {
+      const tr = document.createElement('tr');
+      const tdName = document.createElement('td');
+      const tdValue = document.createElement('td');
+      tdName.innerHTML = key;
+      tdValue.innerHTML = value;
+      tr.append(tdName, tdValue);
+      tbody.append(tr);
+    }
+
+    table.append(tbody);
+    container.append(table);
+  }
+
+  fragment.append(container);
+  app.append(fragment);
+};
+
+export default Home;
+/* eslint-enable @silverhand/fp/no-mutation */