fix: auth cache after login

apps/web/src/components/AuthForms.tsx

@@ -129,13 +129,19 @@ export function SsoLoginButton({
 export function AuthPageShell({
   children,
   subtitle = "Turn mailboxes into issue boards.",
+  cardClassName,
 }: {
   children?: ReactNode;
   subtitle?: string;
+  cardClassName?: string;
 }) {
   return (
     <div className={styles.container}>
-      <div className={[styles.card, styles.loginCard].join(" ")}>
+      <div
+        className={[styles.card, styles.loginCard, cardClassName]
+          .filter(Boolean)
+          .join(" ")}
+      >
         <img
           src="/favicon.png"
           alt=""
@@ -146,7 +152,7 @@ export function AuthPageShell({
         <h1 className={styles.title}>
           Service<span className={styles.titleAccent}>Beard</span>
         </h1>
-        <p className={styles.subtitle}>{subtitle}</p>
+        {subtitle ? <p className={styles.subtitle}>{subtitle}</p> : null}
         {children}
       </div>
     </div>

apps/web/src/components/OnboardingPopover.module.css

@@ -0,0 +1,48 @@
+.anchor {
+  position: relative;
+  display: inline-flex;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + var(--space-3));
+  right: 0;
+  width: min(20rem, calc(100vw - var(--space-8)));
+  padding: var(--space-4);
+  background: var(--color-surface);
+  border: var(--border-width) solid var(--color-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+}
+
+.popover::before {
+  content: "";
+  position: absolute;
+  top: calc(-1 * var(--space-2));
+  right: var(--space-6);
+  width: var(--space-3);
+  height: var(--space-3);
+  background: var(--color-surface);
+  border-top: var(--border-width) solid var(--color-primary);
+  border-left: var(--border-width) solid var(--color-primary);
+  transform: rotate(45deg);
+}
+
+.title {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-sm);
+  font-weight: 700;
+}
+
+.body {
+  margin: 0 0 var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}

apps/web/src/components/OnboardingPopover.tsx

@@ -0,0 +1,51 @@
+import { Button } from "./Button";
+import styles from "./OnboardingPopover.module.css";
+
+interface OnboardingPopoverProps {
+  open: boolean;
+  title: string;
+  children: React.ReactNode;
+  onDismiss: () => void;
+}
+
+export function OnboardingPopover({
+  open,
+  title,
+  children,
+  onDismiss,
+}: OnboardingPopoverProps) {
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.popover}
+      role="dialog"
+      aria-labelledby="onboarding-popover-title"
+      aria-live="polite"
+    >
+      <h3 id="onboarding-popover-title" className={styles.title}>
+        {title}
+      </h3>
+      <p className={styles.body}>{children}</p>
+      <div className={styles.actions}>
+        <Button type="button" onClick={onDismiss}>
+          Got it
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function OnboardingAnchor({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={[styles.anchor, className].filter(Boolean).join(" ")}>
+      {children}
+    </div>
+  );
+}

apps/web/src/hooks/useAuthEntry.ts

@@ -7,13 +7,21 @@ import {
   getLastUsedSignInMethod,
   setLastUsedSignInMethod,
 } from "../lib/lastSignInMethod";
+import { shouldShowWelcome } from "../lib/onboarding";
 import {
   authenticateWithPasskey,
   passkeyErrorMessage,
   registerPasskey,
 } from "../lib/passkey";
+import { appQueries, queryClient, queryKeys } from "../lib/queryClient";
 import { normalizeRedirectPath } from "../lib/redirect";
 
+type AuthUser = { id: string; email: string; name: string | null };
+
+function syncAuthAfterLogin(user: AuthUser) {
+  queryClient.setQueryData(queryKeys.auth.me, { user });
+}
+
 export function useAuthEntry(search: { redirect?: string; error?: string }) {
   const navigate = useNavigate();
   const { data: authConfig, isPending: configLoading } = useQuery({
@@ -32,12 +40,20 @@ export function useAuthEntry(search: { redirect?: string; error?: string }) {
   const providers = authConfig?.providers ?? [];
   const configLoaded = !configLoading;
 
-  const redirectAfterAuth = () => {
+  const redirectAfterAuth = async (user: AuthUser) => {
     const path = normalizeRedirectPath(search.redirect);
     if (path) {
       window.location.href = path;
       return;
     }
+    const [{ teams }, { invites }] = await Promise.all([
+      queryClient.fetchQuery(appQueries.teams()),
+      queryClient.fetchQuery(appQueries.pendingInvites()),
+    ]);
+    if (shouldShowWelcome(user.id, teams.length, invites.length)) {
+      navigate({ to: "/welcome" });
+      return;
+    }
     navigate({ to: "/" });
   };
 
@@ -99,13 +115,14 @@ export function useAuthEntry(search: { redirect?: string; error?: string }) {
         ...credentials,
         mode: "login",
       });
-      if ("requiresVerification" in result && result.requiresVerification) {
+      if ("requiresVerification" in result) {
         setInfo(result.message);
         setPendingVerificationEmail(credentials.email);
         setLoading(false);
         return;
       }
-      redirectAfterAuth();
+      syncAuthAfterLogin(result.user);
+      await redirectAfterAuth(result.user);
     } catch (err) {
       if (err instanceof ApiError && err.code === "email_not_verified") {
         setPendingVerificationEmail(credentials.email);
@@ -129,13 +146,14 @@ export function useAuthEntry(search: { redirect?: string; error?: string }) {
         ...credentials,
         mode: "signup",
       });
-      if ("requiresVerification" in result && result.requiresVerification) {
+      if ("requiresVerification" in result) {
         setInfo(result.message);
         setPendingVerificationEmail(credentials.email);
         setLoading(false);
         return;
       }
-      redirectAfterAuth();
+      syncAuthAfterLogin(result.user);
+      await redirectAfterAuth(result.user);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Sign-up failed");
       setLoading(false);
@@ -147,8 +165,9 @@ export function useAuthEntry(search: { redirect?: string; error?: string }) {
     setLoading(true);
     setError("");
     try {
-      await authenticateWithPasskey(type);
-      redirectAfterAuth();
+      const result = await authenticateWithPasskey(type);
+      syncAuthAfterLogin(result.user);
+      await redirectAfterAuth(result.user);
     } catch (err) {
       setError(
         passkeyErrorMessage(
@@ -172,13 +191,14 @@ export function useAuthEntry(search: { redirect?: string; error?: string }) {
     setPendingVerificationEmail("");
     try {
       const result = await registerPasskey(type, input);
-      if ("requiresVerification" in result && result.requiresVerification) {
+      if ("requiresVerification" in result) {
         setInfo(result.message);
         setPendingVerificationEmail(input.email);
         setLoading(false);
         return;
       }
-      redirectAfterAuth();
+      syncAuthAfterLogin(result.user);
+      await redirectAfterAuth(result.user);
     } catch (err) {
       setError(
         passkeyErrorMessage(

apps/web/src/lib/onboarding.ts

@@ -0,0 +1,49 @@
+type OnboardingPhase = "welcome" | "project-hint" | "done";
+
+const STORAGE_PREFIX = "servicebeard:onboarding:";
+
+function storageKey(userId: string) {
+  return `${STORAGE_PREFIX}${userId}`;
+}
+
+function getOnboardingPhase(userId: string): OnboardingPhase | null {
+  try {
+    const value = localStorage.getItem(storageKey(userId));
+    if (value === "welcome" || value === "project-hint" || value === "done") {
+      return value;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function setOnboardingPhase(userId: string, phase: OnboardingPhase) {
+  try {
+    localStorage.setItem(storageKey(userId), phase);
+  } catch {
+    // Ignore quota / private browsing errors.
+  }
+}
+
+export function shouldShowWelcome(
+  userId: string,
+  teamCount: number,
+  pendingInviteCount: number,
+): boolean {
+  if (teamCount > 0 || pendingInviteCount > 0) return false;
+  const phase = getOnboardingPhase(userId);
+  return phase !== "done" && phase !== "project-hint";
+}
+
+export function markWelcomeComplete(userId: string) {
+  setOnboardingPhase(userId, "project-hint");
+}
+
+export function isProjectHintPending(userId: string): boolean {
+  return getOnboardingPhase(userId) === "project-hint";
+}
+
+export function markOnboardingDone(userId: string) {
+  setOnboardingPhase(userId, "done");
+}

apps/web/src/lib/queryClient.ts

@@ -50,6 +50,24 @@ type RefreshAppRoutesOptions = {
   teamId?: string;
 };
 
+export function prependCreatedTeamToCache(team: {
+  id: string;
+  name: string;
+  slug: string;
+}) {
+  queryClient.setQueryData<{
+    teams: Array<{ id: string; name: string; slug: string; role: string }>;
+  }>(queryKeys.teams.all, (existing) => {
+    if (existing?.teams.some((entry) => entry.id === team.id)) {
+      return existing;
+    }
+
+    return {
+      teams: [{ ...team, role: "owner" }, ...(existing?.teams ?? [])],
+    };
+  });
+}
+
 export async function refreshAppRoutes(
   router: { invalidate: () => Promise<void> },
   options: RefreshAppRoutesOptions = {},

apps/web/src/pages/DashboardPage.tsx

@@ -20,7 +20,10 @@ import {
 import { api } from "../lib/api";
 import { iconMd } from "../lib/icons";
 import type { AppUser, TeamSummary } from "../lib/loaderTypes";
-import { refreshAppRoutes } from "../lib/queryClient";
+import {
+  prependCreatedTeamToCache,
+  refreshAppRoutes,
+} from "../lib/queryClient";
 import styles from "../styles/pages.module.css";
 
 type DashboardPageProps = {
@@ -49,7 +52,8 @@ export function DashboardPage({
         slug: slugifyName(name),
       }),
     onSuccess: async (team) => {
-      await refreshAppRoutes(router, { pendingInvites: true });
+      prependCreatedTeamToCache(team);
+      await refreshAppRoutes(router, { pendingInvites: true, teamId: team.id });
       setShowCreate(false);
       setName("");
       navigate({ to: "/teams/$teamId/projects", params: { teamId: team.id } });