trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 6-digit login code for mobile authentication

Browse source 
Magic links open in the device browser, not the OAuth in-app browser,
so the session doesn't carry over. A login code lets mobile users
type a 6-digit code from their email into the login page instead.

- Generate 6-digit numeric code alongside magic link token
- Store code in magic_tokens table
- Add verify-code step to login API endpoint
- Show code input UI after magic link is sent
- Include code in email template
- i18n keys for code UI (en + de)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-15 20:56:42 +02:00
parent 2a94af5655
commit 3bcb1fce7c
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
7 changed files with 130 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

41
apps/journal/app/lib/auth.server.ts
View file

@ -229,7 +229,13 @@ export async function finishAuthentication(
// --- Magic Links ---
export async function createMagicToken(email: string): Promise<string> {
function generateLoginCode(): string {
// 6-digit numeric code, zero-padded
const num = randomBytes(3).readUIntBE(0, 3) % 1_000_000;
return String(num).padStart(6, "0");
}
export async function createMagicToken(email: string): Promise<{ token: string; code: string }> {
const db = getDb();
// Check user exists
@ -237,16 +243,47 @@ export async function createMagicToken(email: string): Promise<string> {
if (!user) throw new Error("No account found for this email");
const token = randomBytes(32).toString("base64url");
const code = generateLoginCode();
const expiresAt = new Date(Date.now() + 15 * 60 * 1000); // 15 minutes
await db.insert(magicTokens).values({
id: randomUUID(),
email,
token,
code,
expiresAt,
});
return token;
return { token, code };
}
export async function verifyLoginCode(email: string, code: string): Promise<string> {
const db = getDb();
const [record] = await db
.select()
.from(magicTokens)
.where(
and(
eq(magicTokens.email, email),
eq(magicTokens.code, code),
eq(magicTokens.purpose, "login"),
gt(magicTokens.expiresAt, new Date()),
isNull(magicTokens.usedAt),
),
);
if (!record) throw new Error("Invalid or expired code");
await db
.update(magicTokens)
.set({ usedAt: new Date() })
.where(eq(magicTokens.id, record.id));
const [user] = await db.select().from(users).where(eq(users.email, record.email));
if (!user) throw new Error("User not found");
return user.id;
}
export async function initiateEmailChange(userId: string, newEmail: string): Promise<string> {

18
apps/journal/app/lib/email.server.ts
View file

@ -30,23 +30,33 @@ export async function sendEmail(
// --- Templates ---
export function magicLinkTemplate(link: string): { html: string; text: string } {
export function magicLinkTemplate(link: string, code?: string): { html: string; text: string } {
const codeSection = code
? `<p style="color: #555; line-height: 1.6;">Or enter this code on the login page:</p>
<div style="margin: 16px 0; padding: 16px; background: #f3f4f6; border-radius: 8px; text-align: center;">
<span style="font-size: 32px; font-weight: 700; letter-spacing: 8px; color: #111;">${code}</span>
</div>`
: "";
const html = `
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
<h1 style="font-size: 24px; font-weight: 600; color: #111;">Sign in to trails.cool</h1>
<p style="color: #555; line-height: 1.6;">Click the button below to sign in to your account. This link expires in 15 minutes.</p>
<a href="${link}" style="display: inline-block; margin: 24px 0; padding: 12px 24px; background: #2563eb; color: white; text-decoration: none; border-radius: 8px; font-weight: 500;">Sign In</a>
${codeSection}
<p style="color: #888; font-size: 14px;">If the button doesn't work, copy and paste this link:<br/><a href="${link}" style="color: #2563eb;">${link}</a></p>
<hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
<p style="color: #aaa; font-size: 12px;">If you didn't request this link, you can safely ignore this email.</p>
</div>
`.trim();
const codeText = code ? `\nOr enter this code: ${code}\n` : "";
const text = [
"Sign in to trails.cool",
"",
`Click here to sign in: ${link}`,
"",
codeText,
"This link expires in 15 minutes.",
"",
"If you didn't request this link, you can safely ignore this email.",
@ -89,8 +99,8 @@ export function welcomeTemplate(username: string): { html: string; text: string
// --- Convenience wrappers ---
export async function sendMagicLink(email: string, link: string): Promise<void> {
const { html, text } = magicLinkTemplate(link);
export async function sendMagicLink(email: string, link: string, code?: string): Promise<void> {
const { html, text } = magicLinkTemplate(link, code);
await sendEmail(email, "Sign in to trails.cool", html, text);
}

23
apps/journal/app/routes/api.auth.login.ts
View file

@ -1,11 +1,11 @@
import { data } from "react-router";
import type { Route } from "./+types/api.auth.login";
import { startAuthentication, finishAuthentication, createMagicToken, createSession } from "~/lib/auth.server";
import { startAuthentication, finishAuthentication, createMagicToken, verifyLoginCode, createSession } from "~/lib/auth.server";
import { sendMagicLink } from "~/lib/email.server";
export async function action({ request }: Route.ActionArgs) {
const body = await request.json();
const { step, response, challenge, email } = body;
const { step, response, challenge, email, code } = body;
try {
if (step === "start-passkey") {
@ -20,19 +20,28 @@ export async function action({ request }: Route.ActionArgs) {
}
if (step === "magic-link") {
const token = await createMagicToken(email);
const { token, code: loginCode } = await createMagicToken(email);
const origin = process.env.ORIGIN ?? "http://localhost:3000";
const link = `${origin}/auth/verify?token=${token}`;
// In dev, return the link directly so the client can auto-redirect
// In dev, return the link and code directly
if (process.env.NODE_ENV !== "production") {
console.log(`[Magic Link] ${email}: ${link}`);
return data({ step: "magic-link-sent", devLink: link });
console.log(`[Magic Link] ${email}: ${link} (code: ${loginCode})`);
return data({ step: "magic-link-sent", devLink: link, code: loginCode });
}
await sendMagicLink(email, link);
await sendMagicLink(email, link, loginCode);
return data({ step: "magic-link-sent" });
}
if (step === "verify-code") {
if (!email || !code) {
return data({ error: "Email and code are required" }, { status: 400 });
}
const userId = await verifyLoginCode(email, code);
const cookie = await createSession(userId, request);
return data({ step: "done" }, { headers: { "Set-Cookie": cookie } });
}
return data({ error: "Invalid step" }, { status: 400 });
} catch (e) {
return data({ error: (e as Error).message }, { status: 400 });

63
apps/journal/app/routes/auth.login.tsx
View file

@ -17,6 +17,7 @@ export default function LoginPage() {
});
}, []);
const [email, setEmail] = useState("");
const [loginCode, setLoginCode] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [magicLinkSent, setMagicLinkSent] = useState(false);
@ -70,6 +71,31 @@ export default function LoginPage() {
}
};
const handleCodeVerify = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
setLoading(true);
try {
const resp = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ step: "verify-code", email, code: loginCode }),
});
const result = await resp.json();
if (result.error) {
setError(result.error);
} else if (result.step === "done") {
window.location.href = returnTo ?? "/";
}
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
};
const handleMagicLink = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
@ -168,13 +194,36 @@ export default function LoginPage() {
)}
{magicLinkSent && (
<div className="mt-8 rounded-md bg-green-50 p-4">
<p className="text-sm text-green-800">
{t("auth.checkEmail")} <strong>{email}</strong>.
</p>
<p className="mt-2 text-xs text-green-600">
{t("auth.linkExpires")}
</p>
<div className="mt-8 space-y-4">
<div className="rounded-md bg-green-50 p-4">
<p className="text-sm text-green-800">
{t("auth.checkEmail")} <strong>{email}</strong>.
</p>
<p className="mt-2 text-xs text-green-600">
{t("auth.linkExpires")}
</p>
</div>
<form onSubmit={handleCodeVerify} className="space-y-3">
<p className="text-sm text-gray-600">{t("auth.codeHelp")}</p>
<input
type="text"
inputMode="numeric"
pattern="[0-9]*"
maxLength={6}
placeholder="000000"
value={loginCode}
onChange={(e) => setLoginCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
className="block w-full rounded-md border border-gray-300 px-3 py-3 text-center text-2xl font-mono tracking-[0.3em] shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
<button
type="submit"
disabled={loading || loginCode.length !== 6}
className="w-full rounded-md bg-gray-800 px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-50"
>
{loading ? t("auth.authenticating") : t("auth.verifyCode")}
</button>
</form>
</div>
)}