At 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 their details, and is then directed back to our site and logged in. An unfortunate result of this is that our analytics report a great deal of referral traffic coming from “accounts.google.com” and “login.microsoft.com”. Leave Me Alone To solve this problem, instead of redirecting it would be better if we could open a new window or popup for the OAuth flow. Also this is probably a better experience for the user than being redirected around. We use for our authentication so when the user is directed back to our app after signing in the URL contains some parameters we need, including a token we use to authenticate them on our server. Passport Since we want to use a popup we need an additional step in the middle of the flow to catch that redirect, retrieve the URL parameters, close the popup, and use the token in the opening window (not the popup). We allow users to sign in with Google and Outlook and the implementation is the same for both. For ease of reading the example will use Google. Step 1: Open the popup To open a new window we use with the passport login URL (/auth/google in our case) which opens the “Sign in to Leave Me Alone with Google” page in a new window. We also give the window a name and pass the we want it to have. Window.open() requested features We assign the window reference and record the previous URL so that the same window will be used or focused if the user tries to click the sign in button again, even if it’s for a different provider. We don’t want two popups for different providers floating around causing confusion. Finally, we add an event listener for messages as the popup is going to send the URL parameters and auth token when it’s finished. windowObjectReference = ; previousUrl = ; openSignInWindow = { .removeEventListener( , receiveMessage); strWindowFeatures = ; (windowObjectReference === || windowObjectReference.closed) { windowObjectReference = .open(url, name, strWindowFeatures);
   } (previousUrl !== url) { windowObjectReference = .open(url, name, strWindowFeatures);
     windowObjectReference.focus();
   } { windowObjectReference.focus();
   } .addEventListener( , event => receiveMessage(event), ); previousUrl = url;
 }; let null let null const ( ) => url, name // remove any existing event listeners window 'message' // window features const 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100' if null /* if the pointer to the window object in memory does not exist
      or if such pointer exists but the window was closed */ window else if /* if the resource to load is different,
      then we load it in the already opened secondary window and then
      we bring such window back on top/in front of its parent window. */ window else /* else the window reference must exist and the window
      is not closed; therefore, we can bring it back on top of any other
      window with the focus() method. There would be no need to re-create
      the window or to reload the referenced resource. */ // add the listener for receiving a message from the popup window 'message' false // assign the previous URL To get the window to open as a popup instead of a new tab we had to request the features `menubar=no,toolbar=no`. Step 2: Get the OAuth callback parameters in the popup When the OAuth flow is complete Google redirects the user to a callback URL. Usually this would be a server route which would perform the Passport authentication. Since the auth is happening in a popup we use a page in our app, which when which when loaded grabs the search parameters and sends them to the parent. This callback page uses a which executes when the page loads. We fetch the URL parameters which will include the auth token and send them to the opening window (the parent) using . React Use Effect Hook Window.postMessage() () => {
 useEffect( { params = .location.search; ( .opener) { .opener.postMessage(params); .close();
   }
 }); ;
}; export default => () // get the URL parameters which will include the auth token const window if window // send them to the opening window window // close the popup window // some text to show the user return Please wait... < > p </ > p Step 3: Authenticate the user and redirect to the app The OAuth flow is almost complete the and the popup is now closed, we just need to authenticate the user on our server. The receive message function needs to check the origin of the message to make sure it’s from the same domain for security. While coding this we realised that several Chrome developer tools use postMessage() from the same origin so we also check the source before trying to extract the payload. Once we have the OAuth parameters, we redirect to the user to our own authentication endpoint so that we can use Passport to authenticate and login. receiveMessage = { (event.origin !== BASE_URL) { ;
 } { data } = event; (data.source === ) { { payload } = data; redirectUrl = ; .location.pathname = redirectUrl;
 }
}; const => event // Do we trust the sender of this message? (might be // different from what we originally opened, for example). if return const // if we trust the sender and the source is our popup if 'lma-login-redirect' // get the URL params and redirect to our server to use Passport to auth/login const const `/auth/google/login ` ${payload} window Finished! The process is quite simple and all we have done here is add an intermediary step in the OAuth flow to pass through the callback parameters. There are probably lots of implementations but this was the quickest and simplest for us using . React.js Hopefully this helped you or provided some inspiration for your own solution. if you have any questions or suggestions! Let us know Originally published at https://blog.squarecat.io on April 25, 2019.

Flow

Fetch

Google

Microsoft

How we built an account creation popup for Google and Outlook OAuth

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Couple of Nomad Makers: finding friends and side project profits

On Empowering Community Financial Institutions: Interview with Har Rai Khalsa, MK Decision's CEO

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

A Couple of Nomad Makers: finding friends and side project profits

On Empowering Community Financial Institutions: Interview with Har Rai Khalsa, MK Decision's CEO

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps