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.

Sign up for GitHub

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

Changed customauth to use serviceworker instead of redirect.html #2235

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Changed customauth to use serviceworker instead of redirect.html #2235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/oauth/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@umami/oauth",
"files": [
"public/redirect.html"
"public/sw.js",
],
"devDependencies": {
"depcheck": "^1.4.7",
Expand Down
347 changes: 347 additions & 0 deletions apps/oauth/public/sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,347 @@
/* eslint-disable */
function getScope() {
return self.registration.scope;
}

self.addEventListener("message", function (event) {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});

self.addEventListener("fetch", function (event) {
try {
const url = new URL(event.request.url);
if (url.pathname.includes("redirect") && url.href.includes(getScope())) {
event.respondWith(
new Response(
new Blob(
[
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Redirect</title>
<style>
* {
box-sizing: border-box;
}

html,
body {
background: #fcfcfc;
height: 100%;
padding: 0;
margin: 0;
}

.container {
width: 100%;
height: 100%;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

h1.title {
font-size: 14px;
color: #0f1222;
font-family: "Roboto", sans-serif !important;
margin: 0;
text-align: center;
}

.spinner .beat {
background-color: #0364ff;
height: 12px;
width: 12px;
margin: 24px 2px 10px;
border-radius: 100%;
-webkit-animation: beatStretchDelay 0.7s infinite linear;
animation: beatStretchDelay 0.7s infinite linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}

.spinner .beat-odd {
animation-delay: 0s;
}

.spinner .beat-even {
animation-delay: 0.35s;
}

@-webkit-keyframes beatStretchDelay {
50% {
-webkit-transform: scale(0.75);
transform: scale(0.75);
-webkit-opacity: 0.2;
opacity: 0.2;
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-opacity: 1;
opacity: 1;
}
}

@keyframes beatStretchDelay {
50% {
-webkit-transform: scale(0.75);
transform: scale(0.75);
-webkit-opacity: 0.2;
opacity: 0.2;
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-opacity: 1;
opacity: 1;
}
}

@media (min-width: 768px) {
h1.title {
font-size: 14px;
}
p.info {
font-size: 28px;
}

.spinner .beat {
height: 12px;
width: 12px;
}
}
</style>
</head>

<body>
<div id="message" class="container">
<div class="spinner content" id="spinner">
<div class="beat beat-odd"></div>
<div class="beat beat-even"></div>
<div class="beat beat-odd"></div>
</div>
<h1 class="title content" id="closeText" style="display: none;">You can close this window now</h1>
</div>
<script
src="https://scripts.toruswallet.io/broadcastChannel_8_0_1.js"
integrity="sha384-AgVJJZzZhk+edkFFI+WQ6OsQB11p8qB5eqCufUfHYfMvNLSwv5Bj6cz8WcWc31DH"
crossorigin="anonymous"
></script>
<script>
function storageAvailable(type) {
var storage;
try {
storage = window[type];
var x = "__storage_test__";
storage.setItem(x, x);
storage.removeItem(x);
return true;
} catch (e) {
return (
e &&
// everything except Firefox
(e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === "QuotaExceededError" ||
// Firefox
e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
// acknowledge QuotaExceededError only if there's something already stored
storage &&
storage.length !== 0
);
}
}
function showCloseText() {
var closeText = document.getElementById("closeText");
var spinner = document.getElementById("spinner");
if (closeText) {
closeText.style.display = "block";
}
if (spinner) {
spinner.style.display = "none";
}
}
var isLocalStorageAvailable = storageAvailable("localStorage");
// set theme
let theme = "light";
if (isLocalStorageAvailable) {
var torusTheme = localStorage.getItem("torus-theme");
if (torusTheme) {
theme = torusTheme.split("-")[0];
}
}

if (theme === "dark") {
document.querySelector("body").style.backgroundColor = "#24252A";
}
var bc;
var broadcastChannelOptions = {
// type: 'localstorage', // (optional) enforce a type, oneOf['native', 'idb', 'localstorage', 'node'
webWorkerSupport: false, // (optional) set this to false if you know that your channel will never be used in a WebWorker (increase performance)
};
var instanceParams = {};
var preopenInstanceId = new URL(window.location.href).searchParams.get("preopenInstanceId");
if (!preopenInstanceId) {
document.getElementById("message").style.visibility = "visible";
// in general oauth redirect
try {
var url = new URL(location.href);
var hash = url.hash.substr(1);
var hashParams = {};
if (hash) {
hashParams = hash.split("&").reduce(function (result, item) {
var parts = item.split("=");
result[parts[0]] = parts[1];
return result;
}, {});
}
var queryParams = {};
for (var key of url.searchParams.keys()) {
queryParams[key] = url.searchParams.get(key);
}
var error = "";
try {
if (Object.keys(hashParams).length > 0 && hashParams.state) {
instanceParams =
JSON.parse(
base64urlLib.decode(decodeURIComponent(decodeURIComponent(hashParams.state)))
) || {};
if (hashParams.error) error = hashParams.error;
} else if (Object.keys(queryParams).length > 0 && queryParams.state) {
instanceParams =
JSON.parse(
base64urlLib.decode(decodeURIComponent(decodeURIComponent(queryParams.state)))
) || {};
if (queryParams.error) error = queryParams.error;
}
} catch (e) {
console.error(e);
}

const getTargetOrigin = () => {
if (typeof instanceParams.redirectToOpener !== "string") {
return null;
}

const regex = /https:\/\/(umami-v2-web|umami-embed-iframe|umami-embed-iframe-ghostnet)(-git-.*)?\.vercel\.app\/?/;
if (instanceParams.redirectToOpener.match(regex)) {
return instanceParams.redirectToOpener;
}

return null;
};

const targetOrigin = getTargetOrigin();

if (targetOrigin) {
// communicate back to a web page through window.postMessage
const message = {
channel: "redirect_channel_" + instanceParams.instanceId,
data: {
instanceParams: { ...instanceParams, redirectToOpener: true },
hashParams: hashParams,
queryParams: queryParams,
},
error: error,
};

window.opener.postMessage(message, targetOrigin);
} else if (instanceParams.redirectToOpener) {
// communicate back to umami desktop app through a deeplink
const message = {
channel: "redirect_channel_" + instanceParams.instanceId,
...instanceParams,
...hashParams,
...queryParams,
...error,
};
searchParams = new URLSearchParams(message).toString();
window.open("umami://auth/" + searchParams, "_self");
} else {
// communicate via broadcast channel
bc = new broadcastChannelLib.BroadcastChannel("redirect_channel_" + instanceParams.instanceId, broadcastChannelOptions);
bc.postMessage({
data: {
instanceParams: instanceParams,
hashParams: hashParams,
queryParams: queryParams,
},
error: error,
}).then(function () {
bc.close();
console.log("posted", {
queryParams,
instanceParams,
hashParams,
});
setTimeout(function () {
window.close();
showCloseText();
}, 5000);
});
}
} catch (err) {
console.error(err, "service worker error in redirect");
bc && bc.close();
window.close();
showCloseText();
}
} else {
// in preopen, awaiting redirect
try {
bc = new broadcastChannelLib.BroadcastChannel("preopen_channel_" + preopenInstanceId, broadcastChannelOptions);
bc.onmessage = function (ev) {
var { preopenInstanceId: oldId, payload, message } = ev.data;
if (oldId === preopenInstanceId && payload && payload.url) {
window.location.href = payload.url;
} else if (oldId === preopenInstanceId && message === "setup_complete") {
bc.postMessage({
data: {
preopenInstanceId: preopenInstanceId,
message: "popup_loaded",
},
});
}
if (ev.error && ev.error !== "") {
console.error(ev.error);
bc.close();
}
};
} catch (err) {
console.error(err, "service worker error in preopen");
bc && bc.close();
window.close();
showCloseText();
}
}
</script>
</body>
</html>

${""}
`,
],
{ type: "text/html" }
)
)
);
}
} catch (error) {
console.error(error);
}
});
2 changes: 1 addition & 1 deletion packages/social-auth/src/Auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export abstract class Auth {
const torus = new CustomAuth({
web3AuthClientId: WEB3_AUTH_CLIENT_ID,
baseUrl: "https://umamiwallet.com/auth/v2.2.0/",
redirectPathName: "redirect.html",
redirectPathName: "sw.js",
// Hack to enable reusing of the single redirect.html across different surfaces (e.g., desktop, mobile, embed).
// The 'redirectToOpener' is originally designed to accept a boolean value to control redirect behavior.
redirectToOpener: window.location.origin as any as boolean,
Expand Down
Loading