signinwith 1.0.12 → 1.1.0

package/index.js

@@ -52,12 +52,68 @@ export const verifySigninDiscord = async (config, verificationData) => {
 	return profile.email ? { success: true, email: profile.email } : { success: false, error: 'Email not available from Discord' };
 };
 
+export const verifySigninGithub = async (config, verificationData) => {
+	if (!verificationData?.code) return { success: false, error: 'Missing GitHub authorization code' };
+	if (!config?.clientId || !config?.clientSecret) return { success: false, error: 'GitHub clientId and clientSecret are required' };
+
+	const params = new URLSearchParams();
+	params.append('client_id', config.clientId);
+	params.append('client_secret', config.clientSecret);
+	params.append('code', verificationData.code);
+	if (config.redirectUri) params.append('redirect_uri', config.redirectUri);
+	if (verificationData.codeVerifier) params.append('code_verifier', verificationData.codeVerifier);
+
+	const tokenResponse = await fetch('https://github.com/login/oauth/access_token', {
+		method: 'POST',
+		headers: {
+			'Accept': 'application/json',
+		},
+		body: params,
+	});
+	const token = await tokenResponse.json();
+	if (!tokenResponse.ok || token.error) {
+		return { success: false, error: token.error_description || 'Failed to exchange GitHub code for token' };
+	}
+
+	const accessToken = token.access_token;
+	const apiHeaders = {
+		'Authorization': `Bearer ${accessToken}`,
+		'Accept': 'application/vnd.github+json',
+		'User-Agent': config.userAgent || 'signinwith',
+	};
+
+	const profileRes = await fetch('https://api.github.com/user', { headers: apiHeaders });
+	const profile = await profileRes.json();
+	if (!profileRes.ok) {
+		return { success: false, error: profile.message || 'Failed to fetch GitHub profile' };
+	}
+	if (profile.email) {
+		return { success: true, email: profile.email };
+	}
+
+	const emailRes = await fetch('https://api.github.com/user/emails', { headers: apiHeaders });
+	if (emailRes.ok) {
+		const emails = await emailRes.json();
+		if (Array.isArray(emails)) {
+			const primary = emails.find((item) => item.primary && item.verified);
+			const verified = emails.find((item) => item.verified);
+			const email = primary?.email || verified?.email;
+			if (email) {
+				return { success: true, email };
+			}
+		}
+	}
+
+	return { success: false, error: 'Email not available from GitHub' };
+};
+
 export default async function verifySignin (services, service, verificationData) {
 	try {
 		if (services.google && service === 'google') return await verifySigninGoogle(services.google, verificationData);
 		if (services.facebook && service === 'facebook') return await verifySigninFacebook(services.facebook, verificationData);
 		if (services.apple && service === 'apple') return await verifySigninApple(services.apple, verificationData);
 		if (services.discord && service === 'discord') return await verifySigninDiscord(services.discord, verificationData);
+		if (services.github && service === 'github') return await verifySigninGithub(services.github, verificationData);
 		return { success: false, error: 'Unsupported service' };
 	} catch (err) {
 		return { success: false, error: err.message || 'Unknown error' };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "signinwith",
-	"version": "1.0.12",
-	"description": "Simple and straightforward library for sign in / sign up with thirdparty oAuth services like Google, Meta, Apple, Discord...",
+	"version": "1.1.0",
+	"description": "Simple and straightforward library for sign in / sign up with thirdparty oAuth services like Google, Facebook, Apple, Discord...",
 	"main": "index.js",
 	"scripts": {
 	},

package/react.jsx

@@ -17,6 +17,17 @@ const DiscordIcon = () => (
 	<svg viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z" fill="#FFFFFF"/></svg>
 );
 
+const GithubIcon = () => (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12 0C5.37 0 0 5.42 0 12.108c0 5.354 3.438 9.892 8.205 11.496.6.115.82-.264.82-.585 0-.288-.01-1.049-.016-2.06-3.338.737-4.042-1.642-4.042-1.642-.547-1.412-1.336-1.788-1.336-1.788-1.09-.758.083-.743.083-.743 1.205.086 1.84 1.255 1.84 1.255 1.07 1.864 2.807 1.326 3.492 1.015.108-.793.42-1.326.763-1.63-2.665-.31-5.466-1.366-5.466-6.075 0-1.342.465-2.44 1.232-3.3-.124-.311-.535-1.565.118-3.263 0 0 1.007-.33 3.3 1.26a11.23 11.23 0 0 1 3.004-.41c1.02.004 2.047.14 3.004.41 2.29-1.59 3.296-1.26 3.296-1.26.655 1.698.244 2.952.12 3.263.77.86 1.23 1.958 1.23 3.3 0 4.724-2.807 5.76-5.48 6.064.43.379.823 1.126.823 2.27 0 1.64-.015 2.96-.015 3.363 0 .324.216.704.826.583C20.565 22 24 17.46 24 12.108 24 5.42 18.627 0 12 0Z"
+			fill="#FFFFFF"
+		/>
+	</svg>
+);
+
 // Subcomponent: Facebook
 export function SignInWithFacebook({ service, onSignin, onError }) {
 	useEffect(() => {
@@ -205,11 +216,54 @@ export function SignInWithApple({ service, onSignin, onError }) {
 
 // Subcomponent: Discord
 export function SignInWithDiscord({ service, onSignin, onError }) {
+	const popupRef = useRef(null);
+
+	useEffect(() => {
+		if (typeof BroadcastChannel === 'undefined') {
+			console.warn('BroadcastChannel is not supported in this browser. Discord login will not work.');
+			return;
+		}
+
+		const channel = new BroadcastChannel('signinwith-discord');
+		const handleChannelMessage = (event) => {
+			const data = event.data;
+			if (!data || data.service !== 'discord') return;
+
+			if (data.code) {
+				onSignin('discord', { code: data.code, state: data.state });
+			} else if (data.error) {
+				onError?.(`Discord login error: ${data.error}`);
+			} else {
+				onError?.('Unknown Discord login error.');
+			}
+
+			if (popupRef.current && !popupRef.current.closed) {
+				popupRef.current.close();
+			}
+			window.__signinwithPendingProvider = null;
+			window.__signinwithPendingProviderState = null;
+		};
+
+		channel.addEventListener('message', handleChannelMessage);
+
+		return () => {
+			channel.removeEventListener('message', handleChannelMessage);
+			channel.close();
+		};
+	}, [onSignin, onError]);
+
 	const handleDiscordLogin = (e) => {
 		e.stopPropagation();
 		e.preventDefault();
 
-		const { clientId, redirectUri, scope = 'identify email' } = service; // Default scopes
+		const {
+			clientId,
+			redirectUri,
+			scope = 'identify email',
+			state = 'discord',
+			prompt = 'consent',
+			popupFeatures = 'width=500,height=700',
+		} = service; // Default scopes
 
 		if (!clientId || !redirectUri) {
 			console.error("Discord service configuration missing clientId or redirectUri.");
@@ -217,46 +271,132 @@ export function SignInWithDiscord({ service, onSignin, onError }) {
 			return;
 		}
 
+		if (typeof BroadcastChannel === 'undefined') {
+			onError?.('BroadcastChannel API is not available in this browser.');
+			return;
+		}
+
 		try {
 			const params = new URLSearchParams({
 				client_id: clientId,
 				redirect_uri: redirectUri,
 				response_type: 'code',
 				scope: scope,
+				state,
 			});
+			if (prompt) params.append('prompt', prompt);
 
 			const discordAuthUrl = `https://discord.com/api/oauth2/authorize?${params.toString()}`;
-
-			window.open(discordAuthUrl);
+			window.__signinwithPendingProvider = 'discord';
+			window.__signinwithPendingProviderState = state;
+			popupRef.current = window.open(discordAuthUrl, '_blank', popupFeatures);
 		} catch (error) {
 			console.error("Failed to initiate Discord login:", error);
 			onError?.("Failed to initiate Discord login.");
 		}
 	};
+
+	return (
+		<button className="signinwith-button signinwith-button-discord" onClick={handleDiscordLogin}>
+			<DiscordIcon />Continue with Discord
+		</button>
+	);
+}
+
+// Subcomponent: GitHub
+export function SignInWithGithub({ service, onSignin, onError }) {
+	const popupRef = useRef(null);
+
 	useEffect(() => {
-		const handleMessage = (event) => {
-			if (event.origin !== window.location.origin) {
-				return; // Only accept messages from the same origin
+		if (typeof BroadcastChannel === 'undefined') {
+			console.warn('BroadcastChannel is not supported in this browser. GitHub login will not work.');
+			return;
+		}
+
+		const channel = new BroadcastChannel('signinwith-github');
+		const handleChannelMessage = (event) => {
+			const data = event.data;
+			if (!data || data.service !== 'github') return;
+
+			if (data.code) {
+				onSignin('github', { code: data.code, state: data.state });
+			} else if (data.error) {
+				onError?.(`GitHub login error: ${data.error}`);
+			} else {
+				onError?.('Unknown GitHub login error.');
 			}
-			if (event.data && event.data.type === 'discordAuth') {
-				if (event.data.code) {
-					onSignin('discord', { code: event.data.code });
-				} else if (event.data.error) {
-					onError?.(`Discord login error: ${event.data.error}`);
-				} else {
-					onError?.('Unknown Discord login error.');
-				}
+
+			if (popupRef.current && !popupRef.current.closed) {
+				popupRef.current.close();
 			}
+			window.__signinwithPendingProvider = null;
+			window.__signinwithPendingProviderState = null;
 		};
-		window.addEventListener('message', handleMessage);
+
+		channel.addEventListener('message', handleChannelMessage);
+
 		return () => {
-			window.removeEventListener('message', handleMessage);
+			channel.removeEventListener('message', handleChannelMessage);
+			channel.close();
 		};
 	}, [onSignin, onError]);
 
+	const handleGithubLogin = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		const {
+			clientId,
+			redirectUri,
+			scope = 'read:user user:email',
+			state = 'github',
+			allowSignup = true,
+			popupFeatures = 'width=500,height=700',
+			codeChallenge,
+			codeChallengeMethod,
+			login,
+		} = service || {};
+
+		if (!clientId || !redirectUri) {
+			onError?.('GitHub configuration is incomplete.');
+			return;
+		}
+
+		if (typeof BroadcastChannel === 'undefined') {
+			onError?.('BroadcastChannel API is not available in this browser.');
+			return;
+		}
+
+		try {
+			const params = new URLSearchParams({
+				client_id: clientId,
+				redirect_uri: redirectUri,
+				response_type: 'code',
+				scope,
+				state,
+				allow_signup: allowSignup ? 'true' : 'false',
+			});
+			if (login) params.append('login', login);
+			if (codeChallenge) {
+				params.append('code_challenge', codeChallenge);
+				if (codeChallengeMethod) {
+					params.append('code_challenge_method', codeChallengeMethod);
+				}
+			}
+
+			const githubAuthUrl = `https://github.com/login/oauth/authorize?${params.toString()}`;
+			window.__signinwithPendingProvider = 'github';
+			window.__signinwithPendingProviderState = state;
+			popupRef.current = window.open(githubAuthUrl, '_blank', popupFeatures);
+		} catch (error) {
+			console.error("Failed to initiate GitHub login:", error);
+			onError?.("Failed to initiate GitHub login.");
+		}
+	};
+
 	return (
-		<button className="signinwith-button signinwith-button-discord" onClick={handleDiscordLogin}>
-			<DiscordIcon />Continue with Discord
+		<button className="signinwith-button signinwith-button-github" onClick={handleGithubLogin}>
+			<GithubIcon />Continue with GitHub
 		</button>
 	);
 }
@@ -278,6 +418,8 @@ export default function SignInWith({ onSignin, onError, services, theme = 'light
 						return <SignInWithApple key={key} service={config} onSignin={onSignin} onError={onError} />;
 					case 'discord':
 						return <SignInWithDiscord key={key} service={config} onSignin={onSignin} onError={onError} />;
+					case 'github':
+						return <SignInWithGithub key={key} service={config} onSignin={onSignin} onError={onError} />;
 					default:
 						console.warn(`Unsupported service key: ${key}`);
 						return null;
@@ -285,4 +427,4 @@ export default function SignInWith({ onSignin, onError, services, theme = 'light
 			})}
 		</div>
 	);
-}
+}

package/readme.md

@@ -4,7 +4,7 @@ A simple and straightforward library for adding "Sign in with..." buttons (Googl
 
 ## Features
 
-*   Easy integration for Google, Facebook (Meta), Apple, and Discord sign-in.
+*   Easy integration for Google, Facebook (Meta), Apple, Discord, and GitHub sign-in.
 *   React components for the frontend buttons.
 *   Backend utility functions to verify the identity tokens/access tokens.
 *   Basic customizable styling.
@@ -32,7 +32,7 @@ function App() {
 		google: {
 			clientId: 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com',
 		},
-		meta: {
+		facebook: {
 			appId: 'YOUR_FACEBOOK_APP_ID',
 		},
 		apple: {
@@ -44,6 +44,11 @@ function App() {
 			clientId: 'YOUR_DISCORD_CLIENT_ID',
 			redirectUri: '/redirect-oauth.html',
 		},
+		github: {
+			clientId: 'YOUR_GITHUB_OAUTH_APP_CLIENT_ID',
+			redirectUri: '/redirect-oauth.html',
+			scope: 'read:user user:email',
+		},
 	};
 
 	// Callback function when sign-in is successful on the frontend
@@ -79,7 +84,7 @@ export default App;
 
 ### Props for `SignInWith`
 
-*   `services` (Object, required): An object where keys are the service names (`google`, `meta`, `apple`, `discord`) and values are their respective configuration objects.
+*   `services` (Object, required): An object where keys are the service names (`google`, `facebook`, `apple`, `discord`, `github`) and values are their respective configuration objects.
 *   `onSignin` (Function, required): A callback function that receives `(serviceName, data)` when a sign-in attempt is successful on the client-side. `data` contains the necessary information (e.g., `credential` for Google, `accessToken` for Facebook/Discord, `authorization` object for Apple) to be sent to your backend for verification.
 *   `onError` (Function, optional): A callback function that receives an error string if there's an issue during the sign-in process.
 
@@ -116,6 +121,12 @@ const servicesConfig = {
 		clientSecret: process.env.DISCORD_CLIENT_SECRET,
 		redirectUri: process.env.DISCORD_REDIRECT_URI,
 	},
+	github: {
+		clientId: process.env.GITHUB_CLIENT_ID,
+		clientSecret: process.env.GITHUB_CLIENT_SECRET,
+		redirectUri: process.env.GITHUB_REDIRECT_URI,
+		userAgent: 'your-app-name',
+	},
 };
 
 app.post('/api/auth/verify', async (req, res) => {
@@ -153,9 +164,10 @@ app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
 The main `verifySignin` function delegates to service-specific functions:
 
 *   `verifyGoogleToken(servicesConfig, data)`: Verifies the Google ID token against Google's servers.  It checks the token's signature, expiration, and audience (client ID).
-*   `verifyMetaToken(servicesConfig, data)`: Verifies the Meta (Facebook) access token by calling the Facebook Graph API. It checks if the token is valid and associated with your Facebook App.
+*   `verifyFacebookToken(servicesConfig, data)`: Verifies the Facebook (Meta) access token by calling the Facebook Graph API. It checks if the token is valid and associated with your Facebook App.
 *   `verifyAppleToken(servicesConfig, data)`: Verifies the Apple authorization code.  It checks the code's validity and audience (client ID).  It may require additional configuration depending on your Apple Developer setup (e.g., private key).
 *   `verifyDiscordToken(servicesConfig, data)`: Exchanges the Discord authorization code for an access token, then uses the access token to fetch user information from the Discord API.  It verifies that the code is valid and associated with your Discord application.
+*   `verifyGithubToken(servicesConfig, data)`: Exchanges the GitHub authorization code for an access token, then fetches the user's primary or any verified email via the GitHub API. Requires the OAuth app's `clientId`, `clientSecret`, and `redirectUri`.
 
 Each of these functions returns a promise that resolves to an object with either a `success: true` and the user's `email`, or `success: false` and an `error` message.
 
@@ -165,7 +177,7 @@ Basic styles are provided in `signinwith/styles.css`. You can import this file d
 
 The buttons have the base class `signinwith-button` and provider-specific classes:
 *   `signinwith-button-google` (Note: Google button uses `renderButton`, styling might be limited)
-*   `signinwith-button-meta`
+*   `signinwith-button-facebook`
 *   `signinwith-button-apple`
 *   `signinwith-button-discord`
 
@@ -194,16 +206,21 @@ You can override these styles in your own CSS. The container in the example uses
 		*   Set up OAuth2.
 		*   Add your redirect URI.
 		*   Get your **Client ID** and **Client Secret**.  Store the client secret securely on the backend.
+*   **GitHub:**
+		*   Create an OAuth App at [GitHub Developer Settings](https://github.com/settings/developers).
+		*   Set the Authorization callback URL to your hosted `redirect-oauth.html` (or any page that forwards the OAuth code to your frontend).
+		*   Copy the **Client ID** and **Client Secret**. Provide them to `verifySigninGithub` on the backend.
+		*   Optional: customize scopes (`read:user user:email` by default) or `allow_signup`/`state` via the React component configuration.
 
 ## Redirect URI (Popup)
 
-For Discord and Apple, the `redirectUri` in the frontend configuration should point to a static HTML file (e.g., `redirect-oauth.html`) that handles the OAuth2 code. This file facilitates communication between the popup window and the main application window. Place the following content to be the page that is set as the redirectUri:
+For Discord, GitHub, and Apple, the `redirectUri` in the frontend configuration should point to a static HTML file (e.g., `redirect-oauth.html`) that handles the OAuth2 code. This file facilitates communication between the popup window and the main application window. Place the following content to be the page that is set as the redirectUri:
 
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Discord Authentication</title>
+	<title>OAuth Authentication</title>
 	<style>
 	body {
 	  font-family: sans-serif;
@@ -227,29 +244,57 @@ For Discord and Apple, the `redirectUri` in the frontend configuration should po
 <div class="container">
 	<p>You can close this window now.</p>
 	<script>
+	(function handleOauthResult(){
 		const urlParams = new URLSearchParams(window.location.search);
 		const code = urlParams.get('code');
 		const error = urlParams.get('error');
-
-		if (code) {
-			window.opener.postMessage({ type: 'discordAuth', code: code }, window.location.origin);
-		} else if(error) {
-			window.opener.postMessage({ type: 'oauthError', error: error }, window.location.origin);
+		const state = urlParams.get('state');
+		const serviceParam = urlParams.get('service') || urlParams.get('provider');
+		const defaultService = window.opener && window.opener.__signinwithPendingProvider ? window.opener.__signinwithPendingProvider : null;
+		const fallbackState = window.opener && window.opener.__signinwithPendingProviderState ? window.opener.__signinwithPendingProviderState : null;
+		let service = serviceParam || defaultService || (state || '').replace(/^.*:/, '') || 'discord';
+		if (!service) service = 'discord';
+
+		const message = {
+			type: `${service}Auth`,
+			service,
+		};
+		if (code) message.code = code;
+		if (state || fallbackState) message.state = state || fallbackState;
+		if (error) message.error = error;
+
+		const channelName = `signinwith-${service}`;
+		if (typeof BroadcastChannel !== 'undefined') {
+			try {
+				const channel = new BroadcastChannel(channelName);
+				channel.postMessage(message);
+				channel.close();
+			} catch (err) {
+				console.error('Failed to broadcast OAuth result', err);
+			}
+		} else {
+			const target = window.opener || window.parent;
+			if (target && typeof target.postMessage === 'function') {
+				target.postMessage(message, window.location.origin);
+			}
 		}
 
 		// Attempt to close the window
 		setTimeout(() => {
 			window.close();
 		}, 0);
+	})();
 	</script>
 </div>
 </body>
 </html>
 ```
 
-This HTML file extracts the authorization code (or error) from the URL hash and sends it back to the main window using `postMessage`.  The main application needs to listen for this message and then proceed with the backend verification.  This approach is necessary because Discord's OAuth flow, when initiated in a popup, requires a way to pass the authorization code back to the originating window.
+This HTML file extracts the authorization code (or error) from the URL hash and sends it back to the main window using `BroadcastChannel` (falling back to `postMessage` when unavailable).  The main application needs to listen for this message and then proceed with the backend verification.  This approach is necessary because Discord's OAuth flow, when initiated in a popup, requires a way to pass the authorization code back to the originating window.
+
+The helper page uses the `BroadcastChannel` API to publish the OAuth result back to the main window and automatically infers the provider name (Discord, GitHub, etc.) based on the pending popup initiation, so you can re-use the same redirect page for every provider that relies on a popup + code flow.
 
 Note: you can import this page as a string (to then return it as a response from your server) via:
 ```javascript
 import htmlContent from 'signinwith/redirect-oauth.html?raw';
-```
+```

package/redirect-oauth.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Discord Authentication</title>
+	<title>OAuth Authentication</title>
 	<style>
 		body {
 			font-family: sans-serif;
@@ -24,22 +24,48 @@
 <body>
 	<div class="container">
 		<p>You can close this window now.</p>
-		<script>
-			const urlParams = new URLSearchParams(window.location.search);
-			const code = urlParams.get('code');
-			const error = urlParams.get('error');
+			<script>
+				(function handleOauthResult() {
+					const urlParams = new URLSearchParams(window.location.search);
+					const code = urlParams.get('code');
+					const error = urlParams.get('error');
+					const state = urlParams.get('state');
+					const serviceParam = urlParams.get('service') || urlParams.get('provider');
+					const defaultService = window.opener && window.opener.__signinwithPendingProvider ? window.opener.__signinwithPendingProvider : null;
+					const fallbackState = window.opener && window.opener.__signinwithPendingProviderState ? window.opener.__signinwithPendingProviderState : null;
+					let service = serviceParam || defaultService || (state || '').replace(/^.*:/, '') || 'discord';
+					if (!service) service = 'discord';
 
-			if (code) {
-				window.opener.postMessage({ type: 'discordAuth', code: code }, window.location.origin);
-			} else if(error) {
-				window.opener.postMessage({ type: 'oauthError', error: error }, window.location.origin);
-			}
+					const message = {
+						type: `${service}Auth`,
+						service,
+					};
+					if (code) message.code = code;
+					if (state || fallbackState) message.state = state || fallbackState;
+					if (error) message.error = error;
 
-			// Attempt to close the window
-			setTimeout(() => {
-				window.close();
-			}, 0);
-		</script>
+					const channelName = `signinwith-${service}`;
+					if (typeof BroadcastChannel !== 'undefined') {
+						try {
+							const channel = new BroadcastChannel(channelName);
+							channel.postMessage(message);
+							channel.close();
+						} catch (err) {
+							console.error('Failed to broadcast OAuth result', err);
+						}
+					} else {
+						const target = window.opener || window.parent;
+						if (target && typeof target.postMessage === 'function') {
+							target.postMessage(message, window.location.origin);
+						}
+					}
+
+					// Attempt to close the window
+					setTimeout(() => {
+						window.close();
+					}, 0);
+				})();
+			</script>
 	</div>
 </body>
-</html>
+</html>

package/styles.css

@@ -57,10 +57,20 @@
 			background-color: #000000;
 			color: white;
 			border-color: #000000;
-	
+
 			&:hover {
 				background-color: #333333;
 			}
 		}
+
+		&.signinwith-button-github {
+			background-color: #24292f;
+			color: white;
+			border-color: #24292f;
+
+			&:hover {
+				background-color: #1b1f23;
+			}
+		}
 	}
-}
+}