Cross-Domain Authentication and Session Sharing Between Multiple Parent Websites and a Common Child App

by

I have a website with a URL of (www.parent1.com), and inside this parent1 website there is an iframe. In the iframe, I’m loading a React app with a URL of (www.child.com) and login to the child app inside the iframe of the (parent1.com) website. There is another parent website with a URL of (www.parent2.com), and this site also has an iframe inside it that loads the same child app with the URL of (child.com). What I want is that if I login to the child app of (parent1.com) and if I open (parent2.com) in another tab, the child app of (parent2.com) should be logged in. Please give me your ideas on how to achieve this.

The problem I’m facing is that even though I login to the child app (child.com) in the iframe of the (parent1.com) website, And then, if I open the (parent2.com) website in another tab, the child app (child.com) in the iframe of (parent2.com) is not logged in.

In each parent website there is a phone number field. On phone input change I’m calling to an API and finds if there is a valid user for the given number. if the user is valid, I’m sending an OTP to that number and if the user enters the correct OTP, I’m getting an access token which can be used to login to the react app (child app). Then from the parent website I’m sending the token to the react app through postMessage. In the react app it listens to message event and if the token is available the react app will be logged-in.

  • How do you save the session information? Do you have access to the react app and can adjust things within it?

    – 

  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer.

    – 
    Bot

  • @Geshode the question is updated which will answer your question, thanks.

    – 




  • Can you not save the token in a cookie and check for it, when opening a parent site. If it is there, send it.

    – 

  • @Geshode I tried it, but the problem is that when I save cookies in (www.parent1.com) site, they are not accessible in (www.parent2.com) site.

    – 

I found this article which lets us share data between cross origin. Seems like a good answer and could solve your issue. After sharing data between 2 domains you can then pass it to iframe.
https://avinashsdalvi.medium.com/cross-domain-sharing-resources-like-login-cookies-f12ca54eae44

Leave a Comment