Hello, this is my first question on Stack Overflow.

I'm trying to add a simple authentication layer using an organization library that relies on AD (Active Directory) and client routing. So I'll need to add a wrapper, there's no need for a Home component.

I've been searching two days about how to add an "parent" layer inside Storybook with no luck.

I've tried to add a global decorator, but it's not working for documentation stories and it's displaying Storybook's UI. (X) This doesn't work for my use case.

After that I've created a CRA app that handles routing, I added a Home page with a login button, and tried to add a catch all route to handle static output from storybook build, it's getting built inside public folder, under a nested one called storybook. (public/storybook/)

<Router>
    <Switch>
        <Route path="/" component={Home} exact />

        <Route path="/storybook/" onEnter={requireAuth} />
        <Redirect to={CONFIG_GENERAL.REDIRECT.path} />
    </Switch>
</Router>

This is failing in client side, because it's been served as a static route, it's been handled server side. (Another issue here would be on built time, there would be two main index files..., one containing the React app that handles authentication routing and the Storybook's one).

I've tried many shots with no luck following this path, so I've started to feel that the only way to handle this is somehow inside Storybook's world, again...

NOTE: Despite I'm starting to feel that the only way to handle authentication is on server side with two different paths, the "home.html" and "storybook.html", this is not how I can do it, I "~must" need it to be client side handled.