notes/solidjs/GoogleOAuth2Client.tsx
2024-08-22 02:07:25 -07:00

60 lines
1.8 KiB
TypeScript

import { createSignal } from "solid-js";
const googleClientId = import.meta.env.VITE_GOOGLE_OAUTH2_CLIENT_ID;
const googleRedirectUri = import.meta.env.VITE_GOOGLE_OAUTH2_REDIRECT_URI;
const GoogleLogin = () => {
const [accessToken, setAccessToken] = createSignal<string | null>(null);
const oauthSignIn = () => {
const oauth2Endpoint = "https://accounts.google.com/o/oauth2/v2/auth";
const params = {
client_id: googleClientId,
redirect_uri: googleRedirectUri,
response_type: "token",
scope: "https://www.googleapis.com/auth/drive.metadata.readonly",
included_granted_scopes: "true",
state: "pass-through value",
};
const urlParams = new URLSearchParams(params).toString();
const authUrl = `${oauth2Endpoint}?${urlParams}`;
const authWindow = window.open(authUrl, "_blank", "width=500,height=600");
const checkAuthWindow = () => {
try {
const url = authWindow?.location.href;
if (url && url.includes("access_token")) {
const accessTokenMatch = url.match(/access_token=([^&]+)/);
const token = accessTokenMatch ? accessTokenMatch[1] : null;
if (token) {
setAccessToken(token);
console.log("Access token :=>", token);
authWindow?.close();
}
}
} catch (error) {
// Ignore cross-origin access errors while waiting for the user to sign in
}
};
const intervalId = setInterval(() => {
if (authWindow?.closed) {
clearInterval(intervalId);
} else {
checkAuthWindow();
}
}, 500);
};
return (
<div>
<button onClick={oauthSignIn}>Sign Up With Google</button>
{accessToken() && <p>Access Token: {accessToken()}</p>}
</div>
);
};
export default GoogleLogin;