@udibo/oauth2 0.1.0

package/esm/react/provider.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `<OAuth2Provider>` — wraps the app, wires an {@link OAuth2ClientBase} into
+ * a React context, and re-renders subscribers when the client emits
+ * authentication state changes.
+ *
+ * @module
+ */
+import { useEffect, useMemo, useState } from "react";
+import { toOAuth2Error } from "../errors.js";
+import { OAuth2Context, } from "./context.js";
+const DEFAULT_STATE = {
+    isAuthenticated: false,
+    isLoading: true,
+    user: null,
+    error: null,
+    sessionExpiresIn: null,
+    logoutUrl: null,
+};
+const RENEW_SKEW_SECONDS = 30;
+const MIN_RENEW_MS = 5_000;
+/**
+ * Fraction of the renew delay given up to jitter, applied one-sided so a renew
+ * never lands later than the un-jittered schedule.
+ */
+const RENEW_JITTER = 0.1;
+const isBrowser = () => typeof window !== "undefined";
+/**
+ * Delay before renewing a session that expires in `expiresIn` seconds.
+ *
+ * Floors at {@link MIN_RENEW_MS}, so `0` — which a `DirectClient` reports for
+ * an already-expired token a refresh token can still revive — schedules a
+ * near-immediate renew rather than nothing at all.
+ */
+function renewDelayMs(expiresIn) {
+    const base = Math.max(MIN_RENEW_MS, (expiresIn - RENEW_SKEW_SECONDS) * 1000);
+    return base * (1 - RENEW_JITTER * Math.random());
+}
+/** Seconds until `tokens` expires, or `null` when the server said nothing. */
+function expiresInFrom(tokens) {
+    if (!tokens.accessTokenExpiresAt)
+        return null;
+    return Math.max(0, Math.round((tokens.accessTokenExpiresAt - Date.now()) / 1000));
+}
+/**
+ * Provider — install once near the root of your app. Children read the
+ * state via `useOAuth2()`.
+ *
+ * While authenticated it renews the session on a timer shortly before the
+ * access token expires, re-arming after each renew. Renewal is per tab and
+ * uncoordinated: a `DirectClient` given a refresh-token storage shared across
+ * tabs (e.g. `IndexedDBRefreshTokenStorage`) against a server that
+ * rotates refresh tokens can still have two tabs redeem the same token, which
+ * reuse detection may answer by ending the session everywhere.
+ */
+export function OAuth2Provider(props) {
+    const { client, children, initialState } = props;
+    const [state, setState] = useState(() => ({
+        ...DEFAULT_STATE,
+        isLoading: initialState ? false : true,
+        ...initialState,
+    }));
+    const [renewCount, setRenewCount] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        const handle = (event) => {
+            setState((prev) => reduce(prev, event));
+            // The `authenticated` event carries tokens only, so refetch user claims.
+            if (event.type === "authenticated") {
+                client.getUser().then((user) => {
+                    if (!cancelled)
+                        setState((prev) => ({ ...prev, user }));
+                }, () => { });
+            }
+        };
+        const unsubscribe = client.subscribe(handle);
+        return () => {
+            cancelled = true;
+            unsubscribe();
+        };
+    }, [client]);
+    // Re-sync when the server-resolved state changes (the only signal in BFF
+    // mode, whose callback completes server-side). Keyed on an identity
+    // signature, not the often-inline `initialState` reference, to avoid thrash.
+    const seededAuthenticated = initialState?.isAuthenticated ?? null;
+    const seededUserSub = initialState?.user?.sub ?? null;
+    useEffect(() => {
+        if (!initialState)
+            return;
+        setState((prev) => {
+            const next = {
+                ...DEFAULT_STATE,
+                isLoading: false,
+                ...initialState,
+            };
+            if (prev.isAuthenticated === next.isAuthenticated &&
+                (prev.user?.sub ?? null) === (next.user?.sub ?? null) &&
+                prev.isLoading === next.isLoading) {
+                return prev;
+            }
+            return next;
+        });
+    }, [client, seededAuthenticated, seededUserSub]);
+    useEffect(() => {
+        if (initialState)
+            return;
+        if (!isBrowser())
+            return;
+        let cancelled = false;
+        setState((prev) => ({ ...prev, isLoading: true }));
+        client.getSession().then((session) => {
+            if (!cancelled)
+                setState({ ...session, isLoading: false, error: null });
+        }, (error) => {
+            if (cancelled)
+                return;
+            setState({
+                ...DEFAULT_STATE,
+                isLoading: false,
+                error: toOAuth2Error(error),
+            });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, initialState]);
+    useEffect(() => {
+        if (!isBrowser())
+            return;
+        if (!state.isAuthenticated)
+            return;
+        const expiresIn = state.sessionExpiresIn;
+        if (expiresIn == null || !Number.isFinite(expiresIn) || expiresIn < 0) {
+            return;
+        }
+        let cancelled = false;
+        const delayMs = renewDelayMs(expiresIn);
+        const timer = setTimeout(() => {
+            client.renewSession().then((session) => {
+                if (cancelled)
+                    return;
+                setState((prev) => ({ ...prev, ...session }));
+                setRenewCount((count) => count + 1);
+            }, () => {
+                if (!cancelled)
+                    setRenewCount((count) => count + 1);
+            });
+        }, delayMs);
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [client, state.isAuthenticated, state.sessionExpiresIn, renewCount]);
+    const value = useMemo(() => ({
+        client,
+        ...state,
+    }), [client, state]);
+    return (_jsx(OAuth2Context.Provider, { value: value, children: children }));
+}
+function reduce(prev, event) {
+    switch (event.type) {
+        case "authenticated":
+            return {
+                ...prev,
+                isAuthenticated: true,
+                isLoading: false,
+                error: null,
+                sessionExpiresIn: expiresInFrom(event.tokens),
+            };
+        case "logged_out":
+            return {
+                isAuthenticated: false,
+                isLoading: false,
+                user: null,
+                error: null,
+                sessionExpiresIn: null,
+                logoutUrl: null,
+            };
+        case "token_refreshed":
+            return {
+                ...prev,
+                isLoading: false,
+                error: null,
+                sessionExpiresIn: expiresInFrom(event.tokens),
+            };
+        case "error":
+            return { ...prev, error: toOAuth2Error(event.error) };
+    }
+}

package/esm/react/require-auth.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<RequireAuth>` — gate a subtree behind authentication. If the user is
+ * not authenticated, calls `login({ returnTo })` (the {@link useOAuth2}
+ * action, which navigates the browser to the login / authorize URL) with
+ * `returnTo` set to the current path, and renders a configurable
+ * `fallback` while the redirect is in flight.
+ *
+ * Avoids the `withAuthenticationRequired` re-mount footgun (the HOC
+ * isn't created in render; this component just gates its children).
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+/** Props for {@link RequireAuth}. */
+export interface RequireAuthProps {
+    /** Children rendered when authenticated. */
+    children: ReactNode;
+    /**
+     * What to render while the redirect is being kicked off / the
+     * initial probe is in flight. Defaults to `null` (nothing).
+     */
+    fallback?: ReactNode;
+    /** Optional explicit `returnTo`. Defaults to `window.location.pathname + window.location.search`. */
+    returnTo?: string;
+}
+/**
+ * Render `children` only when authenticated. Otherwise call
+ * `login({ returnTo })` once and render `fallback` while the redirect
+ * is in flight.
+ */
+export declare function RequireAuth(props: RequireAuthProps): ReactNode;

package/esm/react/require-auth.js

@@ -0,0 +1,37 @@
+// deno-lint-ignore-file no-window -- browser-only; `window` used only after isBrowser() guards
+/**
+ * `<RequireAuth>` — gate a subtree behind authentication. If the user is
+ * not authenticated, calls `login({ returnTo })` (the {@link useOAuth2}
+ * action, which navigates the browser to the login / authorize URL) with
+ * `returnTo` set to the current path, and renders a configurable
+ * `fallback` while the redirect is in flight.
+ *
+ * Avoids the `withAuthenticationRequired` re-mount footgun (the HOC
+ * isn't created in render; this component just gates its children).
+ *
+ * @module
+ */
+import { useEffect } from "react";
+import { useOAuth2 } from "./use-oauth2.js";
+const isBrowser = () => typeof window !== "undefined";
+/**
+ * Render `children` only when authenticated. Otherwise call
+ * `login({ returnTo })` once and render `fallback` while the redirect
+ * is in flight.
+ */
+export function RequireAuth(props) {
+    const { children, fallback = null, returnTo } = props;
+    const { isAuthenticated, isLoading, login } = useOAuth2();
+    useEffect(() => {
+        if (isLoading || isAuthenticated)
+            return;
+        if (!isBrowser())
+            return;
+        const target = returnTo ??
+            `${window.location.pathname}${window.location.search}`;
+        login({ returnTo: target }).catch(() => { });
+    }, [isLoading, isAuthenticated, login, returnTo]);
+    if (isLoading || !isAuthenticated)
+        return fallback;
+    return children;
+}

package/esm/react/testing.d.ts

@@ -0,0 +1,322 @@
+/**
+ * Testing helpers for the `@udibo/oauth2/react` adapter.
+ *
+ * Three mock clients and a provider:
+ *
+ * - {@link createMockOAuth2Client} — an `OAuth2ClientBase` with no HTTP,
+ *   PKCE, or storage behind it. Use it for a component written against the
+ *   shared surface.
+ * - {@link createMockBffClient} / {@link createMockDirectClient} — the same
+ *   mock behavior on a real `BffClient` / `DirectClient` subclass, so
+ *   `useBffClient()`, `useDirectClient()`, and `<OAuth2Callback>` accept them.
+ *   Reach for these when the component under test narrows.
+ * - {@link MockOAuth2Provider} — drop-in replacement for `<OAuth2Provider>`
+ *   that skips the initial session probe and accepts any of the three. Use it
+ *   to unit-test components that consume `useOAuth2()` / `<RequireAuth>`
+ *   without any network.
+ *
+ * Every mock emits on the same event bus the real clients use, so a subtree
+ * under a real `<OAuth2Provider>` re-renders just as it would in production.
+ * {@link MockOAuth2Provider} is not live: it seeds its context once from the
+ * client and keeps that snapshot, so a test that needs the state to *change*
+ * mid-render should mount a real `<OAuth2Provider>` around the mock client and
+ * call `signIn` / `signOut` on it. Configure `sessionExpiresIn` to exercise
+ * `<OAuth2Provider>`'s pre-expiry renew timer, and read
+ * {@link MockOAuth2Controls.renewCount} to assert it fired.
+ *
+ * **JSDOM recipes** for component tests in this adapter:
+ *
+ * - `window.location.assign` — the adapter's `login()` / `logout()` (via
+ *   `useOAuth2()` and `<RequireAuth>`) navigate by calling
+ *   `window.location.assign(url)`. JSDOM throws on unhandled navigation;
+ *   stub it: `stub(window.location, "assign", () => {})` (or the
+ *   equivalent for your runner).
+ * - `crypto.subtle` — required for PKCE in a real `DirectClient`. The mocks
+ *   don't use it, so JSDOM tests of components-with-mock-client are
+ *   safe out of the box.
+ * - `sessionStorage` — needed by
+ *   `SessionStorageAuthRequestStorage`. JSDOM ships one; the mocks
+ *   never touch it.
+ * - `history.replaceState` — `<OAuth2Callback>`'s default `onNavigate`
+ *   uses it. JSDOM ships it.
+ *
+ * @module
+ */
+import "../_dnt.polyfills.js";
+import { type ReactNode } from "react";
+import { type AuthorizationRedirect, type BaseLoginOptions, BffClient, DirectClient, type LoginRedirect, type LogoutRedirect, OAuth2ClientBase, type OAuth2Error, type SessionState, type UserInfoClaims } from "../client/mod.js";
+import { type OAuth2State } from "./context.js";
+/** Where a mock client starts. */
+export interface MockOAuth2ClientState {
+    /** Whether the mock starts signed in. Defaults to `user !== null`. */
+    isAuthenticated?: boolean;
+    /** The cached user claims the mock starts with. Defaults to `null`. */
+    user?: UserInfoClaims | null;
+    /** The `logoutUrl` the mock reports while signed in. Defaults to `/auth/logout`. */
+    logoutUrl?: string | null;
+    /**
+     * Seconds the mock reports until expiry. Defaults to `null` (no expiry, so
+     * `<OAuth2Provider>` schedules no renew). Set it to arm the renew timer.
+     */
+    sessionExpiresIn?: number | null;
+}
+/** The state knobs every mock client exposes, whatever it subclasses. */
+export interface MockOAuth2Controls {
+    /**
+     * The starting state the mock was built with, defaults applied — what
+     * {@link MockOAuth2Provider} seeds its context from, so configuring the
+     * client is enough. A snapshot taken at construction: later
+     * `signIn`/`signOut` calls drive the event bus and do not change it.
+     */
+    readonly initialState: Pick<OAuth2State, "isAuthenticated" | "user">;
+    /** How many times `renewSession()` has been called. */
+    readonly renewCount: number;
+    /** Pushes the mock into an authenticated state and emits `authenticated`. */
+    signIn(user?: UserInfoClaims): void;
+    /** Pushes the mock into an unauthenticated state and emits `logged_out`. */
+    signOut(): void;
+    /** Emits `token_refreshed` with a bundle expiring in `expiresIn` seconds. */
+    refreshTokens(expiresIn?: number | null): void;
+    /** Surfaces an error through the event bus. */
+    setError(error: OAuth2Error | unknown): void;
+    /** Replaces the cached user without changing authentication status. */
+    setUser(user: UserInfoClaims | null): void;
+    /** Replaces the reported seconds-to-expiry. */
+    setSessionExpiresIn(seconds: number | null): void;
+}
+/**
+ * A client that satisfies the shared `OAuth2ClientBase` surface without making
+ * a single request.
+ *
+ * Neither a `BffClient` nor a `DirectClient`, so `useBffClient()` and
+ * `useDirectClient()` reject it — that is deliberate, and
+ * {@link createMockBffClient} / {@link createMockDirectClient} are what a
+ * narrowing component wants.
+ */
+export declare class MockOAuth2Client extends OAuth2ClientBase implements MockOAuth2Controls {
+    #private;
+    /**
+     * Builds a mock client and snapshots its starting state.
+     *
+     * @param state Where the mock starts. Everything is optional; the default
+     * is a signed-out client.
+     */
+    constructor(state?: MockOAuth2ClientState);
+    /** The starting state, defaults applied. */
+    get initialState(): Pick<OAuth2State, "isAuthenticated" | "user">;
+    /** How many times `renewSession()` has been called. */
+    get renewCount(): number;
+    /** Resolves a fixed `mock://login` URL without touching any network. */
+    login(_options?: BaseLoginOptions): Promise<LoginRedirect>;
+    /** Drops to signed out, emits `logged_out`, and returns no redirect URL. */
+    logout(): Promise<LogoutRedirect>;
+    /** The mock's current user, or `null` while signed out. */
+    getUser(): Promise<UserInfoClaims | null>;
+    /** The mock's current state. */
+    getSession(): Promise<SessionState>;
+    /** Counts the call and re-reads {@link getSession}. */
+    renewSession(): Promise<SessionState>;
+    /** Passes straight through to `globalThis.fetch` with no auth attached. */
+    fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+    /** Pushes the mock into an authenticated state and emits `authenticated`. */
+    signIn(user?: UserInfoClaims): void;
+    /** Pushes the mock into an unauthenticated state and emits `logged_out`. */
+    signOut(): void;
+    /** Emits `token_refreshed` with a bundle expiring in `expiresIn` seconds. */
+    refreshTokens(expiresIn?: number | null): void;
+    /** Surfaces an error through the event bus. */
+    setError(error: OAuth2Error | unknown): void;
+    /** Replaces the cached user without changing authentication status. */
+    setUser(user: UserInfoClaims | null): void;
+    /** Replaces the reported seconds-to-expiry. */
+    setSessionExpiresIn(seconds: number | null): void;
+}
+/**
+ * A real `BffClient` whose four session operations answer from mock state
+ * instead of the BFF. `useBffClient()` accepts it.
+ */
+export declare class MockBffClient extends BffClient implements MockOAuth2Controls {
+    #private;
+    /**
+     * Builds a mock client and snapshots its starting state.
+     *
+     * @param state Where the mock starts. Everything is optional; the default
+     * is a signed-out client.
+     */
+    constructor(state?: MockOAuth2ClientState);
+    /** The starting state, defaults applied. */
+    get initialState(): Pick<OAuth2State, "isAuthenticated" | "user">;
+    /** How many times `renewSession()` has been called. */
+    get renewCount(): number;
+    /** Resolves a fixed `mock://login` URL, bypassing the BFF's URL builder. */
+    login(_options?: BaseLoginOptions): Promise<LoginRedirect>;
+    /** Drops to signed out and returns no redirect URL. */
+    logout(): Promise<LogoutRedirect>;
+    /** The mock's current user, with no session probe. */
+    getUser(): Promise<UserInfoClaims | null>;
+    /** The mock's current state, with no session probe. */
+    getSession(): Promise<SessionState>;
+    /** Counts the call and re-reads {@link getSession}. */
+    renewSession(): Promise<SessionState>;
+    /** Passes straight through to `globalThis.fetch`. */
+    fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+    /** Pushes the mock into an authenticated state and emits `authenticated`. */
+    signIn(user?: UserInfoClaims): void;
+    /** Pushes the mock into an unauthenticated state and emits `logged_out`. */
+    signOut(): void;
+    /** Emits `token_refreshed` with a bundle expiring in `expiresIn` seconds. */
+    refreshTokens(expiresIn?: number | null): void;
+    /** Surfaces an error through the event bus. */
+    setError(error: OAuth2Error | unknown): void;
+    /** Replaces the cached user without changing authentication status. */
+    setUser(user: UserInfoClaims | null): void;
+    /** Replaces the reported seconds-to-expiry. */
+    setSessionExpiresIn(seconds: number | null): void;
+}
+/**
+ * A real `DirectClient` whose session operations answer from mock state
+ * instead of a token endpoint. `useDirectClient()` and `<OAuth2Callback>`
+ * accept it.
+ *
+ * The token-holding methods it does **not** override (`refresh`,
+ * `handleAuthorizationCallback`, `introspect`, …) still reach for the network.
+ * Stub the one your test drives, or point a real `DirectClient` at
+ * `createMemoryAuthorizationServer().fetch` instead.
+ */
+export declare class MockDirectClient extends DirectClient implements MockOAuth2Controls {
+    #private;
+    /**
+     * Builds a mock client and snapshots its starting state.
+     *
+     * @param state Where the mock starts. Everything is optional; the default
+     * is a signed-out client.
+     */
+    constructor(state?: MockOAuth2ClientState);
+    /** The starting state, defaults applied. */
+    get initialState(): Pick<OAuth2State, "isAuthenticated" | "user">;
+    /** How many times `renewSession()` has been called. */
+    get renewCount(): number;
+    /** Resolves a fixed `mock://login` URL, skipping PKCE and storage. */
+    login(_options?: BaseLoginOptions): Promise<AuthorizationRedirect>;
+    /** Drops to signed out without revoking anything. */
+    logout(): Promise<LogoutRedirect>;
+    /** The mock's current user, with no token read. */
+    getUser(): Promise<UserInfoClaims | null>;
+    /** The mock's current state, with no token read. */
+    getSession(): Promise<SessionState>;
+    /** Counts the call and re-reads {@link getSession}. */
+    renewSession(): Promise<SessionState>;
+    /** Passes straight through to `globalThis.fetch`, attaching no bearer. */
+    fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+    /** Resolves the mock access token without touching storage. */
+    getAccessToken(): Promise<string>;
+    /** Pushes the mock into an authenticated state and emits `authenticated`. */
+    signIn(user?: UserInfoClaims): void;
+    /** Pushes the mock into an unauthenticated state and emits `logged_out`. */
+    signOut(): void;
+    /** Emits `token_refreshed` with a bundle expiring in `expiresIn` seconds. */
+    refreshTokens(expiresIn?: number | null): void;
+    /** Surfaces an error through the event bus. */
+    setError(error: OAuth2Error | unknown): void;
+    /** Replaces the cached user without changing authentication status. */
+    setUser(user: UserInfoClaims | null): void;
+    /** Replaces the reported seconds-to-expiry. */
+    setSessionExpiresIn(seconds: number | null): void;
+}
+/**
+ * Builds a {@link MockOAuth2Client}. No HTTP, no storage, no PKCE — just
+ * state and an event bus that the React adapter reads through the provider.
+ *
+ * @param initialState Where the mock starts.
+ * @returns The mock client, ready to hand to a provider.
+ *
+ * @example
+ * ```tsx
+ * import { createMockOAuth2Client, MockOAuth2Provider } from
+ *   "@udibo/oauth2/react/testing";
+ *
+ * const client = createMockOAuth2Client({ user: { sub: "u1" } });
+ * render(
+ *   <MockOAuth2Provider client={client}>
+ *     <Header />
+ *   </MockOAuth2Provider>,
+ * );
+ * ```
+ */
+export declare function createMockOAuth2Client(initialState?: MockOAuth2ClientState): MockOAuth2Client;
+/**
+ * Builds a {@link MockBffClient} — mock state on a real `BffClient`, so a
+ * component that calls `useBffClient()` can be unit-tested.
+ *
+ * @param initialState Where the mock starts.
+ * @returns The mock client, ready to hand to a provider.
+ *
+ * @example
+ * ```tsx
+ * import { createMockBffClient, MockOAuth2Provider } from
+ *   "@udibo/oauth2/react/testing";
+ *
+ * const client = createMockBffClient({ user: { sub: "u1" } });
+ * render(
+ *   <MockOAuth2Provider client={client}>
+ *     <SignInLink returnTo="/dashboard" />
+ *   </MockOAuth2Provider>,
+ * );
+ * ```
+ */
+export declare function createMockBffClient(initialState?: MockOAuth2ClientState): MockBffClient;
+/**
+ * Builds a {@link MockDirectClient} — mock state on a real `DirectClient`, so
+ * a component that calls `useDirectClient()` (or mounts `<OAuth2Callback>`)
+ * can be unit-tested.
+ *
+ * @param initialState Where the mock starts.
+ * @returns The mock client, ready to hand to a provider.
+ *
+ * @example
+ * ```tsx
+ * import { createMockDirectClient, MockOAuth2Provider } from
+ *   "@udibo/oauth2/react/testing";
+ *
+ * const client = createMockDirectClient({ user: { sub: "u1" } });
+ * render(
+ *   <MockOAuth2Provider client={client}>
+ *     <TokenReadout />
+ *   </MockOAuth2Provider>,
+ * );
+ * ```
+ */
+export declare function createMockDirectClient(initialState?: MockOAuth2ClientState): MockDirectClient;
+/** Props for {@link MockOAuth2Provider}. */
+export interface MockOAuth2ProviderProps {
+    /**
+     * Built via {@link createMockOAuth2Client}, {@link createMockBffClient}, or
+     * {@link createMockDirectClient}.
+     */
+    client: OAuth2ClientBase & MockOAuth2Controls;
+    /**
+     * Optional initial state override, applied key by key: a key you pass wins
+     * (including `user: null`), a key you omit falls back to the mock client's
+     * {@link MockOAuth2Controls.initialState} for `isAuthenticated` / `user` and
+     * to the signed-out default for the rest. So a test configures the client
+     * once instead of restating the same user here.
+     */
+    state?: Partial<OAuth2State>;
+    /** The subtree rendered under the mock provider. */
+    children: ReactNode;
+}
+/**
+ * Drop-in replacement for `<OAuth2Provider>` that skips the on-mount
+ * session probe (the mock clients don't issue one) and surfaces the
+ * mock state synchronously.
+ *
+ * The context it publishes is a snapshot of the client as it was built (plus
+ * any `state` overrides): it subscribes to nothing, so calling `signIn` /
+ * `signOut` on the client afterwards does not re-render the subtree. Render
+ * the state you want, or use a real `<OAuth2Provider>` when the test is about
+ * a transition.
+ *
+ * @param props A mock client, optional state overrides, and children.
+ * @returns The subtree wrapped in a pre-resolved OAuth2 context.
+ */
+export declare function MockOAuth2Provider(props: MockOAuth2ProviderProps): ReactNode;