hello.js
hello.js copied to clipboard
Published
20 hours ago •
MrSwitch
MrSwitch
[Question] Redirect issue on Iphone 12 pro max
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.
