// ============================================================================
// auth.jsx — Supabase session + the sign-in / sign-up / reset screens.
//
// Every read goes through an api_* RPC granted to `authenticated`, so the app needs
// a signed-in session before it can show anything. The session is persisted by
// supabase-js in localStorage and auto-refreshed, so a wall-mounted tablet signs in
// once and stays in.
//
// Four screens, one component, switched by `mode`:
// signin email + password
// signup email + password, Google first. If the project requires email
// confirmation it moves on to `inbox`; otherwise they land straight in
// the app (and then on the Connect screen, step 2 of 2).
// inbox "Check your inbox": no form. The emailed link signs them in, and a
// sign-in in another tab of this browser reaches this one too
// (supabase-js broadcasts it), so the screen moves on by itself.
// forgot email → reset link
// recovery reached from the reset link. Supabase signs the user in with a
// short-lived session and fires PASSWORD_RECOVERY; we ask for the new
// password and call updateUser. Until then the app is gated.
//
// Sign-in and sign-up also offer "Continue with Google". Supabase runs the OAuth
// dance and brings the user back to SITE_URL with the session in the URL fragment
// (implicit flow, same as the emailed links), which supabase-js consumes and strips
// on load, so the same onAuthStateChange path lights the app up. A Google account
// whose email already has a password login is linked to it. A denied or failed
// round trip comes back as #error_description=…, which the sign-in card shows.
// ============================================================================
window.sb = window.supabase.createClient(
window.SUNSYNK_CONFIG.url,
window.SUNSYNK_CONFIG.key,
{ auth: { persistSession: true, autoRefreshToken: true, storageKey: 'synsynk.auth' },
global: { fetch: fetchWithRefreshCutoff } }
);
// supabase-js renews an expired sign-in before any other request goes out, holding a
// lock until the renewal answers, and sends it with no time limit. A tablet waking up
// can send it on a connection that died while asleep, so it never answers and every
// read waits behind it ("Couldn't check your SunSynk logins — timed out", SOLAR-21).
// Cut the renewal off after 5 s; supabase-js counts that as a network failure and
// sends it again, on a fresh connection. Only the renewal: sign-up and other calls
// can rightly take longer.
function fetchWithRefreshCutoff(url, opts) {
if (!String(url).includes('grant_type=refresh_token') || (opts && opts.signal)) return fetch(url, opts);
const ctl = new AbortController();
const timer = setTimeout(() => ctl.abort(), 5000);
return fetch(url, { ...opts, signal: ctl.signal }).finally(() => clearTimeout(timer));
}
// Where emailed links (confirmation, password reset) bring the user back to.
const SITE_URL = location.origin + location.pathname.replace(/\/[^/]*$/, '/');
// Resolves once the initial session lookup is done, so the first render doesn't
// flash the login form at an already-signed-in user. `recovering` is true from the
// moment a reset link lands until the user sets a new password.
window.useSession = function useSession() {
const { useState, useEffect } = React;
const [state, setState] = useState({ loading: true, session: null, recovering: false });
useEffect(() => {
let alive = true;
window.sb.auth.getSession().then(({ data }) => {
if (alive) setState(s => ({ ...s, loading: false, session: data.session || null }));
});
const { data: sub } = window.sb.auth.onAuthStateChange((event, session) => {
if (!alive) return;
if (event === 'PASSWORD_RECOVERY') setState({ loading: false, session, recovering: true });
// Whoever signs in next starts on the dashboard, not on the Settings tab the
// last person signed out from.
else if (event === 'SIGNED_OUT') { localStorage.removeItem('synsynk.tab'); setState({ loading: false, session: null, recovering: false }); }
else setState(s => ({ ...s, loading: false, session: session || null,
recovering: event === 'SIGNED_OUT' ? false : s.recovering }));
});
return () => { alive = false; sub.subscription.unsubscribe(); };
}, []);
return { ...state, doneRecovering: () => setState(s => ({ ...s, recovering: false })) };
};
// Eye / eye-with-a-line-through-it, for the reveal toggle.
const EyeIcon = () => (
);
const EyeOffIcon = () => (
);
/** Google's four-colour G, as drawn in their sign-in branding guide. */
const GoogleMark = () => (
);
/** The product's mark, shared by every gate screen. */
function AuthBrand() {
return (
Prince Solar
Your solar history, kept for good.
);
}
/** Labelled password input with a reveal toggle. type="button" on the eye matters:
* inside a form a bare