Viren070/guides
1
0
Fork 0
mirror of https://github.com/Viren070/guides.git synced 2025-12-01 23:16:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: catch errors when attempting to access sessionStorage

Browse Source
This commit is contained in:
Viren070
2024-12-07 17:43:26 +00:00
parent 44f3aa3d72
commit bdb1da5cb3
3 changed files with 81 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/stremio/addons/stremio-gdrive/callback.mdx
+3 -2
View File
@@ -1,7 +1,8 @@
import Callback from '@site/src/components/GoogleOAuth/Callback';
<Callback />
# Google Drive Callback
You will automatically be redirected back to the addon guide after you have authenticated with Google.
This tool was created to assist in the Google OAuth flow for the [Stremio GDrive OAuth Tool](/stremio/addons/stremio-gdrive#oauth-tool).
<Callback />
src/components/GoogleOAuth/Callback.tsx
+46 -8
View File
@@ -4,22 +4,60 @@ import { sessionKeys } from ".";
export default function Catcher(): JSX.Element {
const redirectUrl = useBaseUrl('/stremio/addons/stremio-gdrive#oauth-tool');
const [message, setMessage] = useState<string>("");
const [sessionStorageAvailable, setSessionStorageAvailable] = useState<boolean>(false);
React.useEffect(() => {
const url = new URL(window.location.href);
const code = url.searchParams.get("code");
if (code) {
sessionStorage.setItem(sessionKeys.authorisationCode, code);
window.location.href = redirectUrl;
}
const error = url.searchParams.get("error");
try {
sessionStorage.setItem("test", "test");
sessionStorage.removeItem("test");
setSessionStorageAvailable(true);
} catch (e) {
console.error("Session storage is not available: ", e);
setSessionStorageAvailable(false);
}
if (code) {
if (sessionStorageAvailable) {
sessionStorage.setItem(sessionKeys.authorisationCode, code);
window.location.href = redirectUrl;
} else {
// prompt the user to copy the code
try {
window.prompt("Copy the authorisation code and paste it into the OAuth tool", code);
window.location.href = redirectUrl;
} catch (e) {
console.error("Failed to prompt the user to copy the authorisation code: ", e);
setMessage(`Copy the authorisation code below and paste it into the OAuth Tool: ${code}`);
}
}
}
if (error) {
console.error("Google OAuth Error: ", error);
sessionStorage.setItem(sessionKeys.oauthError, error);
window.location.href = redirectUrl;
if (sessionStorageAvailable) {
sessionStorage.setItem(sessionKeys.oauthError, error);
window.location.href = redirectUrl;
} else {
try {
window.alert(`The OAuth flow could not be completed due to an error: ${error}`);
window.location.href = redirectUrl;
} catch (e) {
console.error("Failed to alert the user of the OAuth error: ", e);
}
setMessage(`The OAuth flow could not be completed due to an error: ${error}`);
}
}
}, []);
}, [sessionStorageAvailable, redirectUrl]);
return <></>;
return (
<div>
{message}
</div>
);
}
export function CallBackUrl(): JSX.Element {
src/components/GoogleOAuth/index.tsx
+32 -6
View File
@@ -45,6 +45,7 @@ export default function CodeGenerator(): JSX.Element {
const [authorisationCode, setAuthorisationCode] = useState<string>("");
const [refreshToken, setRefreshToken] = useState<string>("");
const [redirectUrl, setRedirectUrl] = useState<string>("");
const [sessionStorageAvailable, setSessionStorageAvailable] = useState<boolean>(false);
const callbackPath = useBaseUrl('/stremio/addons/stremio-gdrive/callback');
React.useEffect(() => {
@@ -53,6 +54,19 @@ export default function CodeGenerator(): JSX.Element {
console.log("Redirect URL: ", redirectUrl);
// load the stored values from session storage if they exist
try {
sessionStorage.setItem("test", "test");
sessionStorage.removeItem("test");
setSessionStorageAvailable(true);
} catch (e) {
console.error("Session storage is not available: ", e);
setSessionStorageAvailable(false);
}
if (!sessionStorageAvailable) {
return;
}
const storedClientId = sessionStorage.getItem(sessionKeys.clientId);
const storedClientSecret = sessionStorage.getItem(sessionKeys.clientSecret);
const storedAuthorisationCode = sessionStorage.getItem(sessionKeys.authorisationCode);
@@ -72,24 +86,32 @@ export default function CodeGenerator(): JSX.Element {
sessionStorage.removeItem(sessionKeys.authorisationCode);
showToast("Authorisation code obtained successfully. Click `Get Credentials` to complete the process", "success");
}
}, []);
}, [sessionStorageAvailable, redirectUrl, callbackPath]);
const handleClientIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setClientId(value);
sessionStorage.setItem(sessionKeys.clientId, value);
// reset the authorisation code since its no longer valid with different client id
setAuthorisationCode("");
sessionStorage.removeItem(sessionKeys.authorisationCode);
try {
sessionStorage.setItem(sessionKeys.clientId, value);
sessionStorage.removeItem(sessionKeys.authorisationCode);
} catch (e) {
console.error("Error accessing session storage: ", e);
}
};
const handleClientSecretChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setClientSecret(value);
sessionStorage.setItem(sessionKeys.clientSecret, value);
// reset the authorisation code since its no longer valid with different client secret
setAuthorisationCode("");
sessionStorage.removeItem(sessionKeys.authorisationCode);
try {
sessionStorage.setItem(sessionKeys.clientSecret, value);
sessionStorage.removeItem(sessionKeys.authorisationCode);
} catch (e) {
console.error("Error accessing session storage: ", e);
}
};
const getRefreshCode = () => {
@@ -142,8 +164,12 @@ export default function CodeGenerator(): JSX.Element {
showToast("Refresh token obtained successfully. Copy the code and paste it into your script.", "success");
// reset the authorisation code as it can no longer be used
setAuthorisationCode("");
sessionStorage.removeItem(sessionKeys.authorisationCode);
setRefreshToken(data.refresh_token);
try {
sessionStorage.removeItem(sessionKeys.authorisationCode);
} catch (e) {
console.error("Error accessing session storage: ", e);
}
});
} else {
let text = res.text();