60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T185c,// title: Issue Detail "use client"; import { CalendarIcon, CircleDotIcon, FlagIcon, MessageSquareIcon, PaperclipIcon, SendIcon, TagIcon, } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/default/ui/avatar"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Sheet, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPopup, SheetTitle, SheetTrigger, } from "@/registry/default/ui/sheet"; import { Textarea } from "@/registry/default/ui/textarea"; const comments = [ { avatar: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=64&h=64&dpr=2&q=80", body: "I think we should also handle the edge case where the session token expires mid-request. Should we add a refresh flow?", id: 1, initials: "MK", name: "Marcus Kim", time: "2 hr ago", }, { avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&dpr=2&q=80", body: "Good point. I'll add that to the acceptance criteria. The refresh logic can live in the auth middleware.", id: 2, initials: "SC", name: "Sarah Chen", time: "1 hr ago", }, ]; const meta = [ { icon: CircleDotIcon, label: "Status", value: In Progress, }, { icon: FlagIcon, label: "Priority", value: High, }, { icon: CalendarIcon, label: "Due date", value: Nov 14, 2026, }, { icon: TagIcon, label: "Labels", value: (

auth backend

), }, ]; export function Pattern() { const [comment, setComment] = useState(""); return (

Implement session refresh for expired auth tokens

Issue #117 · opened 3 days ago

{meta.map(({ icon: Icon, label, value }) => (

))}

Description

When a user's session token expires mid-request, the app should silently refresh the token using the refresh token stored in an HttpOnly cookie and retry the original request without any user interruption.

Comments ({comments.length})

{comments.map((c) => (

{c.initials}

{c.name} {c.time}

{c.body}

))}

setComment(e.target.value)}
                  placeholder="Leave a comment…"
                  value={comment}
                />
              </div>
            </div>
          </SheetPanel>
          <SheetFooter>
            <div className="flex w-full items-center justify-between gap-2">
              <Button size="icon" variant="ghost">
                <PaperclipIcon className="size-4" />
              </Button>
              <div className="flex gap-2">
                <SheetClose render={<Button variant="ghost" />}>
                  Close
                </SheetClose>
                <Button disabled={!comment.trim()}>
                  <SendIcon className="size-3.5" />
                  Comment
                </Button>
              </div>
            </div>
          </SheetFooter>
        </SheetPopup>
      </Sheet>
    </div>
  );
}
5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["@cnippet/sheet"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/default/variants/v-sheet-10.tsx","content":"$62","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>