refactor: rename OnRedirecting to onRedirecting for consistency

README.md

@@ -236,7 +236,7 @@ import { withAuthenticationRequired } from "react-oidc-context";
 const PrivateRoute = () => (<div>Private</div>);
 
 export default withAuthenticationRequired(PrivateRoute, {
-  OnRedirecting: () => (<div>Redirecting to the login page...</div>)
+  onRedirecting: () => (<div>Redirecting to the login page...</div>)
 });
 ```
 

docs/react-oidc-context.api.md

@@ -147,7 +147,9 @@ export const withAuthenticationRequired: <P extends object>(Component: React_2.C
 // @public (undocumented)
 export interface WithAuthenticationRequiredProps {
     onBeforeSignin?: () => Promise<void> | void;
+    // @deprecated
     OnRedirecting?: () => React_2.JSX.Element;
+    onRedirecting?: () => React_2.JSX.Element;
     signinRedirectArgs?: SigninRedirectArgs;
 }
 

src/withAuthenticationRequired.tsx

@@ -11,6 +11,12 @@ export interface WithAuthenticationRequiredProps {
     /**
      * Show a message when redirected to the signin page.
      */
+    onRedirecting?: () => React.JSX.Element;
+
+    /**
+     * Show a message when redirected to the signin page.
+     * @deprecated Use `onRedirecting` instead.
+     */
     OnRedirecting?: () => React.JSX.Element;
 
     /**
@@ -35,7 +41,7 @@ export const withAuthenticationRequired = <P extends object>(
     Component: React.ComponentType<P>,
     options: WithAuthenticationRequiredProps = {},
 ): React.FC<P> => {
-    const { OnRedirecting = (): React.JSX.Element => <></>, onBeforeSignin, signinRedirectArgs } = options;
+    const { onRedirecting, OnRedirecting, onBeforeSignin, signinRedirectArgs } = options;
     const displayName = `withAuthenticationRequired(${Component.displayName || Component.name})`;
     const C: React.FC<P> = (props) => {
         const auth = useAuth();
@@ -51,7 +57,9 @@ export const withAuthenticationRequired = <P extends object>(
             })();
         }, [auth.isLoading, auth.isAuthenticated, auth]);
 
-        return auth.isAuthenticated ? <Component {...props} /> : OnRedirecting();
+        const renderRedirecting = onRedirecting || OnRedirecting || ((): React.JSX.Element => <></>);
+
+        return auth.isAuthenticated ? <Component {...props} /> : renderRedirecting();
     };
 
     C.displayName = displayName;

test/withAuthenticationRequired.test.tsx

@@ -67,6 +67,33 @@ describe("withAuthenticationRequired", () => {
         authContext.signinRedirect = signinRedirectMock;
         useAuthMock.mockReturnValue(authContext);
 
+        const MyComponent = (): React.JSX.Element => <>Private</>;
+        const onRedirecting = (): React.JSX.Element => <>Redirecting</>;
+        const WrappedComponent = withAuthenticationRequired(MyComponent, {
+            onRedirecting,
+        });
+
+        // act
+        act(() => {
+            render(
+                <AuthProvider {...settingsStub}>
+                    <WrappedComponent />
+                </AuthProvider>,
+            );
+        });
+
+        // assert
+        await screen.findByText("Redirecting");
+    });
+
+    it("should show a custom redirecting message when not authenticated (using deprecated OnRedirecting)", async () => {
+        // arrange
+        const useAuthMock = jest.spyOn(useAuthModule, "useAuth");
+        const authContext = { isLoading: false, isAuthenticated: false } as AuthContextProps;
+        const signinRedirectMock = jest.fn().mockResolvedValue(undefined);
+        authContext.signinRedirect = signinRedirectMock;
+        useAuthMock.mockReturnValue(authContext);
+
         const MyComponent = (): React.JSX.Element => <>Private</>;
         const OnRedirecting = (): React.JSX.Element => <>Redirecting</>;
         const WrappedComponent = withAuthenticationRequired(MyComponent, {