DEV Community

Cover image for How we use a popup for Google and Outlook OAuth

How we use a popup for Google and Outlook OAuth

Danielle on April 25, 2019

At Leave Me Alone we use Google and Microsoft OAuth for user sign in. To do this we redirect the user to the relevant login page, the user input th...
Collapse
 
joseat profile image
Jose Álvarez

Hello Danielle.

This article is awesome and i help full very much, but i have a question.
How can inplement this on vue or on native JS ? Because useEffect() is not available on JS only in React.
Thanks

Collapse
 
bl profile image
bl

@joseat Have you found the solution for Vue or native JS?

Collapse
 
jaymefrantz profile image
Jayme Frantz

Hi Danielle, I've using a modified version of your code in my nuxt project and it's about 90% there. However the issue I'm facing is while the google oauth popup is open my callback "receiveMessage" function is being called constantly. I've scattered logs around in the "openSignInWindow" function(and that's not being called in the same way), nor is my version of the "useEffect" function which is set up in my "mounted" vue hook. Can you please help me understand why my callback function is being called while this popup is open? Thanks in advance!

Collapse
 
barryrlmurphy profile image
Barry Murphy

I am currently doing an oauth integration using an Angular SPA, AWS Gateway and AWS Lambda. This article was really a lot of help with the third party consent flow. Because my app is a SPA I really didn't want to go off of the page where the user is taking the action. Thanks 👍

Collapse
 
ssimontis profile image
Scott Simontis

You could also exclude those sites as referrers to fix the analytics. This is good to know though, I can see a lot of uses for your solution!

Collapse
 
dinkydani21 profile image
Danielle

I realised that once I'd implemented the popup solution! But I think I prefer the popup now anyway :)

Collapse
 
ferilevai profile image
ferilevai

Hi Danielle, I've using too a modified version of your code, but although I set the name for the popin, in message I receive data.source as undefined.

Collapse
 
philnash profile image
Phil Nash

I came across this article while trying to implement exactly this and it was a great help. Thank you!

Collapse
 
steeve profile image
Steeve

Thank you Danielle for this awesome article, you have helped me so much 🙏

Collapse
 
ankit_sharma_dc830b82a262 profile image
Ankit Sharma

Thanks for this article. Everything worked as mentioned above :).

Collapse
 
danielsh28 profile image
danielsh28

Hi
great article!
just a little question:
where /when do we need to call openSignInWindow()?

Collapse
 
joseat profile image
Jose Álvarez

Hi Daniel.

You could call openSignInWindow(), for example on your login() button listening onClick event