fix(auth/mobile): support LAN-IP access in dev + edge-to-edge auth bg
- branded-auth-shell: split the background image into a separate
fixed-positioned layer behind the layout. Previously the bg was on
a min-h-screen container and iOS Safari left visible whitespace at
the top/bottom when the URL bar showed/hid (the container's height
didn't match the visual viewport). Now the bg pins to the actual
visible viewport via `fixed inset-0`. min-h-[100dvh] also added
so the layout layer matches.
- auth client: derive baseURL from window.location.origin instead of
NEXT_PUBLIC_APP_URL. Same dev build now works whether opened on
localhost (Mac) or the LAN IP (iPhone on Wi-Fi).
- auth server: dynamic trustedOrigins function that allows
localhost / 127.x / 192.168.x / 10.x in dev (function form
inspects the incoming request's Origin). Production stays locked
to NEXT_PUBLIC_APP_URL.
- new dev helper: scripts/dev-set-password.ts to set a user's
better-auth password directly (bypasses the email-reset flow);
used to bootstrap matt@letsbe.solutions for mobile testing.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
40
scripts/dev-set-password.ts
Normal file
40
scripts/dev-set-password.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
* Dev helper: set a user's password directly (bypasses email reset).
|
||||||
|
* Usage: pnpm tsx scripts/dev-set-password.ts <email> <password>
|
||||||
|
*/
|
||||||
|
import 'dotenv/config';
|
||||||
|
import { hashPassword } from 'better-auth/crypto';
|
||||||
|
import { eq, and } from 'drizzle-orm';
|
||||||
|
import { db } from '@/lib/db';
|
||||||
|
import { user, account } from '@/lib/db/schema/users';
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const [, , email, password] = process.argv;
|
||||||
|
if (!email || !password) {
|
||||||
|
console.error('Usage: pnpm tsx scripts/dev-set-password.ts <email> <password>');
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const u = await db.query.user.findFirst({ where: eq(user.email, email) });
|
||||||
|
if (!u) {
|
||||||
|
console.error(`User not found: ${email}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const hash = await hashPassword(password);
|
||||||
|
const result = await db
|
||||||
|
.update(account)
|
||||||
|
.set({ password: hash, updatedAt: new Date() })
|
||||||
|
.where(and(eq(account.userId, u.id), eq(account.providerId, 'credential')))
|
||||||
|
.returning({ id: account.id });
|
||||||
|
|
||||||
|
if (result.length === 0) {
|
||||||
|
console.error(`No credential account row for ${email}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`Updated password for ${email} (account id ${result[0]?.id}).`);
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
@@ -10,15 +10,23 @@ const LOGO_URL =
|
|||||||
*/
|
*/
|
||||||
export function BrandedAuthShell({ children }: { children: React.ReactNode }) {
|
export function BrandedAuthShell({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
|
<div className="relative min-h-screen min-h-[100dvh] flex items-center justify-center px-4 py-8">
|
||||||
|
{/*
|
||||||
|
Full-viewport background layer — pinned to the visible viewport via
|
||||||
|
`fixed inset-0` so the marina image always reaches the actual screen
|
||||||
|
edges regardless of the iOS Safari URL bar showing/hiding. The shell's
|
||||||
|
layout layer above sits on top via z-index.
|
||||||
|
*/}
|
||||||
<div
|
<div
|
||||||
className="min-h-screen flex items-center justify-center px-4 py-8"
|
aria-hidden
|
||||||
|
className="fixed inset-0 -z-10"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url('${BG_URL}')`,
|
backgroundImage: `url('${BG_URL}')`,
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
backgroundColor: '#f2f2f2',
|
backgroundColor: '#f2f2f2',
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<div className="w-full max-w-md">
|
<div className="w-full max-w-md">
|
||||||
<div className="bg-white rounded-lg shadow-lg p-8">
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||||
<div className="flex justify-center mb-6">
|
<div className="flex justify-center mb-6">
|
||||||
|
|||||||
@@ -2,8 +2,14 @@
|
|||||||
|
|
||||||
import { createAuthClient } from 'better-auth/react';
|
import { createAuthClient } from 'better-auth/react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use the current window origin as the auth API host so the same dev build
|
||||||
|
* works whether the page was loaded via http://localhost:3001 (Mac) or
|
||||||
|
* http://192.168.1.17:3001 (iPhone on LAN). Falls back to the build-time
|
||||||
|
* NEXT_PUBLIC_APP_URL during SSR / module-eval where `window` is undefined.
|
||||||
|
*/
|
||||||
export const authClient = createAuthClient({
|
export const authClient = createAuthClient({
|
||||||
baseURL: process.env.NEXT_PUBLIC_APP_URL,
|
baseURL: typeof window !== 'undefined' ? window.location.origin : process.env.NEXT_PUBLIC_APP_URL,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const { useSession, signIn, signOut, getSession } = authClient;
|
export const { useSession, signIn, signOut, getSession } = authClient;
|
||||||
|
|||||||
@@ -9,11 +9,43 @@ import { db } from '@/lib/db';
|
|||||||
* Sessions are stored in PostgreSQL (not Redis) per SECURITY-GUIDELINES.md §1.2.
|
* Sessions are stored in PostgreSQL (not Redis) per SECURITY-GUIDELINES.md §1.2.
|
||||||
* The drizzle adapter handles session persistence via the existing `sessions` table.
|
* The drizzle adapter handles session persistence via the existing `sessions` table.
|
||||||
*/
|
*/
|
||||||
|
/**
|
||||||
|
* In dev, allow requests from any LAN IP so the same `pnpm dev` instance can
|
||||||
|
* serve both localhost (Mac) and the LAN IP (iPhone on Wi-Fi). In production,
|
||||||
|
* trustedOrigins is locked down to NEXT_PUBLIC_APP_URL only.
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* In dev, allow localhost + any LAN-IP origin so the same `pnpm dev` instance
|
||||||
|
* can serve both Mac (localhost) and iPhone-on-Wi-Fi (192.168.x.x). The
|
||||||
|
* function form is preferred over a static list because the LAN IP can vary
|
||||||
|
* across networks. In production, lock down to NEXT_PUBLIC_APP_URL only.
|
||||||
|
*/
|
||||||
|
const isProd = process.env.NODE_ENV === 'production';
|
||||||
|
const DEV_ORIGIN_PATTERNS = [
|
||||||
|
/^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/,
|
||||||
|
/^https?:\/\/192\.168\.\d+\.\d+(:\d+)?$/,
|
||||||
|
/^https?:\/\/10\.\d+\.\d+\.\d+(:\d+)?$/,
|
||||||
|
];
|
||||||
|
|
||||||
|
const trustedOrigins: (request?: Request) => Promise<string[]> = async (request) => {
|
||||||
|
if (isProd) {
|
||||||
|
const prodUrl = process.env.NEXT_PUBLIC_APP_URL;
|
||||||
|
return prodUrl ? [prodUrl] : [];
|
||||||
|
}
|
||||||
|
const origin = request?.headers.get('origin') ?? '';
|
||||||
|
if (origin && DEV_ORIGIN_PATTERNS.some((re) => re.test(origin))) {
|
||||||
|
return [origin];
|
||||||
|
}
|
||||||
|
return ['http://localhost:3000', 'http://localhost:3001'];
|
||||||
|
};
|
||||||
|
|
||||||
export const auth = betterAuth({
|
export const auth = betterAuth({
|
||||||
database: drizzleAdapter(db, {
|
database: drizzleAdapter(db, {
|
||||||
provider: 'pg',
|
provider: 'pg',
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
trustedOrigins,
|
||||||
|
|
||||||
emailAndPassword: {
|
emailAndPassword: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
minPasswordLength: 9,
|
minPasswordLength: 9,
|
||||||
|
|||||||
Reference in New Issue
Block a user