Address Copilot review: add loading state, error test, refresh test

- Add auth.isLoading handling to token-refresh TokenStatus
- Add error rendering test and refresh button click test
- Fix README to accurately describe both auto and manual refresh
- Regenerate snippets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ksroda-sa

samples/react/token-refresh/README.md

@@ -1,6 +1,11 @@
 # React SPA — Token Refresh
 
-Minimal React app demonstrating token refresh using `react-oidc-context` with the `offline_access` scope. The library automatically exchanges refresh tokens for new access tokens before they expire.
+Minimal React app demonstrating token refresh using `react-oidc-context` with the `offline_access` scope. Tokens are refreshed automatically before they expire, and can also be refreshed manually via a button.
+
+## Prerequisites
+
+- `offline_access` scope enabled on the client
+- `refresh_token` grant type enabled in workspace OAuth settings and in the application's Grant Types
 
 ## Setup
 
@@ -13,4 +18,6 @@ Minimal React app demonstrating token refresh using `react-oidc-context` with th
 
 - OIDC configuration with `offline_access` scope for refresh tokens
 - Automatic token refresh via refresh tokens (no iframe needed)
-- Displaying token expiry and refresh status
+- Manual token refresh via `signinSilent()` button
+- Displaying token expiry information
+- Error handling with OAuth error hints

samples/react/token-refresh/src/App.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 const mockUseAuth = vi.fn();
 const mockSigninSilent = vi.fn();
@@ -14,6 +14,7 @@ vi.mock("react-oidc-context", () => ({
 import App from "./App";
 
 describe("App (Token Refresh)", () => {
+  afterEach(() => cleanup());
   it("renders sign in button when not authenticated", () => {
     mockUseAuth.mockReturnValue({
       isAuthenticated: false,
@@ -37,4 +38,30 @@ describe("App (Token Refresh)", () => {
     expect(screen.getByText("Welcome, Jane")).toBeInTheDocument();
     expect(screen.getByText("Refresh token now")).toBeInTheDocument();
   });
+
+  it("renders error message when authentication fails", () => {
+    mockUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isLoading: false,
+      error: new Error("Unable to refresh token"),
+    });
+    render(<App />);
+    expect(screen.getByText(/Unable to refresh token/)).toBeInTheDocument();
+    expect(screen.getByText("Try again")).toBeInTheDocument();
+  });
+
+  it("calls signinSilent when refresh button is clicked", () => {
+    mockUseAuth.mockReturnValue({
+      isAuthenticated: true,
+      isLoading: false,
+      signinSilent: mockSigninSilent,
+      user: {
+        profile: { given_name: "Jane" },
+        expires_at: Math.floor(Date.now() / 1000) + 3600,
+      },
+    });
+    render(<App />);
+    fireEvent.click(screen.getByText("Refresh token now"));
+    expect(mockSigninSilent).toHaveBeenCalled();
+  });
 });

samples/react/token-refresh/src/App.tsx

@@ -18,6 +18,10 @@ const oidcConfig = {
 function TokenStatus() {
   const auth = useAuth();
 
+  if (auth.isLoading) {
+    return <p>Loading...</p>;
+  }
+
   if (auth.error) {
     const hint = new URLSearchParams(window.location.search).get("error_hint");
     return (

snippets.json

@@ -65,18 +65,18 @@
         {
           "step": 3,
           "description": "Display token status and trigger manual refresh",
-          "code": "function TokenStatus() {\n  const auth = useAuth();\n\n  if (auth.error) {\n    const hint = new URLSearchParams(window.location.search).get(\"error_hint\");\n    return (\n      <div style={{ color: \"red\" }}>\n        <p>Error: {auth.error.message}</p>\n        {hint && <p>{hint}</p>}\n        <button onClick={() => auth.signinRedirect()}>Try again</button>\n      </div>\n    );\n  }\n\n  if (!auth.isAuthenticated) {\n    return <button onClick={() => auth.signinRedirect()}>Sign in</button>;\n  }\n\n  const expiresAt = auth.user?.expires_at\n    ? new Date(auth.user.expires_at * 1000).toLocaleTimeString()\n    : \"unknown\";\n\n  const handleRefresh = async () => {\n    try {\n      await auth.signinSilent();\n    } catch (error) {\n      console.error(\"Token refresh failed:\", error);\n    }\n  };\n\n  return (\n    <div>\n      <p>Welcome, {auth.user?.profile.given_name}</p>\n      <p>Token expires at: {expiresAt}</p>\n      <button onClick={handleRefresh}>Refresh token now</button>\n    </div>\n  );\n}",
+          "code": "function TokenStatus() {\n  const auth = useAuth();\n\n  if (auth.isLoading) {\n    return <p>Loading...</p>;\n  }\n\n  if (auth.error) {\n    const hint = new URLSearchParams(window.location.search).get(\"error_hint\");\n    return (\n      <div style={{ color: \"red\" }}>\n        <p>Error: {auth.error.message}</p>\n        {hint && <p>{hint}</p>}\n        <button onClick={() => auth.signinRedirect()}>Try again</button>\n      </div>\n    );\n  }\n\n  if (!auth.isAuthenticated) {\n    return <button onClick={() => auth.signinRedirect()}>Sign in</button>;\n  }\n\n  const expiresAt = auth.user?.expires_at\n    ? new Date(auth.user.expires_at * 1000).toLocaleTimeString()\n    : \"unknown\";\n\n  const handleRefresh = async () => {\n    try {\n      await auth.signinSilent();\n    } catch (error) {\n      console.error(\"Token refresh failed:\", error);\n    }\n  };\n\n  return (\n    <div>\n      <p>Welcome, {auth.user?.profile.given_name}</p>\n      <p>Token expires at: {expiresAt}</p>\n      <button onClick={handleRefresh}>Refresh token now</button>\n    </div>\n  );\n}",
           "file": "src/App.tsx",
           "lang": "tsx",
-          "lines": "16-55"
+          "lines": "16-59"
         },
         {
           "step": 4,
           "description": "Wrap your app with AuthProvider",
           "code": "export default function App() {\n  return (\n    <AuthProvider {...oidcConfig}>\n      <h1>SecureAuth Token Refresh Demo</h1>\n      <TokenStatus />\n    </AuthProvider>\n  );\n}",
           "file": "src/App.tsx",
           "lang": "tsx",
-          "lines": "58-67"
+          "lines": "62-71"
         }
       ],
       "framework": "react",