Welcome, ${userEmail}!

\n//

You are authenticated via studiokare-auth.

\n// Log out\n// `);\n// }\n//\n// // User is not logged in — show a login button.\n// return c.html(`\n//

My Client App

\n//

This app uses studiokare-auth for passwordless login.

\n// Log in with magic link\n// `);\n// });\n//\n//\n// // --- Login redirect -----------------------------------------------------------\n// // Redirects the user to the auth server's OAuth2 authorize endpoint.\n// // The auth server will handle magic-link login and consent, then redirect\n// // back to /callback with an authorization code.\n//\n// app.get(\"/login\", (c) => {\n// // Generate a random state value to prevent CSRF attacks.\n// const state = crypto.randomUUID();\n//\n// // In production, store `state` in a cookie or session so you can verify\n// // it when the callback arrives. For brevity, we skip that here.\n//\n// const authorizeUrl = new URL(`${AUTH_SERVER_URL}/oauth/authorize`);\n// authorizeUrl.searchParams.set(\"response_type\", \"code\");\n// authorizeUrl.searchParams.set(\"client_id\", CLIENT_ID);\n// authorizeUrl.searchParams.set(\"redirect_uri\", `${CLIENT_APP_URL}/callback`);\n// authorizeUrl.searchParams.set(\"state\", state);\n//\n// return c.redirect(authorizeUrl.toString());\n// });\n//\n//\n// // --- OAuth2 callback ----------------------------------------------------------\n// // The auth server redirects here after the user authenticates and consents.\n// // We receive an authorization code and exchange it for a JWT access token.\n//\n// app.get(\"/callback\", async (c) => {\n// const code = c.req.query(\"code\");\n// const state = c.req.query(\"state\");\n//\n// // In production, verify `state` matches what you stored during /login.\n//\n// if (!code) {\n// return c.text(\"Missing authorization code\", 400);\n// }\n//\n// // ---- Step 1: Exchange the authorization code for an access token ----------\n// // This is a server-to-server request — the client secret is never exposed\n// // to the browser.\n//\n// const tokenResponse = await fetch(`${AUTH_SERVER_URL}/oauth/token`, {\n// method: \"POST\",\n// headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },\n// body: new URLSearchParams({\n// grant_type: \"authorization_code\",\n// code: code,\n// redirect_uri: `${CLIENT_APP_URL}/callback`,\n// client_id: CLIENT_ID,\n// client_secret: CLIENT_SECRET,\n// }),\n// });\n//\n// if (!tokenResponse.ok) {\n// const err = await tokenResponse.text();\n// return c.text(`Token exchange failed: ${err}`, 500);\n// }\n//\n// const { access_token } = await tokenResponse.json();\n//\n// // ---- Step 2: Fetch user info using the access token ----------------------\n// // The access token is a JWT — you could also decode it directly, but\n// // calling /oauth/userinfo is the standard approach.\n//\n// const userinfoResponse = await fetch(`${AUTH_SERVER_URL}/oauth/userinfo`, {\n// headers: { Authorization: `Bearer ${access_token}` },\n// });\n//\n// if (!userinfoResponse.ok) {\n// return c.text(\"Failed to fetch user info\", 500);\n// }\n//\n// const userinfo = await userinfoResponse.json();\n// // userinfo = { sub: \"user-id\", email: \"user@example.com\" }\n//\n// // ---- Step 3: Create your own session -------------------------------------\n// // Set a simple cookie with the user's email. In production, use a proper\n// // session store (e.g. a database-backed session with an opaque token).\n//\n// setCookie(c, \"user_email\", userinfo.email, {\n// httpOnly: true,\n// secure: true,\n// sameSite: \"Lax\",\n// path: \"/\",\n// maxAge: 60 * 60 * 24 * 7, // 7 days\n// });\n//\n// // Redirect to the home page, now logged in.\n// return c.redirect(\"/\");\n// });\n//\n//\n// // --- Logout -------------------------------------------------------------------\n//\n// app.get(\"/logout\", (c) => {\n// setCookie(c, \"user_email\", \"\", { path: \"/\", maxAge: 0 });\n// return c.redirect(\"/\");\n// });\n//\n//\n// export default app;\n\n\n// ============================================================\n// BONUS: Register a user via the API\n// ============================================================\n// You can pre-register users from a script or admin tool using\n// the POST /oauth/users endpoint with Basic auth:\n//\n// const response = await fetch(`${AUTH_SERVER_URL}/oauth/users`, {\n// method: \"POST\",\n// headers: {\n// \"Content-Type\": \"application/json\",\n// \"Authorization\": `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,\n// },\n// body: JSON.stringify({ email: \"newuser@example.com\" }),\n// });\n//\n// const result = await response.json();\n// // { user: { id: \"...\", email: \"...\", createdAt: \"...\" }, created: true }\n// // If the user already existed, `created` will be `false`.\n","deleted","label",[176,158],"examples","permalink","https://www.val.town/x/cricks_unmixed4u/studiokare-auth/code/examples/client-app.ts","extension","actionData","errors"]