Default customisable components to render nothing [requires api change - thoughts?]

Hey 😃

So I’ve got an initial setup that looks like this:

  <AuthenticationProvider
    configuration={oidcConfiguration}
    loggerLevel={oidcLog.DEBUG}
    notAuthenticated={() => null}
    notAuthorized={() => null}
    authenticating={() => null}
  >

I’d also like to have a null component returned for the callback component, as outlinded in this issue: https://github.com/AxaGuilDEv/react-oidc/issues/181, but until that issue is resolved this is not yet possible.

While trying to test this on my consuming application, I am currently looking at mocking out the <AuthenticationProvider> at the unit test level, and having a mock for withOidcSecure() which proves this function is called when rendering protected routes.

I am planning to properly test the oidc logic using an integration test that uses something like testcafe. This will login to our identity provider and prove the logic works properly.

However, the unit tests have code coverage running on them, and the lines exposed by the above props that are returning null will be uncovered by the unit tests using this setup.

While thinking about this problem, I thought it might make sense to ask you to consider changing this api so that these components all render nothing unless explicitly passed in a React component. This behaviour would still allow for any custom component to be rendered, but would by default display nothing to the end user, it would just redirect them.

If you are happy to make this change (I appreciate this is a breaking API change so may require a major version release), I’d be happy to pick up this work and make the required changes myself. I don’t want to do this if you don’t agree with the idea though.

Can you please let me know what you think, and if you like this idea I’ll have a go at this myself probably early next week (earliest I think I’d be able to do this would be next week).

Just to clarify what you’d end up with. If we made these changes, then this:

  <AuthenticationProvider
    configuration={oidcConfiguration}
    loggerLevel={oidcLog.DEBUG}
  >

Would render no text to the user, but would handle the redirection and callback logic, eventually bouncing a user back into their application on successful login.

Whereas this:

  <AuthenticationProvider
    configuration={oidcConfiguration}
    loggerLevel={oidcLog.DEBUG}
    notAuthenticated={() => <h1>Authenticated!</h1>}
    notAuthorized={() => <h1>Not Authorized!</h1>}
    authenticating={() => <h1>Authenticating</h1>}
    callback={() => <h1>Callback component</h1>}
  >

Would render the respective components.

As to whether the callback is part of this piece of work or not would depend on a discussion between ourselves.

Please let me know what you think!

[youf-olivier]

Hello you both.

I’m working hard on a new version with Hooks. I will introduce the customized component in the version.

The PR will come in few days.

[citypaul]

Hey @guillaumechervetaxa, sounds cool! Nice work 😃 🎉