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, {