😖Some values you need are missing from in kcContext type definitions?

Extending the KcContext type definition

The kcContext type definitions only includes what the default pages actually uses.

However, at runtime there is much more information in the kcContext that what TypeScript is aware of!

A common scenario is when you want, on the register page to enable sign-up via Google or Facebook but the kcContext.social object isn't defined:

kcContext.social not defined in the KcContext type on the register page.

Here is how you would go about addressing this usecase for this particular usecase:

First step is to extend the KcContext type:

Declaring that there is a social property on the kcContext of the register page and this social object is of the same type as the one present on the login page.

Secont step is to augment the KcContext base mocks for testing in Storybook:

We say that the social object of the mock of the register page kcContext is the same as the social object on the mock of the login page kcContext

Then you can use the kcContext.social object in the register page just as you would on the login page:

Applying the same socialProviderNode on the register page as the one applied in the login page.