Interface ForceAuthProps

The children are rendered if the current user is authenticated.

This component is rendered as fallback if an error occurs during authentication (e.g authentication backend is not available). The actual error that occurred is accessible from within the fallback component via ErrorFallbackProps

Example:

<ForceAuth errorFallback={ErrorFallback}>
  App Content
</ForceAuth>

function ErrorFallback(props: ErrorFallbackProps) {
  return (
    <>
      <Box margin={2} color={"red"}>{props.error.message}</Box>
    </>
  );
}
Copy

These properties will be provided to the AuthFallback component implemented by the authentication plugin.

NOTE: This property is not used when renderFallback is specified.

This property can be used to customize rendering of the error fallback. The renderErrorFallback should be used if inputs other than ErrorFallbackProps are to be used in the error fallback.

NOTE: renderErrorFallback takes precedence before errorFallback.

Example:

const userName = "user1";
<ForceAuth  renderErrorFallback={(e: Error) => (
     <>
         <Box>Could not login {userName}</Box>
         <Box color={"red"}>{e.message}</Box>
      </>
 )}>
  App Content
</ForceAuth>
Copy

This property can be used to customize rendering of the authentication fallback.

The AuthFallback parameter passed to the render prop is the fallback implemented by the authentication plugin. You can customize the rendering of the fallback by implementing this function. For example, AuthFallback could be wrapped with a few parent components.

NOTE: renderFallback takes precedence before fallbackProps.

Example:

<ForceAuth
    renderFallback={(AuthFallback) => {
        return (
            <SomeContainer>
                <AuthFallback foo="bar" />
            </SomeContainer>
        );
    }}
>
    App Content
</ForceAuth>
Copy