Custom OAuth Popup Window Redirection
I'm building an oauth popup window like google, fb, github etc. I'm able to do the login, but not able to close the window popup once the login is successful.
Example:
1. I open the oauth popup from my website : www.abc.com
2. The URL in the OAuth popup is www.random.com
3. I complete the login process inside the popup: www.random.com. And then It should close the popup and return back the current url or response
Currently, It just redirects back to www.abc.com within the popup itself. Which is of no use.
Does anyone have experience in this? The resources seems to be almost close to none for this.
Maybe its a company secret they don't want to reveal?
7 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Hi @VinnyCodes , Appreciate you very much for responding
Sure, So the tech stacks are
Front End: React
Backend: NodeJs
1. I use window.open and then pass in the url , title , basic options
2. Unfortunately no, I'm not sure how to watch the popup. If it was an iframe I could have used postMessage, but with window.open I am not sure how to detect the url changes. The data I'm looking for is within the url once the login is successful example: www.abc.com/code=23232. I need to fetch the
code from within the popup basically and close the popup
3. That's exactly where I'm stuck with, the closing the window part.
Here is the stackoverflow answer which I have been following, and my code is exactly the same since I couldn't get any other way to work. But unfortunately this doesn't seem to work for me either, but I believe this is as close we can get from google
https://stackoverflow.com/a/58782063/10866113Stack Overflow
OAuth popup cross-domain security React.js
I'm interested in how to implement OAuth in React using popup (window.open).
For example I have:
mysite.com — this is where I open the popup.
passport.mysite.com/oauth/authorize — popup.
The main
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
If you get session and you get user data and there is a provider that knows this stuff wrapping the parent of the popup you can make the parent rerender without the pop up
How to stop the redirect before it disappears hmmmmm not sure
Not too sure how the logic for your popup works, but if you are able to pass a callback into the popup window as an
onComplete or something, you could then do a window.close() once completed.How is the popup opening is it react portals?
Thanks everyone for the valuable suggestions, these gave me ideas to solve it @VinnyCodes @Develliot @SeanCassiere . I have made a break though, 95% there. Will update you guys once I make it 100% a working solution
Ok so the above code works perfectly, So the only issue was I was testing this from a localhost, and the OAuth redirection was happening in the QA env. That is the reason why I was not able to get access to the value in the localstorage.
Thanks everyone for your kind help ❤️