Social Annotations in the Atmosphere
refactor(oauth): modernize oauth flow and fix localhost dev environment
- **Proxy (Via Client)**:
- Switched to same-tab OAuth flow using `window.location.assign` instead of popups.
- Updated `WebOAuthLauncher` to handle iframe contexts by redirecting the top-level window.
- Styled the OAuth callback page to match the landing page design.
- Configured Caddy to rewrite `/oauth/callback` to the HTML file.
- **Extension**:
- Updated local development configuration to allow direct authentication against the local PDS.
- Modified `landing/extension-callback.html` to act as a smart relay, handling both web-to-extension redirects and internal extension states safely.
- **Dev Environment**:
- Updated `scripts/start-via.sh` and `scripts/inject-oauth-plugin.ts` to use RFC-compliant `127.0.0.1` for OAuth redirects instead of `localhost`.
- Fixed port configurations for local OAuth callbacks.
- Added `server/tmp/` to .gitignore to exclude temporary binaries.
Closes Phase 4 of REFACTOR_PLAN.md
Amp-Thread-ID: https://ampcode.com/threads/T-bbd3f418-f13f-4732-b36d-e031ee405526
Co-authored-by: Amp <amp@ampcode.com>
+164
-60
+8
Caddyfile
+8
Caddyfile
···
24
24
file_server
25
25
}
26
26
27
+
# OAuth callback rewrite
28
+
handle /oauth/callback {
29
+
root * proxy/static
30
+
rewrite * /oauth-callback.html
31
+
file_server
32
+
}
33
+
27
34
# Serve static files (CSS, JS, etc) from proxy/static
28
35
handle /* {
29
36
root * proxy/static
37
+
try_files {path} {path}.html
30
38
file_server
31
39
}
32
40
+3
-13
entrypoints/via-client/oauth-callback.ts
+3
-13
entrypoints/via-client/oauth-callback.ts
···
28
28
url: window.location.href
29
29
}, '*');
30
30
31
-
// AMPDO: This needs to change since we are no longer calling a popup.
32
-
// Close popup after a delay
33
31
setTimeout(() => {
34
32
window.close();
35
33
}, 500);
36
34
} else {
37
35
// Not a popup (mobile or full page redirect)
38
-
// Redirect back to the page the user was on
39
-
// We can't easily know the "previous" page in a full redirect unless we stored it in sessionStorage BEFORE leaving.
40
-
// But the sidebar iframe is where the login started. If we navigated the whole iframe, we lost state.
41
-
// If we navigated the TOP window, we lost state too unless we stored it.
42
-
43
-
// The sidebar puts `seams_login_redirect` in sessionStorage before starting?
44
-
// Wait, `startLoginProcess` is called in Sidebar.
45
-
46
-
// If we are here, we successfully logged in.
47
-
if (statusEl) statusEl.textContent = 'Login successful! You can close this window.';
36
+
if (statusEl) statusEl.textContent = 'Login successful! Redirecting...';
48
37
49
-
// For now, redirect to the proxy home or stored redirect
38
+
// Redirect back to the page the user was on
50
39
const previousUrl = sessionStorage.getItem('seams_login_redirect') || '/';
40
+
console.log('[oauth-callback] Redirecting to:', previousUrl);
51
41
setTimeout(() => {
52
42
window.location.href = previousUrl;
53
43
}, 1000);
+19
-9
history/REFACTOR_PLAN.md
+19
-9
history/REFACTOR_PLAN.md
···
51
51
- [x] **Cleanup Event Handling**
52
52
- Added `shouldHandleSelection` to prevent UI clicks from re-triggering selection logic.
53
53
54
-
## Phase 4: OAuth Flow Modernization
54
+
## Phase 4: OAuth Flow Modernization (Completed)
55
55
**Goal:** Fix Oauth implementation
56
-
- [ ] Improve authentication experience by removing popups.
57
-
- [ ] **Switch to Same-Tab OAuth** (`packages/core/src/oauth/launchers.ts`)
58
-
- Modify `WebOAuthLauncher` to use `window.location.assign`.
59
-
- [ ] **Handle OAuth Redirects** (`entrypoints/via-client/oauth-callback.ts`)
60
-
- Update callback to redirect back to previously viewed page using query params.
61
-
- [ ] Ensure oauth development environment is working with 127.0.0.1 for both extension and the proxy
56
+
- [x] Improve authentication experience by removing popups.
57
+
- [x] **Switch to Same-Tab OAuth** for Proxy (`packages/core/src/oauth/launchers.ts`)
58
+
- Modified `WebOAuthLauncher` to use `window.location.assign`.
59
+
- [x] **Handle OAuth Redirects** (`entrypoints/via-client/oauth-callback.ts`)
60
+
- Updated callback to redirect back to previously viewed page using query params.
61
+
- [x] Ensure oauth development environment is working with 127.0.0.1 for both extension and the proxy
62
+
- Updated `scripts/start-via.sh` for proxy localhost config.
63
+
- Updated `scripts/inject-oauth-plugin.ts` for extension localhost config.
64
+
- Added `PopupOAuthLauncher` for extension dev mode support.
62
65
63
66
## Phase 5: Optimization & Cleanup
64
67
**Goal:** Performance improvements and dead code removal.
65
-
- [ ] **Update Go Imports** (`server/cmd/server/main.go`)
66
-
- Rename module path to `pkg.sealight.xyz`.
67
68
- [ ] **Optimize Sync Algorithm** (`packages/core/src/background/worker.ts`)
68
69
- Use `Set.has()` for merging annotations.
69
70
- [ ] **Add search from proxy HTML to landing.html
71
+
- Place the search box above
70
72
- Cleanup unused static proxy HTML files. (`proxy/static/via-landing.html`)
73
+
- [ ] Move logs to dev build only
74
+
- Logging on default production instances should be minimized
71
75
- [ ] Document messages types, and define them in @seams/core
72
76
- We have multiple messages that aren't defined concretely. We need to make these explicit
77
+
- [ ] Clean up an existing, **COMPLETED** AMPDO: tasks
78
+
- Report any incomplete AMPDO tasks
79
+
80
+
## Phase 6: Further Future Proofing
81
+
- [ ] Report why the content script is constantly running and checking and spitting out logs, our event driven arcitecture should stop this? I only want an explanation
82
+
- [ ] Change domain for go pkg imports to be `pkg.sealight.xyz`
+21
-5
landing/extension-callback.html
+21
-5
landing/extension-callback.html
···
5
5
<title>OAuth Callback</title>
6
6
</head>
7
7
<body>
8
-
<p>Authenticated. This window will close automatically.</p>
8
+
<p>Redirecting...</p>
9
9
<script>
10
-
// Log what we received to help debug
11
-
console.log('[extension-callback] Full URL:', window.location.href);
12
-
console.log('[extension-callback] Search:', window.location.search);
13
-
console.log('[extension-callback] Hash:', window.location.hash);
10
+
// Relay to Chromium extension callback
11
+
const extensionId = 'kjdnjfgcikmlbloojphbkmknfpmfofio';
12
+
const extRedirect = `https://${extensionId}.chromiumapp.org/extension-callback.html`;
13
+
14
+
// Check if we are already in the extension context to avoid infinite loops
15
+
const isExtension = window.location.protocol === 'chrome-extension:' ||
16
+
window.location.hostname.endsWith('.chromiumapp.org') ||
17
+
window.location.protocol === 'moz-extension:';
18
+
19
+
if (!isExtension) {
20
+
// We are on the web server (relay), so redirect to the extension
21
+
console.log('Relaying to extension:', extRedirect);
22
+
window.location.href = extRedirect + window.location.search + window.location.hash;
23
+
} else {
24
+
// We are in the extension
25
+
console.log('Authentication successful!');
26
+
// The browser should handle closing this window via launchWebAuthFlow,
27
+
// but we can show a message just in case.
28
+
document.querySelector('p').textContent = 'Authenticated. This window will close automatically.';
29
+
}
14
30
</script>
15
31
</body>
16
32
</html>
+18
-1
packages/core/src/oauth/index.ts
+18
-1
packages/core/src/oauth/index.ts
···
51
51
// Store current location for redirect back after login (for web flow)
52
52
if (typeof window !== 'undefined' && window.location) {
53
53
try {
54
-
sessionStorage.setItem('seams_login_redirect', window.location.href);
54
+
let targetStorage = sessionStorage;
55
+
let returnUrl = window.location.href;
56
+
57
+
// If we are in an iframe (like the proxy sidebar), try to use parent's storage and URL
58
+
// This allows us to redirect the top frame back to the original page
59
+
if (window.self !== window.top && window.parent) {
60
+
try {
61
+
// Check if we can access parent (throws if cross-origin)
62
+
const parentLocation = window.parent.location.href;
63
+
returnUrl = parentLocation;
64
+
targetStorage = window.parent.sessionStorage;
65
+
console.log('[oauth] Using parent context for redirect URL:', returnUrl);
66
+
} catch (e) {
67
+
console.warn('[oauth] Could not access parent context, using iframe context', e);
68
+
}
69
+
}
70
+
71
+
targetStorage.setItem('seams_login_redirect', returnUrl);
55
72
} catch (e) {
56
73
console.warn('[oauth] Failed to save redirect URL:', e);
57
74
}
+18
-2
packages/core/src/oauth/launchers.ts
+18
-2
packages/core/src/oauth/launchers.ts
···
24
24
}
25
25
26
26
/**
27
-
* Web OAuth launcher using popup window with postMessage callback
27
+
* Web OAuth launcher using same-tab redirect
28
28
*/
29
29
export class WebOAuthLauncher implements OAuthLauncher {
30
30
async launch(authUrl: URL): Promise<string> {
31
+
// Redirect to the auth URL
32
+
// If we are in an iframe (proxy sidebar), redirect the top window
33
+
// The promise will never resolve as the page will unload
34
+
const target = window.top || window;
35
+
target.location.assign(authUrl.toString());
36
+
37
+
return new Promise(() => {
38
+
// Never resolve, just wait for the page to unload
39
+
});
40
+
}
41
+
}
42
+
43
+
/**
44
+
* OAuth launcher using popup window with postMessage callback (for Extension Dev or fallback)
45
+
*/
46
+
export class PopupOAuthLauncher implements OAuthLauncher {
47
+
async launch(authUrl: URL): Promise<string> {
31
48
return new Promise((resolve, reject) => {
32
49
const width = 600;
33
50
const height = 700;
34
51
const left = window.screenX + (window.outerWidth - width) / 2;
35
52
const top = window.screenY + (window.outerHeight - height) / 2;
36
53
37
-
// AMPDO: Switch this to in using the same tab
38
54
const popup = window.open(
39
55
authUrl.toString(),
40
56
'oauth-popup',
+1
-2
proxy/static/proxy/via-html/oauth-callback.html
+1
-2
proxy/static/proxy/via-html/oauth-callback.html
···
36
36
}
37
37
</style>
38
38
<script type="module" crossorigin src="/static/seams-oauth-callback.js"></script>
39
-
<link rel="modulepreload" crossorigin href="/static/assets/modulepreload-polyfill-B5Qt9EMX.js">
39
+
<link rel="modulepreload" crossorigin href="/static/assets/modulepreload-polyfill-Elc7_Ely.js">
40
40
<link rel="modulepreload" crossorigin href="/static/assets/index-BKdQD0EM.js">
41
-
<link rel="modulepreload" crossorigin href="/static/assets/index-BNF_FRu3.js">
42
41
</head>
43
42
<body>
44
43
<div class="message">
+48
-25
proxy/via-html/oauth-callback.html
+48
-25
proxy/via-html/oauth-callback.html
···
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
<title>Seams OAuth Callback</title>
7
+
<link rel="stylesheet" href="/landing.css">
7
8
<style>
8
9
body {
9
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
-
display: flex;
11
-
align-items: center;
12
-
justify-content: center;
13
-
height: 100vh;
14
-
margin: 0;
15
-
background: #f5f5f5;
10
+
display: flex;
11
+
align-items: center;
12
+
justify-content: center;
13
+
height: 100vh;
14
+
margin: 0;
15
+
overflow: hidden;
16
+
}
17
+
.callback-container {
18
+
background: white;
19
+
padding: 48px;
20
+
border: 2px dashed #d0d0d0;
21
+
border-radius: 2px;
22
+
text-align: center;
23
+
max-width: 400px;
24
+
width: 90%;
25
+
box-shadow: 0 4px 12px rgba(45, 80, 22, 0.05);
26
+
}
27
+
.logo {
28
+
font-family: 'Spectral', serif;
29
+
font-size: 16px;
30
+
font-weight: 700;
31
+
letter-spacing: 0.1em;
32
+
text-transform: uppercase;
33
+
color: #666;
34
+
margin-bottom: 16px;
16
35
}
17
-
.message {
18
-
text-align: center;
19
-
padding: 32px;
20
-
background: white;
21
-
border-radius: 8px;
22
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
36
+
h2 {
37
+
font-family: 'Fraunces', serif;
38
+
font-size: 24px;
39
+
color: #1a1a1a;
40
+
margin-bottom: 16px;
23
41
}
24
42
.spinner {
25
-
border: 3px solid #f3f3f3;
26
-
border-top: 3px solid #0085ff;
27
-
border-radius: 50%;
28
-
width: 40px;
29
-
height: 40px;
30
-
animation: spin 1s linear infinite;
31
-
margin: 0 auto 16px;
43
+
border: 3px solid #f3f3f3;
44
+
border-top: 3px solid var(--forest-green);
45
+
border-radius: 50%;
46
+
width: 32px;
47
+
height: 32px;
48
+
animation: spin 1s linear infinite;
49
+
margin: 0 auto 24px;
32
50
}
33
51
@keyframes spin {
34
-
0% { transform: rotate(0deg); }
35
-
100% { transform: rotate(360deg); }
52
+
0% { transform: rotate(0deg); }
53
+
100% { transform: rotate(360deg); }
54
+
}
55
+
#status {
56
+
color: #666;
57
+
font-size: 14px;
36
58
}
37
59
</style>
38
60
</head>
39
61
<body>
40
-
<div class="message">
62
+
<div class="callback-container">
63
+
<div class="logo">Seams</div>
41
64
<div class="spinner"></div>
42
-
<h2>Completing login...</h2>
43
-
<p id="status">Processing OAuth response</p>
65
+
<h2>Connecting...</h2>
66
+
<p id="status">Completing authentication</p>
44
67
</div>
45
68
<script type="module" src="../../entrypoints/via-client/oauth-callback.ts"></script>
46
69
</body>
+18
-1
scripts/inject-oauth-plugin.ts
+18
-1
scripts/inject-oauth-plugin.ts
···
11
11
export function injectOauthEnvForExtension(browser: string): PluginOption {
12
12
return {
13
13
name: "inject-oauth-env",
14
-
config: () => {
14
+
config: (_config, { mode }) => {
15
+
// In development, use localhost configuration
16
+
if (mode === 'development') {
17
+
// Note: The redirect_uri in the client_id query param must match the actual redirect URI used (ignoring port)
18
+
// We use the extension-callback.html on the server (port 8080) for extension development
19
+
// Must use 127.0.0.1 instead of localhost for the redirect URI
20
+
const devRedirectUri = "http://127.0.0.1:8080/extension-callback.html";
21
+
const devClientId = `http://localhost?redirect_uri=${encodeURIComponent("http://127.0.0.1:8080/extension-callback.html")}&scope=${encodeURIComponent("atproto transition:generic")}`;
22
+
23
+
return {
24
+
define: {
25
+
"import.meta.env.VITE_OAUTH_CLIENT_ID": JSON.stringify(devClientId),
26
+
"import.meta.env.VITE_OAUTH_REDIRECT_URI": JSON.stringify(devRedirectUri),
27
+
"import.meta.env.VITE_OAUTH_SCOPE": JSON.stringify("atproto transition:generic"),
28
+
}
29
+
};
30
+
}
31
+
15
32
const config = metadata as OAuthConfig;
16
33
17
34
// Select redirect URI based on browser
+9
scripts/start-via.sh
+9
scripts/start-via.sh
···
4
4
set -e
5
5
6
6
echo "🔨 Building via client scripts (watch mode)..."
7
+
8
+
# Export development OAuth configuration for localhost
9
+
# Note: Use 127.0.0.1 for redirect_uri as required by RFC 8252
10
+
# The redirect_uri in the client_id must match the actual redirect_uri used.
11
+
export VITE_OAUTH_CLIENT_ID="http://localhost?redirect_uri=http%3A%2F%2F127.0.0.1%3A8082%2Foauth%2Fcallback&scope=atproto%20transition%3Ageneric"
12
+
export VITE_OAUTH_REDIRECT_URI="http://127.0.0.1:8082/oauth/callback"
13
+
export VITE_OAUTH_SCOPE="atproto transition:generic"
14
+
export BACKEND_URL="http://localhost:8080"
15
+
7
16
pnpm dev:via &
8
17
BUILD_PID=$!
9
18
server/tmp/main
server/tmp/main
This is a binary file and will not be displayed.