diff --git a/packages/oauth-client-browser/src/__tests__/util.test.ts b/packages/oauth-client-browser/src/__tests__/util.test.ts
index 3ae7bc2..333faa1 100644
--- a/packages/oauth-client-browser/src/__tests__/util.test.ts
+++ b/packages/oauth-client-browser/src/__tests__/util.test.ts
@@ -55,7 +55,15 @@ describe("buildLoopbackClientId", () => {
       { hostname: "localhost", pathname: "/", port: "3000" },
       "::1",
     );
-    expect(result).toContain("http%3A%2F%2F%3A%3A1%3A3000");
+    expect(result).toContain(encodeURIComponent("http://[::1]:3000/"));
+  });
+
+  test("does not double-bracket already-bracketed IPv6", () => {
+    const result = buildLoopbackClientId(
+      { hostname: "[::1]", pathname: "/", port: "3000" },
+      "[::1]",
+    );
+    expect(result).toContain(encodeURIComponent("http://[::1]:3000/"));
   });
 
   test("accepts [::1] hostname", () => {
diff --git a/packages/oauth-client-browser/src/util.ts b/packages/oauth-client-browser/src/util.ts
index a98d455..a9bea58 100644
--- a/packages/oauth-client-browser/src/util.ts
+++ b/packages/oauth-client-browser/src/util.ts
@@ -10,8 +10,12 @@ export function buildLoopbackClientId(
     );
   }
 
+  const host =
+    localhost.includes(":") && !localhost.startsWith("[")
+      ? `[${localhost}]`
+      : localhost;
   const port = location.port ? `:${location.port}` : "";
-  const redirectUri = `http://${localhost}${port}${location.pathname}`;
+  const redirectUri = `http://${host}${port}${location.pathname}`;
 
   const pathname = location.pathname === "/" ? "" : location.pathname;
   const encodedRedirect = encodeURIComponent(redirectUri);