Revert to loginPopup — COOP warning was non-blocking, popup worked before

The real issue was the wrong domain (oliver.solution vs oliver.solutions).
Now that Azure has the correct redirect URI configured, popup flow works.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-03-20 14:18:12 +00:00
parent c00116eea4
commit 361ef7bb6a

View file

@ -35,34 +35,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const navigate = useNavigate();
const { instance, accounts, inProgress } = useMsal();
// Handle Microsoft redirect response on page load
useEffect(() => {
instance.handleRedirectPromise()
.then(async (response) => {
if (response && response.idToken) {
try {
const backendResponse = await authApi.loginWithMicrosoft(response.idToken);
if (backendResponse.data.access_token) {
localStorage.setItem('auth_token', backendResponse.data.access_token);
localStorage.setItem('user', JSON.stringify(backendResponse.data.user));
localStorage.setItem('auth_type', 'microsoft');
setToken(backendResponse.data.access_token);
setUser(backendResponse.data.user);
toast.success('Successfully signed in with Microsoft!');
}
} catch (error: any) {
console.error('Backend Microsoft auth failed:', error);
toast.error('Microsoft sign-in failed', { description: error.message });
}
}
})
.catch((error: any) => {
console.error('MSAL redirect error:', error);
toast.error('Microsoft sign-in failed', { description: error.message });
})
.finally(() => setIsMsalLoading(false));
}, [instance]);
// Listen for authentication errors and handle navigation
useEffect(() => {
const handleAuthError = (event: Event) => {
@ -239,16 +211,33 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const loginWithMicrosoft = async () => {
setIsMsalLoading(true);
try {
import.meta.env.DEV && console.log('Starting Microsoft authentication (redirect)...');
await instance.loginRedirect(loginRequest);
// Page will redirect to Microsoft — execution stops here
import.meta.env.DEV && console.log('Starting Microsoft authentication...');
const response = await instance.loginPopup(loginRequest);
if (response && response.account && response.idToken) {
const backendResponse = await authApi.loginWithMicrosoft(response.idToken);
if (backendResponse.data.access_token) {
localStorage.setItem('auth_token', backendResponse.data.access_token);
localStorage.setItem('user', JSON.stringify(backendResponse.data.user));
localStorage.setItem('auth_type', 'microsoft');
setToken(backendResponse.data.access_token);
setUser(backendResponse.data.user);
toast.success('Successfully signed in with Microsoft!');
}
}
} catch (error: any) {
console.error('Microsoft login failed:', error);
toast.error('Microsoft sign-in failed', {
description: error.message || 'An error occurred during authentication',
});
setIsMsalLoading(false);
if (error.errorCode === 'popup_window_error' || error.errorCode === 'user_cancelled') {
toast.error('Sign-in cancelled', { description: 'The sign-in window was closed.' });
} else {
toast.error('Microsoft sign-in failed', {
description: error.message || 'An error occurred during authentication',
});
}
throw error;
} finally {
setIsMsalLoading(false);
}
};
@ -261,7 +250,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
// If user was authenticated with Microsoft, also sign out from Microsoft
if (authType === 'microsoft' && accounts.length > 0) {
try {
await instance.logoutRedirect({
await instance.logoutPopup({
account: accounts[0],
postLogoutRedirectUri: window.location.origin + import.meta.env.BASE_URL,
});