'How do I wrap a SPA React App in a session?

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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source