✨ Init react app

sun-labs · Aug 5, 2022 · d51fb91 · d51fb91
1 parent a1338dc
commit d51fb91
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Router - Auth Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import {
+  Routes,
+  Route,
+  Link,
+  useNavigate,
+  Outlet,
+} from "react-router-dom"
+import { CLIENT_ID, REDIRECT_URI } from "./constants"
+import { usePasswordless } from "./usePasswordless"
+import { useQuery } from "./useQuery"
+
+export default function App() {
+  return (
+      <Routes>
+        <Route element={<Layout />}>
+          <Route path="/" element={<PasswordlessLoginRequestCodePage />} />
+          <Route path="/claim" element={<PasswordlessLoginClaimCodePage />} />
+        </Route>
+      </Routes>
+  )
+}
+
+function Layout() {
+  return (
+    <div>
+      <ul>
+        <li>
+          <Link to="/">Public Page</Link>
+        </li>
+        <li>
+          <Link to="/claim">Claim code</Link>
+        </li>
+      </ul>
+
+      <Outlet />
+    </div>
+  )
+}
+
+function PasswordlessLoginRequestCodePage() {
+  let navigate = useNavigate();
+  const { requestLoginCode, loading } = usePasswordless(REDIRECT_URI, CLIENT_ID)
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    let formData = new FormData(event.currentTarget)
+    let email = formData.get("email") as string
+
+    await requestLoginCode(email)
+
+    navigate('/claim')
+  }
+
+  if (loading) return <p>Loading...</p>
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Email: <input name="email" type="email" />
+        </label>
+        <button type="submit">Send code</button>
+      </form>
+    </div>
+  );
+}
+
+function PasswordlessLoginClaimCodePage() {
+  const { code } = useQuery()
+  const [tokens, setTokens] = React.useState()
+  const { claimLoginCode, loading } = usePasswordless(REDIRECT_URI, CLIENT_ID)
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    let formData = new FormData(event.currentTarget);
+    let code = formData.get("code") as string;
+
+    const res = await claimLoginCode(code)
+
+    setTokens(res)
+  }
+
+  const tokenEffectFn = async () => {
+    if (!code) return
+
+    const res = await claimLoginCode(code)
+
+    setTokens(res)
+  }
+
+  // @ts-expect-error 2345
+  React.useEffect(tokenEffectFn, [code])
+
+  if (loading) return <p>Loading...</p>
+
+  return (
+    <div>
+      {code && !tokens && (
+        <p>Your code is: {code}</p>
+      )}
+      {!code  && !tokens && (
+        <form>
+          <label>
+            Code: <input name="code" type="text" />
+          </label>
+          <button type="submit">Claim code</button>
+        </form>
+      )}
+      {tokens && (
+        <pre>{JSON.stringify(tokens, null, 2)}</pre>
+      )}
+    </div>
+  )
+}
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,3 @@
+export const BASE_ENDPOINT = ''
+export const CLIENT_ID = ''
+export const REDIRECT_URI = ''
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,12 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import { BrowserRouter } from "react-router-dom"
+
+import "./index.css"
+import App from "./App"
+
+ReactDOM.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById("root")
+)