fix popup auth broken due to new COOP header (#24)

Author: k-yle

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.0.0 (2025-07-08)
+
+- 💥 BREAKING CHANGE: Fix authentication broken when using the `popup` mode due to [recent security changes](https://github.com/openstreetmap/openstreetmap-website/commit/2ff4d6)
+
 ## 2.7.0 (2025-06-02)
 
 - Optionally support type-safe `Tags`. `Tags` is currently defined as `Record<string, string>`. If you want additional type-safety, you can specify the keys are the allowed. See the docs for more info.

README.md

@@ -8,6 +8,12 @@
 
 🗺️🌏 Javascript/Typescript wrapper around the OpenStreetMap API.
 
+> [!IMPORTANT]
+> Due to [security changes on 8 July 2025](https://github.com/openstreetmap/openstreetmap-website/commit/2ff4d6), authentication using the `popup` mode will not work until you:
+>
+> 1. update this library to v3.0.0
+> 2. AND update the code snippet in your `land.html` file to the latest version (see [the popup documentation below](#1-popup))
+
 Benefits:
 
 - Lightweight (24 kB gzipped)
@@ -121,8 +127,8 @@ If using a popup, you should create a separate landing page, such as `land.html`
 
 ```html
 <script>
-  if (window.opener) {
-    window.opener.authComplete(location.href);
+  if (new URLSearchParams(location.search).has("code")) {
+    new BroadcastChannel("osm-api-auth-complete").postMessage(location.href);
     window.close();
   }
 </script>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "osm-api",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "contributors": [
     "Kyle Hensel (https://github.com/k-yle)"
   ],

package.json

@@ -3,8 +3,8 @@
   Then open http://127.0.0.1:4167/src/__tests__
  -->
 <script>
-  if (window.opener) {
-    window.opener.authComplete(location.href);
+  if (new URLSearchParams(location.search).has("code")) {
+    new BroadcastChannel("osm-api-auth-complete").postMessage(location.href);
     window.close();
   }
 </script>

src/__tests__/index.html

@@ -1,11 +1,13 @@
+const CHANNEL_ID = "osm-api-auth-complete";
+
 /**
  * resolves once the login flow in the popup is sucessful.
  * rejects if the popup is closed by the user or if there's an error.
  * @internal
  */
 export function createPopup(loginUrl: string): Promise<string> {
   let resolved = false;
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const [width, height] = [600, 550];
     const settings = Object.entries({
       width,
@@ -20,17 +22,14 @@ export function createPopup(loginUrl: string): Promise<string> {
     if (!popup) throw new Error("Popup was blocked");
     popup.location = loginUrl;
 
-    window.authComplete = (fullUrl: string) => {
-      resolve(fullUrl);
+    const bc = new BroadcastChannel(CHANNEL_ID);
+    const onMessage = (event: MessageEvent) => {
+      if (resolved) return; // already got a response
+      resolve(event.data);
       resolved = true;
+      bc.removeEventListener("message", onMessage);
+      bc.close();
     };
-
-    // check every 0.5seconds if the popup has been closed by the user.
-    const intervalId = setInterval(() => {
-      if (popup.closed) {
-        if (!resolved) reject(new Error("Cancelled"));
-        clearInterval(intervalId);
-      }
-    }, 500);
+    bc.addEventListener("message", onMessage);
   });
 }

src/auth/createPopup.ts

@@ -56,7 +56,6 @@ export async function exchangeCode(
   localStorage.setItem("__osmAuth", JSON.stringify(loginData));
 
   // At this point, we can consider the login sucessfull
-  delete window.authComplete;
 
   return loginData;
 }

src/auth/exchangeCode.ts

@@ -73,10 +73,7 @@ export const authReady: Promise<void> = (async () => {
   const loginState = localStorage.getItem("__osmAuthTemp");
 
   if (new URL(fullUrl).searchParams.get("code")) {
-    if (window.opener?.authComplete) {
-      window.opener.authComplete(fullUrl);
-      window.close();
-    } else if (loginState) {
+    if (loginState) {
       try {
         const transaction: Transaction = JSON.parse(loginState);
         await exchangeCode(fullUrl, transaction);

src/auth/oauth2.ts

@@ -40,10 +40,3 @@ export type Transaction = {
   pkceVerifier: string;
   options: LoginOptions;
 };
-
-/** @internal */
-declare global {
-  interface Window {
-    authComplete?(fullUrl: string): void;
-  }
-}