diff --git a/README.md b/README.md
index fd7aaccd..61e4feaa 100644
--- a/README.md
+++ b/README.md
@@ -236,7 +236,7 @@ import { withAuthenticationRequired } from "react-oidc-context";
const PrivateRoute = () => (
Private
);
export default withAuthenticationRequired(PrivateRoute, {
- OnRedirecting: () => (Redirecting to the login page...
)
+ onRedirecting: () => (Redirecting to the login page...
)
});
```
diff --git a/docs/react-oidc-context.api.md b/docs/react-oidc-context.api.md
index 7d00958b..56dfd97d 100644
--- a/docs/react-oidc-context.api.md
+++ b/docs/react-oidc-context.api.md
@@ -147,7 +147,9 @@ export const withAuthenticationRequired: (Component: React_2.C
// @public (undocumented)
export interface WithAuthenticationRequiredProps {
onBeforeSignin?: () => Promise | void;
+ // @deprecated
OnRedirecting?: () => React_2.JSX.Element;
+ onRedirecting?: () => React_2.JSX.Element;
signinRedirectArgs?: SigninRedirectArgs;
}
diff --git a/src/withAuthenticationRequired.tsx b/src/withAuthenticationRequired.tsx
index 2b2e7375..86030aa0 100644
--- a/src/withAuthenticationRequired.tsx
+++ b/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 = (
Component: React.ComponentType
,
options: WithAuthenticationRequiredProps = {},
): React.FC
=> {
- 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
= (props) => {
const auth = useAuth();
@@ -51,7 +57,9 @@ export const withAuthenticationRequired =
(
})();
}, [auth.isLoading, auth.isAuthenticated, auth]);
- return auth.isAuthenticated ? : OnRedirecting();
+ const renderRedirecting = onRedirecting || OnRedirecting || ((): React.JSX.Element => <>>);
+
+ return auth.isAuthenticated ? : renderRedirecting();
};
C.displayName = displayName;
diff --git a/test/withAuthenticationRequired.test.tsx b/test/withAuthenticationRequired.test.tsx
index f0ced8c7..fc86729d 100644
--- a/test/withAuthenticationRequired.test.tsx
+++ b/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(
+
+
+ ,
+ );
+ });
+
+ // 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, {