Use popup for OAuth on preview/sandbox/checkpoint domains#134
Use popup for OAuth on preview/sandbox/checkpoint domains#134
Conversation
On preview and sandbox domains the app runs inside an iframe, which causes OAuth providers to block the normal full-page redirect via X-Frame-Options. Instead, open the provider flow in a popup, poll until it lands back on our origin, then mirror that callback URL (including the access_token query param) in the iframe so it processes the token exactly as a normal redirect would. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Claude finished @roymiloh's task —— View job PR Review: Use popup for OAuth on preview/sandbox/checkpoint domainsI've reviewed this PR that adds popup-based OAuth authentication for iframe environments. Here's my comprehensive feedback: ✅ Code Quality and Best PracticesStrengths:
Suggestions:
🔍 Potential Bugs or IssuesFound Issues:
Recommendations: // Add max timeout protection
const maxPollTime = 5 * 60 * 1000; // 5 minutes
const startTime = Date.now();
const pollTimer = setInterval(() => {
if (Date.now() - startTime > maxPollTime) {
clearInterval(pollTimer);
popup?.close();
// Consider notifying user of timeout
return;
}
// ... rest of polling logic
}, 300);⚡ Performance ConsiderationsGood:
Could be improved:
🔒 Security ConcernsPositive security aspects:
Security considerations:
📋 Test CoverageMissing test coverage for the new functionality:
Recommended tests to add: describe('isPopupAuthDomain()', () => {
test('should return true for preview domains', () => {
global.window = { location: { hostname: 'preview--feature.base44.app' } };
expect(isPopupAuthDomain()).toBe(true);
});
test('should return false for production domains', () => {
global.window = { location: { hostname: 'app.base44.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
});
describe('loginWithProvider() popup flow', () => {
test('should use popup on preview domains', () => {
const mockOpen = vi.fn().mockReturnValue({ /* mock popup */ });
global.window.open = mockOpen;
global.window.location = { hostname: 'preview--test.base44.app' };
base44.auth.loginWithProvider('google');
expect(mockOpen).toHaveBeenCalled();
});
});📝 SummaryThis is a well-implemented solution to the iframe OAuth problem. The code is clean and follows good practices. The main areas for improvement are:
The security implementation looks solid with proper origin checking. Once the test coverage is added and the edge cases are handled, this will be a robust solution. |
🚀 Package Preview Available!Install this PR's preview build with npm: npm i @base44-preview/sdk@0.8.19-pr.134.76a0e8ePrefer not to change any import paths? Install using npm alias so your code still imports npm i "@base44/sdk@npm:@base44-preview/sdk@0.8.19-pr.134.76a0e8e"Or add it to your {
"dependencies": {
"@base44/sdk": "npm:@base44-preview/sdk@0.8.19-pr.134.76a0e8e"
}
}
Preview published to npm registry — try new features instantly! |
|
Claude finished @roymiloh's task —— View job PR Review: Use popup for OAuth on preview/sandbox/checkpoint domainsI've completed my review of this PR that adds popup-based OAuth authentication for iframe environments. Here's my comprehensive feedback: ✅ Code Quality and Best PracticesStrengths:
Suggestions:
🐛 Potential Bugs or Issues
⚡ Performance ConsiderationsGood practices:
Suggestions:
🔒 Security ConcernsPositive aspects:
Concerns:
📋 Test CoverageCritical gap: There are no tests for the new popup authentication functionality. The existing auth tests in
Recommended tests: describe('Popup Authentication', () => {
describe('isPopupAuthDomain()', () => {
test('should return true for preview domains', () => {
global.window = { location: { hostname: 'preview--feature.base44.app' } };
expect(isPopupAuthDomain()).toBe(true);
});
test('should return false for production domains', () => {
global.window = { location: { hostname: 'app.base44.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
test('should return false when window is undefined', () => {
const originalWindow = global.window;
delete global.window;
expect(isPopupAuthDomain()).toBe(false);
global.window = originalWindow;
});
});
describe('loginWithProvider() popup flow', () => {
test('should use popup on preview domains', () => {
const mockOpen = vi.fn().mockReturnValue({ /* mock popup */ });
global.window.open = mockOpen;
global.window.location = { hostname: 'preview--test.base44.app' };
base44.auth.loginWithProvider('google');
expect(mockOpen).toHaveBeenCalled();
});
test('should handle popup blocker gracefully', () => {
global.window.open = vi.fn().mockReturnValue(null);
global.window.location = { hostname: 'preview--test.base44.app' };
// Should not throw
expect(() => base44.auth.loginWithProvider('google')).not.toThrow();
});
});
});📝 SummaryThis is a well-implemented solution to the iframe OAuth problem. The code is clean and follows good practices. However, there are several areas that need attention:
Once these issues are addressed (especially the domain matching concern), this will be a robust solution for OAuth in iframe environments. Todo List:
|
|
Claude finished @roymiloh's task —— View job PR Review: Use popup for OAuth on preview/sandbox/checkpoint domainsI've completed my review of this PR that adds popup-based OAuth authentication for iframe environments. Here's my comprehensive feedback: ✅ Code Quality and Best PracticesStrengths:
Suggestions:
🐛 Potential Bugs or Issues
⚡ Performance ConsiderationsGood practices:
Suggestions:
🔒 Security ConcernsPositive aspects:
Security issues:
📋 Test CoverageCritical gap: There are no tests for the new popup authentication functionality. The existing auth tests don't cover:
Recommended tests: describe('Popup Authentication', () => {
describe('isPopupAuthDomain()', () => {
test('should return true for preview domains', () => {
global.window = { location: { hostname: 'preview--feature.base44.app' } };
expect(isPopupAuthDomain()).toBe(true);
});
test('should return false for production domains', () => {
global.window = { location: { hostname: 'app.base44.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
test('should return false when window is undefined', () => {
const originalWindow = global.window;
delete global.window;
expect(isPopupAuthDomain()).toBe(false);
global.window = originalWindow;
});
});
describe('loginWithProvider() popup flow', () => {
test('should use popup on preview domains', () => {
const mockOpen = vi.fn().mockReturnValue({ /* mock popup */ });
global.window.open = mockOpen;
global.window.location = { hostname: 'preview--test.base44.app' };
base44.auth.loginWithProvider('google');
expect(mockOpen).toHaveBeenCalled();
});
test('should handle popup blocker gracefully', () => {
global.window.open = vi.fn().mockReturnValue(null);
global.window.location = { hostname: 'preview--test.base44.app' };
// Should not throw
expect(() => base44.auth.loginWithProvider('google')).not.toThrow();
});
});
});📝 SummaryThis is a well-implemented solution to the iframe OAuth problem. The code is clean and follows good practices. However, there are several issues that need attention:
Once these issues are addressed (especially the domain matching security concern), this will be a robust solution for OAuth in iframe environments. Todo List:
|
Replace the cross-origin location polling hack with a proper postMessage
listener. The backend now sends { access_token, is_new_user } via
postMessage when popup_origin is passed as a query param. On receipt,
the iframe redirects to fromUrl with the token params appended,
preserving identical behaviour to the normal OAuth callback redirect.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Claude finished @roymiloh's task —— View job PR Review: Use popup for OAuth on preview/sandbox/checkpoint domainsI've completed my review of this PR that adds popup-based OAuth authentication for iframe environments. Here's my comprehensive feedback: ✅ Code Quality and Best PracticesStrengths:
Suggestions:
🐛 Potential Bugs or Issues
⚡ Performance ConsiderationsGood practices:
Suggestions:
🔒 Security ConcernsPositive aspects:
Security considerations:
📋 Test CoverageCritical gap: There are no tests for the new popup authentication functionality. The existing test file doesn't cover:
Recommended tests: describe('Popup Authentication', () => {
describe('isPopupAuthDomain()', () => {
test('should return true for preview domains', () => {
global.window = { location: { hostname: 'preview--feature.base44.app' } };
expect(isPopupAuthDomain()).toBe(true);
});
test('should return false for production domains', () => {
global.window = { location: { hostname: 'app.base44.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
test('should not match non-base44 domains', () => {
global.window = { location: { hostname: 'preview--evil.malicious.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
});
describe('loginWithProvider() popup flow', () => {
test('should use popup on preview domains', () => {
const mockOpen = vi.fn().mockReturnValue({ /* mock popup */ });
global.window.open = mockOpen;
global.window.location = { hostname: 'preview--test.base44.app' };
base44.auth.loginWithProvider('google');
expect(mockOpen).toHaveBeenCalledWith(
expect.stringContaining('popup_origin='),
'base44_auth',
expect.any(String)
);
});
test('should handle popup blocker gracefully', () => {
global.window.open = vi.fn().mockReturnValue(null);
// Should not throw
expect(() => base44.auth.loginWithProvider('google')).not.toThrow();
});
test('should validate message origin and source', () => {
// Test postMessage validation logic
});
});
});📝 SummaryThis is a well-thought-out solution to the iframe OAuth problem. The switch from location polling to postMessage is a significant improvement. The code is clean and follows good practices. However, there are several important issues to address:
The postMessage approach is definitely the right direction, and once these issues are addressed, this will be a robust solution for OAuth in iframe environments. Todo List:
|
The popup sends its message after the backend redirects it back to our app's domain, so event.origin is window.location.origin, not the Base44 server's origin. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Claude finished @roymiloh's task —— View job PR Review: Use popup for OAuth on preview/sandbox/checkpoint domainsI've completed my review of this PR that adds popup-based OAuth authentication for iframe environments. Here's my comprehensive feedback: ✅ Code Quality and Best PracticesStrengths:
Suggestions:
🐛 Potential Bugs or Issues
⚡ Performance ConsiderationsGood practices:
Suggestions:
🔒 Security ConcernsPositive aspects:
Security considerations:
📋 Test CoverageCritical gap: There are no tests for the new popup authentication functionality. The existing test file doesn't cover:
Recommended tests: describe('Popup Authentication', () => {
describe('isPopupAuthDomain()', () => {
test('should return true for preview domains', () => {
global.window = { location: { hostname: 'preview--feature.base44.app' } };
expect(isPopupAuthDomain()).toBe(true);
});
test('should return false for production domains', () => {
global.window = { location: { hostname: 'app.base44.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
test('should not match non-base44 domains', () => {
global.window = { location: { hostname: 'preview--evil.malicious.com' } };
expect(isPopupAuthDomain()).toBe(false);
});
});
describe('loginWithProvider() popup flow', () => {
test('should use popup on preview domains', () => {
const mockOpen = vi.fn().mockReturnValue({ /* mock popup */ });
global.window.open = mockOpen;
global.window.location = { hostname: 'preview--test.base44.app' };
base44.auth.loginWithProvider('google');
expect(mockOpen).toHaveBeenCalledWith(
expect.stringContaining('popup_origin='),
'base44_auth',
expect.any(String)
);
});
test('should handle popup blocker gracefully', () => {
global.window.open = vi.fn().mockReturnValue(null);
// Should not throw
expect(() => base44.auth.loginWithProvider('google')).not.toThrow();
});
test('should validate message origin and source', () => {
// Test postMessage validation logic
});
});
});📝 SummaryThis is a well-thought-out solution to the iframe OAuth problem. The switch from location polling to postMessage is a significant improvement. The code is clean and follows good practices. However, there are several important issues to address:
The postMessage approach is definitely the right direction, and once these issues are addressed, this will be a robust solution for OAuth in iframe environments. Todo List:
|
Summary
preview--*,preview-sandbox--*,checkpoint--*onbase44.app) the app runs inside an iframeX-Frame-Options: DENY, so the existing full-page redirect breaks?access_token=...) in the iframe so it processes the token exactly as a normal redirect wouldTest plan
loginWithProvider('google')on apreview--*.base44.appdomain — should open a popup, complete OAuth, close popup, and authenticate the iframe🤖 Generated with Claude Code