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

[Question] Redirect issue on Iphone 12 pro max #661

Open
simplecommerce opened this issue Dec 1, 2022 · 0 comments
Open

[Question] Redirect issue on Iphone 12 pro max #661

simplecommerce opened this issue Dec 1, 2022 · 0 comments

Comments

@simplecommerce
Copy link

simplecommerce commented Dec 1, 2022

Hi,

I am using hellojs in order to login using Google on my web app.

I noticed that it doesn't work on Iphone 12 pro max.

In my code, I init my providers as followed:

hellojs.init(providers, {
	// default scope to use, we get the email address and the first name and last name
	scope: "basic,email",
	// our route to handle redirects in the pop-up, this route takes care of getting the response and redirecting it to our instance using the state URL value, this allows us to validate only one redirect url regardless of subdomains.
	redirect_uri: "https://oauth.mysite.com",
	state: JSON.stringify({
		// url to redirect to, to complete OAuth
		url: `https://${window.location.host}/OAuthRedirect?disableBackdrop`,
	}),
	// forces users to relog every time, allows the user to switch accounts, otherwise they would always relog with the same logged-in account
	force: true,
});

This works no issue on my desktop.

In the redirect_uri I have an index file that has the following code.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
// get state hash value, parse it and convert it to a JSON object
var stateObj = JSON.parse(new URLSearchParams(decodeURIComponent(window.location.hash).replace("#","")).get("state"));
var data = JSON.parse(stateObj.state);

// get redirect url from state obj, and pass the hash to it
window.location.href = data.url + window.location.hash;
</script>
</body>
</html>

I noticed that it wasn't working on my mobile which is the Iphone 12 Pro max.

So I did some tests and noticed that the window.location.hash seems to be double encoded compared to on Desktop.

So I changed my code to this instead to make it work:

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
// get state hash value, parse it and convert it to a JSON object
var stateObj,data;

try {
    stateObj = JSON.parse(new URLSearchParams(decodeURIComponent(window.location.hash).replace("#","")).get("state"));
    data = JSON.parse(stateObj.state);
} catch (e) {
    stateObj = JSON.parse(new URLSearchParams(decodeURIComponent(decodeURIComponent(window.location.hash)).replace("#","")).get("state"));
    data = JSON.parse(stateObj.state);
}

// get redirect url from state obj, and pass the hash to it
window.location.href = data.url + window.location.hash;
</script>
</body>
</html>

But as you can see this is sort of an ugly fix.
I was just wondering if you knew why it would double encode it for certain devices only?

I wasn't sure where to look for this.

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

No branches or pull requests

1 participant