Managing a dynamic subdomain in a JS application (React)

Question

I am relatively new to JS / React. Most of my development experience comes from the Rails world.

I currently have a one-page React Web application that connects to the Rails 5 API. For authentication purposes, I use devise_token_auth in my Rails application. In addition, on the client side, I have already implemented the React router and successfully created a login process that saves the user state in my Redux repository.

One thing I don’t know how to solve is dynamic subdomains. You see, in my application, each user will belong to the company, and each company should have its own unique subdomain, i.e. companya.foo.com, companyb.foo.com. The user must be redirected to the subdomain after logging in with foo.com. All requests for the logged in user must store them on their subdomain. Once released, they should be redirected back to foo.com.

I read that this is not possible with the React Router and browser APIs, but should there be a way to achieve this? I also saw some .htaccess suggestions, but I'm completely unfamiliar with this approach, and I'm not sure if this will handle dynamic redirects?

What should be an intuitive approach to solving this problem?

Answer 1

Check out this link. This should be useful -https://medium.com/@MahmoudAlyuDeen/our-approach-to-multitenancy-with-reactjs-1630be8bec4e