Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Production mode loginPopup issue: BrowserAuthError - User Cancelled Flow #58

Open
Asteryx21 opened this issue Oct 19, 2023 · 2 comments

Comments

@Asteryx21
Copy link

Issue
We've implemented the File Picker for both personal and business accounts by following the documentation and the samples given in the repository.
While everything works as intended (Screenshot 1) in development mode (localhost), the issue comes to production (Screenshot 2 & 3).
When the user opens the Microsoft login popup appears and we instatly get the error:
BrowserAuthError: user_cancelled: User cancelled the flow.
The popup window then redirects to the actual web app we have and not to the coresponding OneDrive/ SharePoint.

The error comes to that line:

try {
resp = await app.loginPopup(authParams);
} catch (error) {
console.log(error) 
}

To Reproduce
Steps to reproduce the behavior: Followed the Documentation provided here and samples examples from this repository.

Expected behavior
The app in production mode to work as in development mode.
Once the user signs in the Microsoft popup the "Picker" popup to show the OneDrive/SharePoint.

Screenshots
Screenshot 1:
Capture
Screenshots 2 & 3:
Capture2
Capture3

Details
In my Azure Portal App I've given the following access:
Capture4

Picker configuration options:

const params = {
		sdk: "8.0",
		entry: {
			oneDrive: {
				files: {},
			},
		},
		authentication: {},
		messaging: {
			origin: window.location.href,
			channelId: "54327",
		},
		typesAndSources: {
			mode: "files",
			filters: [".xlsx", ".csv"],
			pivots: {
				oneDrive: true,
				recent: true,
				sharedLibraries: false,
			},
		},
	};

My msalParams and authParams:

	const msalParams = {
		auth: {
			authority: "https://login.microsoftonline.com/",
			clientId: MY_CLIENT_ID,
			redirectUri: window.location.href,
		},
	};
	const authParams = {};
		if (accountType === "business") {
		authParams.scopes = [
			"user.read",
			"User.Read",
			"Files.Read",
			"Files.Read.All",
			"Files.Read.Selected",
			"Files.ReadWrite",
			"offline_access",
		];
		msalParams.auth.authority += "common/";
	} else if (accountType === "consumers") {
		authParams.scopes = ["OneDrive.ReadWrite"];
		msalParams.auth.authority += "consumers/";
	}
@JCrew0
Copy link
Collaborator

JCrew0 commented Jan 3, 2024

Hey @Asteryx21, I'm going through and looking at some of the older issues. Did anyone ever address this or did you come up with a solution? If not, I can try to take a look. Thanks!

@Asteryx21
Copy link
Author

Hey @JCrew0 and happy new year. I didn't manage to find any solution. I would really appreciate you taking a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants