We have an SPA React App that currently is accessible to anyone. Its backend requests are protected with a bearer token but we also want the frontend to require some authentication but without username/password. The app is called from another of our frontends. So our idea was to send a one time token with the initial call from the main app, verify that token against the shared backend and then initialize a session for the SPA React app that will handle e.g. a page refresh while at the same time preventing URL guessing or sharing a bookmark.

So my question is: what's the easiest way to wrap a React SPA in a session?

We currently do not use React Router, our app uses a nodejs backend with an index controller that servers an index.js. There all the react app stuff takes place: configuration is loaded, redux store created, some async requests are handled, before the App is finally rendered and the User stays within that app without any routing:

 Promise.all(initializationPromises).then(() => {
    store.dispatch(showHome());
    ReactDOM.render(
      <ReduxProvider store={store}>
      <RollbarProvider config={rollbarConfig}>
        <ErrorBoundary fallbackUI={FallbackError}>
            <App/>
        </ErrorBoundary>
      </RollbarProvider>
      </ReduxProvider>,
      document.getElementById("root")
    );
  }

So as part of the initialization promises, we could maybe verify some token header value sent with the initial request. So all I need is init a session in a cookie that should be used for a certain time. Is there some little wrapper that would do the trick? Nothing fancy, just allow a page refresh or back/forward. We can also invalidate the cookie explicitly since the app has a dedicated "back to the main app"/close button. If the app is called again from the main app, the cookie should just refresh on the next index.js call.