No Props sent to Secure React Hook Component

Help
1

In a react application I’ve followed The Complete Guide to React User Authentication with Auth0 in order to implement the authentication in what I think is the most updated way but for some reason my secure views are not receiving custom props.

How the route is being defined

<SecureRoute exact path='/alerts' {...props} component={AlertsView} />

How SecureRoute is implemented

const SecureRouteFC: React.FC<RoutedProps<BaseProps>> = (props: RoutedProps<BaseProps>) => {
  const { getAccessTokenSilently, loginWithRedirect, isLoading, isAuthenticated } = useAuth0();
  const { authenticate } = props;

  if (!isLoading && !props.isAuthenticated) {
    getAccessTokenSilently().then((token: string) => {
      authenticate?.(token, undefined);
    });
  }

  if (!isAuthenticated && !isLoading) {
    loginWithRedirect();
  } else if (!isLoading && isAuthenticated) {
    const component = withAuthenticationRequired(props.component, {});

    return <Route component={component} {...props} message='This wont reach the component' />;
  }

  return <LoadingComponent {...props} />;
};

All components are declared the same way:

export const AlertsView: React.FC<BaseProps> = (props: BaseProps) => {

  return (<div className='sastrix-alerts'>{props.message}</div>);

}

Some views connects with Redux but even the ones not connected are not receiving not even a simple temporary message added to the secure route in order to track where the information is getting lost.

Any ideas on what I might be doing wrong?

Thank you,
Daniel Santana

2

Use state and other React features without writing a class. React doesn’t offer a way to “attach” reusable behavior to a component (for with patterns like render props and higher-order components that try to solve this. After you give Hooks a try, please feel free to send us feedback, positive or negative.

3

Thank you for your feedback.

I’m actually not using classes, only React.FC.

any other suggestion ?