1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>Better Auth on Cloudflare</title>
7 <style>
8 body {
9 max-width: 44rem;
10 margin: 3rem auto;
11 padding: 0 1rem;
12 font:
13 1rem/1.5 system-ui,
14 sans-serif;
15 }
16 label {
17 display: block;
18 margin-top: 1rem;
19 }
20 input {
21 display: block;
22 box-sizing: border-box;
23 width: 100%;
24 padding: 0.5rem;
25 }
26 button {
27 margin: 1rem 0.5rem 0 0;
28 padding: 0.5rem 0.75rem;
29 cursor: pointer;
30 }
31 output {
32 display: block;
33 margin-top: 1rem;
34 }
35 pre {
36 padding: 1rem;
37 background: #f2f4f6;
38 overflow: auto;
39 }
40 </style>
41 </head>
42 <body>
43 <h1>Better Auth on Cloudflare</h1>
44 <p>A same-origin client, an Effect HTTP API, and D1-backed sessions.</p>
45 <form id="auth-form">
46 <label for="name">Name (sign up only)</label>
47 <input id="name" name="name" autocomplete="name" />
48 <label for="email">Email</label>
49 <input
50 id="email"
51 name="email"
52 type="email"
53 autocomplete="username"
54 required
55 />
56 <label for="password">Password (at least 8 characters)</label>
57 <input
58 id="password"
59 name="password"
60 type="password"
61 autocomplete="current-password"
62 minlength="8"
63 required
64 />
65 <button id="sign-up" type="button">Sign up</button>
66 <button id="sign-in" type="button">Sign in</button>
67 <button id="sign-out" type="button">Sign out</button>
68 <button id="refresh" type="button">Refresh session</button>
69 </form>
70 <div id="providers"></div>
71 <output id="status" role="status" aria-live="polite">Loading…</output>
72 <h2>Session</h2>
73 <pre id="session">Not loaded</pre>
74 <h2>GET /api/me</h2>
75 <pre id="me">Not loaded</pre>
76 <script type="module" src="/ui.js"></script>
77 </body>
78</html>