Using local storage for all subdomains in Reactjs

Question

I have 2 subdomains and 1 main page: product.com, expert.product.com and user.product.com.

After user login in the main page: product.com, my code will check which role of user belongs to: expert, user. If user's role is expert, it will direct user to expert.product.com.

I save user to local storage. I would like to use cross-domain local storage in Reactjs. However, I do not know how to use it :(.

Where should I use cross-domain local storage: in repository of main page, expert.product.com or user.product.com? Do I need to set up from my server or cross-domain local storage can be done in front end side? Could anyone help me for this case?

Set localstorage

handleSubmit = event => {
    event.preventDefault();
    api
      .post(`myapi, {
        identifier: this.state.userSignIn.emailSignIn,
        password: this.state.userSignIn.passwordSignIn,
      })

      .then(response => {
        localStorage.setItem('userData', response.data.user);
        localStorage.setItem('user', JSON.stringify(response.data));
        this.setState({ auth: true, open: false, openSignin: false });
        this.props.history.push('/profile');
      })
      .catch(error => {

        console.log('An error occurred:', error);
      });
  };


Get LocalStorage
componentDidMount() {

    if (localStorage.getItem('userData')) {
      const userObject = JSON.parse(localStorage.getItem('user'));
      const jwt = userObject.jwt;
      const config = {
        headers: { 'Authorization': `bearer ${jwt}` },
      };
}

Possible duplicate of [use localStorage across subdomains](https://stackoverflow.com/questions/4026479/use-localstorage-across-subdomains) — Sultan H., Jul 31 '19 at 09:05
You can implement this in the front end. All you have to do is save the content you want to retrieve as an encrypted token. after that you can use `localStorage.getItem(keynameused)`. — Muljayan, Jul 31 '19 at 09:16
@Muljayan yes I saved the user to localStorage already. However, I do not know how to share a localStorage to all subdomains :(. Do you have any ideas for this? in Reactjs — Kevin, Jul 31 '19 at 10:16
You can access the localStorage regardless of the subdomain because localstorage is related to the browser. Have you tried accessing `localStorage.getItem(keynameused)` from the subdomain ? — Muljayan, Jul 31 '19 at 11:01
@Muljayan yes I did. But my browser does not save my localstorage between subdomains :( — Kevin, Jul 31 '19 at 11:13
Could you include the code as to how you are saving and retrieving from local storage? Also what browser are you using ? Also try to inspect element and see if the object you're saving is in localstorage. — Muljayan, Jul 31 '19 at 11:46
@Muljayan I updated my code, please check it if you have time :) thanks. I open the inspect element, the object is only shown in my main page ( product.com) . If I go to expert.product.com or user.product.com, my local storage in those sites are empty :( — Kevin, Jul 31 '19 at 12:11
So I did my a small search up on this and it seems that localstorage is domain specific. Apparently there is some work around using iframes. This link probably has the solution. https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/ — Muljayan, Aug 01 '19 at 03:20
@Muljayan thank you :), I also read it but I do not know how to use it in ReactJS. Where should I create an iframe? Do I need to create any files in server? :( — Kevin, Aug 01 '19 at 05:39

Using local storage for all subdomains in Reactjs

0 Answers0