// auth.jsx — Supabase Auth UI + session management
// Exposes window.PH365_AUTH { useSession, useUser, AuthGate, signOut, openAuthModal }
//
// When Supabase isn't configured, useSession returns a fake "guest" session so
// the prototype keeps working without a backend.
(function () {
const { useState, useEffect, useCallback } = React;
const supabase = window.PH365_SUPABASE;
const COLORS = window.PH365_UI.COLORS;
const { Display, Body, Caption, Icon } = window.PH365_UI;
// ── Hooks ─────────────────────────────────────────────────────────────
function useSession() {
const [session, setSession] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!supabase) {
setSession({ user: { id: 'guest', email: 'guest@local', isGuest: true } });
setLoading(false);
return;
}
let active = true;
supabase.auth.getSession().then(({ data }) => {
if (active) { setSession(data.session); setLoading(false); }
});
const { data: sub } = supabase.auth.onAuthStateChange((_evt, s) => setSession(s));
return () => { active = false; sub.subscription.unsubscribe(); };
}, []);
return { session, loading };
}
function useUser() {
const { session } = useSession();
return session?.user ?? null;
}
// Is this page load the tail end of a password-reset link? Two independent
// signals, because neither one alone is dependable:
//
// * window.PH365_RECOVERY — set by the bootstrap in Passholder365.html,
// which reads the URL fragment before the Supabase client parses and
// strips it. This is the one that fires on the normal implicit flow.
// * the PASSWORD_RECOVERY auth event — emitted once the client has
// finished parsing, which also covers the PKCE '?code=' variant. On its
// own it races us: the client may well have finished before this
// component ever mounted, and nothing replays the event to a late
// subscriber.
//
// Returns [recovering, clearRecovery].
function useRecovery() {
const [recovering, setRecovering] = useState(() => !!window.PH365_RECOVERY);
useEffect(() => {
if (!supabase) return;
const { data: sub } = supabase.auth.onAuthStateChange((evt) => {
if (evt === 'PASSWORD_RECOVERY') setRecovering(true);
});
return () => sub.subscription.unsubscribe();
}, []);
const clear = useCallback(() => {
window.PH365_RECOVERY = false;
setRecovering(false);
}, []);
return [recovering, clear];
}
// ── Sign-in / sign-up modal ───────────────────────────────────────────
function AuthModal({ onClose, initialMode }) {
// 'signup' by default — friendlier first-run. `initialMode` is how the
// password-reset link forces us straight into 'update'.
const [mode, setMode] = useState(initialMode || 'signup');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState('');
const [name, setName] = useState('');
const [busy, setBusy] = useState(false);
const [msg, setMsg] = useState(null);
const [err, setErr] = useState(null);
const [done, setDone] = useState(false); // success state after signup
if (!supabase) {
return (
This deployment doesn't have Supabase wired up yet. Set{' '}
SUPABASE_URL{' '}and{' '}
SUPABASE_ANON_KEY in
Vercel env vars to enable accounts.
For now, your check-ins and ratings are stored locally in this browser only.
);
}
async function submit(e) {
e?.preventDefault();
setBusy(true); setErr(null); setMsg(null);
try {
if (mode === 'signin') {
const { error } = await supabase.auth.signInWithPassword({ email, password });
if (error) throw error;
onClose();
} else if (mode === 'signup') {
const { data, error } = await supabase.auth.signUp({
email, password,
options: {
data: { full_name: name || null },
// Confirmation email must land back on this deployment, not the
// project's default Site URL. Requires the origin to be in the
// Supabase auth redirect allow-list.
emailRedirectTo: window.location.origin,
},
});
if (error) throw error;
// If email confirmation is OFF, session is returned and we can close.
// If it's ON (default for hosted Supabase), data.session is null and
// we need to ask the user to check their email.
if (data.session) {
onClose();
} else {
setDone(true);
setMsg(`Account created! Check ${email} to confirm.`);
}
} else if (mode === 'magic') {
const { error } = await supabase.auth.signInWithOtp({
email, options: { shouldCreateUser: true, emailRedirectTo: window.location.origin },
});
if (error) throw error;
setDone(true);
setMsg(`Magic link sent to ${email}.`);
} else if (mode === 'reset') {
const { error } = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: window.location.origin,
});
if (error) throw error;
setDone(true);
setMsg(`Password-reset email sent to ${email}.`);
} else if (mode === 'update') {
if (password !== confirm) throw new Error("Those two passwords don't match.");
// The recovery link already signed us in — a short-lived session
// whose only purpose is to authorise this one call.
const { error } = await supabase.auth.updateUser({ password });
if (error) throw error;
setDone(true);
setMsg('Password updated.');
}
} catch (e) {
// An expired or already-used link leaves no session behind, so
// updateUser fails with a message that means nothing to the person
// reading it. Say what actually happened and where the way out is.
const m = String(e.message || '');
setErr(mode === 'update' && /session|not authenticated|missing/i.test(m)
? 'That reset link has expired or was already used. Send yourself a fresh one below.'
: m);
}
finally { setBusy(false); }
}
if (done) {
return (
{msg}
{mode === 'update' ? (
<>
You're signed in with your new password. Use it next time.
) : (
Open the email and click the link to finish.
You can close this window — we'll pick up your session automatically.
)}
);
}
const titles = {
signin: 'Sign in',
signup: 'Create your account',
magic: 'Magic link sign-in',
reset: 'Reset password',
update: 'Set a new password',
};
return (
{mode === 'signup' && (
Free, takes 10 seconds. We use email only to confirm your account and
send the password-reset link if you ever need it.
)}
{mode === 'update' && (
You followed a reset link. Pick a new password and you're back in.
)}
{/* In 'update' mode the only sideways move that makes sense is
asking for another link — offering "Sign in" to someone who is
here precisely because they can't is how this looked broken. */}
{mode === 'update' && { setMode('reset'); setErr(null); setMsg(null); }}>Send a new reset link}
{mode !== 'update' && mode !== 'signin' && { setMode('signin'); setErr(null); setMsg(null); }}>Sign in}
{mode !== 'update' && mode !== 'signup' && { setMode('signup'); setErr(null); setMsg(null); }}>Create account}
{mode !== 'update' && mode !== 'magic' && { setMode('magic'); setErr(null); setMsg(null); }}>Magic link}
{mode === 'signin' && { setMode('reset'); setErr(null); setMsg(null); }}>Forgot password?}
);
}
function ModalShell({ title, onClose, children }) {
return (