		@@ -12,7 +12,9 @@ import { html, htmlResponse } from 'cloudflare-htmx';
		html`
		<form method="post" action="/dash">
		<h1>Protected Route</h1>
		<button type="submit">Logout</button>
		</form>
		<div class="text-center pt-10 h-screen">
		<form method="post" action="/dash">
		<h1 class="text-3xl text-primary mb-4">This is a protected route</h1>
		<button class="btn btn-secondary w-96" type="submit">Logout</button>
		</form>
		</div>
		`
		);

demo/functions/index.ts

		@@ -13,3 +13,2 @@ import { html, htmlResponse } from 'cloudflare-htmx';
		name="email"
		data-cy="email"
		class="input text-xl bg-neutral h-14 pl-10 pt-2 pb-2 w-full md:w-96"
		@@ -16,0 +15,0 @@ type="email"

demo/functions/login.ts

		@@ -1,5 +0,5 @@
		import { login, Env } from 'cloudflare-auth';
		import { generateToken, Env } from 'cloudflare-auth';
		import { sendEmail } from '@lib/email';
		import Toast from '@components/Toast';
		import { htmlResponse } from 'cloudflare-htmx';
		import { html, htmlResponse } from 'cloudflare-htmx';

		@@ -13,8 +13,7 @@ export const onRequestPost: PagesFunction<Env> = async ({ request, env }) => {
		}
		const token = await login(email, env);
		const token = await generateToken(email, env);
		const magicLink = `${url.origin}/verify?token=${token}`;
		try {
		await sendEmail(email, magicLink);
		console.log('here');
		return htmlResponse(Toast('Check your email for magic link.'));
		return htmlResponse(Toast(html` <a class="link text-primary" href="${magicLink}">Click here to login</a> `, 'alert-success', false));
		} catch {
		@@ -21,0 +20,0 @@ return htmlResponse(Toast('Magic link failed to send!', 'alert-failure'));

demo/src/components/Toast.ts

		import { html } from 'cloudflare-htmx';

		export default (message: string, alertClass = 'alert-success') => {
		export default (message: string, alertClass = 'alert-success', fadeOut = true) => {
		return html`
		<div class="toast toast-end w-full md:w-76 mt-10" _="on load wait 3s add .fadeOut wait 1s remove me">
		<div class="toast toast-end w-full md:w-76 mt-10" ${fadeOut ? `_="on load wait 3s add .fadeOut wait 1s remove me"` : ''}>
		<div class="alert ${alertClass} justify-center">
		@@ -7,0 +7,0 @@ <span class="text-lg font-bold"> ${message} </span>

package.json

		{
		"name": "cloudflare-auth",
		"version": "1.0.0",
		"version": "1.1.0",
		"description": "JWT implementation for Cloudflare using D1",
		"main": "index.ts",
		"main": "src/index.ts",
		"scripts": {
		@@ -7,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

index.ts

demo/pnpm-lock.yaml

Sorry, the diff of this file is not supported yet

demo/static/css/output.css

Sorry, the diff of this file is not supported yet

cloudflare-auth - npm Package Compare versions

New alerts