zeu.dev
AT Protocol OAuth template in Deno, Hono, HTMX
1import { Context } from "hono";
2import { oauth } from "./main.tsx";
3import { FC, PropsWithChildren } from "hono/jsx";
4
5export const SiteLayout: FC<PropsWithChildren<{ context: Context }>> = async ({ context, children }) => {
6 const { session } = await oauth.getSessionFromRequest(context.req.raw);
7
8 return (
9 <html>
10 <head>
11 <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous"></script>
12 </head>
13 <body>
14 <nav style={{ display: "flex", "flex-direction": "row", gap: "8px" }}>
15 { session ? <LogoutForm /> : <LoginForm /> }
16 <a href="/">README</a>
17 <a href="/profile">Profile</a>
18 </nav>
19 <hr />
20 {children}
21 <div id="error"></div>
22 </body>
23 </html>
24 );
25}
26
27export const LoginForm: FC = () => {
28 return (
29 <form id="authForm" hx-swap-oob="true" method="get" action="/login">
30 <input name="handle" type="text" />
31 <button type="submit">Login</button>
32 </form>
33 )
34}
35
36export const LogoutForm: FC = () => {
37 return (
38 <form id="authForm" hx-post="/api/auth/logout" hx-swap="none">
39 <button type="submit">Logout</button>
40 </form>
41 )
42}