signinwith 1.0.1 → 1.0.3

package/index.js

@@ -1,13 +1,7 @@
-import { OAuth2Client } from 'google-auth-library';
-import appleSigninAuth from 'apple-signin-auth';
-
 export const verifySigninGoogle = async (config, verificationData) => {
-	const client = new OAuth2Client(config.clientId);
-	const ticket = await client.verifyIdToken({
-		idToken: verificationData.credential,
-		audience: config.clientId,
-	});
-	const payload = ticket.getPayload();
+	const res = await fetch(`https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=${verificationData.credential}`);
+	const payload = await res.json();
+	if (payload.aud !== config.clientId) return { success: false, error: 'Invalid aud' };
 	return payload.email ? { success: true, email: payload.email } : { success: false, error: 'Email not found' };
 };
 
@@ -19,18 +13,33 @@ export const verifySigninMeta = async (config, verificationData) => {
 
 export const verifySigninApple = async (config, verificationData) => {
 	const { id_token } = verificationData;
-	const result = await appleSigninAuth.verifyIdToken(id_token, {
-		audience: config.clientId,
-		ignoreExpiration: true,
+	const form = new FormData();
+	form.append('id_token', id_token);
+	form.append('client_id', config.clientId);
+	const res = await fetch('https://appleid.apple.com/auth/verify', {
+		method: 'POST',
+		body: form,
 	});
+	const result = await res.json();
+	if (!result.success) return { success: false, error: result.error || 'Invalid Apple signin' };
 	return result.email ? { success: true, email: result.email } : { success: false, error: 'Email not available from Apple' };
 };
+export const verifySigninDiscord = async (config, verificationData) => {
+	const res = await fetch('https://discord.com/api/v10/users/@me', {
+		headers: {
+			authorization: `Bearer ${verificationData.accessToken}`,
+		},
+	});
+	const profile = await res.json();
+	return profile.email ? { success: true, email: profile.email } : { success: false, error: 'Email not available from Discord' };
+};
 
 export default verifySignin = async (services, service, verificationData) => {
 	try {
-		if (service === 'google') return await verifySigninGoogle(services.google, verificationData);
-		if (service === 'meta') return await verifySigninMeta(services.meta, verificationData);
-		if (service === 'apple') return await verifySigninApple(services.apple, verificationData);
+		if (services.google && service === 'google') return await verifySigninGoogle(services.google, verificationData);
+		if (services.meta && service === 'meta') return await verifySigninMeta(services.meta, verificationData);
+		if (services.apple && service === 'apple') return await verifySigninApple(services.apple, verificationData);
+		if (services.discord && service === 'discord') return await verifySigninDiscord(services.discord, verificationData);
 		return { success: false, error: 'Unsupported service' };
 	} catch (err) {
 		return { success: false, error: err.message || 'Unknown error' };

package/package.json

@@ -1,14 +1,15 @@
 {
 	"name": "signinwith",
-	"version": "1.0.1",
-	"description": "Simple and straightforward library for sign in / sign up with thirdparty oAuth services like Google, Meta, Apple...",
+	"version": "1.0.3",
+	"description": "Simple and straightforward library for sign in / sign up with thirdparty oAuth services like Google, Meta, Apple, Discord...",
 	"main": "index.js",
 	"scripts": {
 	},
 	"type": "module",
 	"exports": {
 		".": "./index.js",
-		"./react": "./react.jsx"
+		"./react": "./react.jsx",
+		"./styles.css": "./styles.css"
 	},
 	"keywords": [
 		"signinwith",
@@ -27,8 +28,6 @@
 	"author": "ybouane",
 	"license": "ISC",
 	"dependencies": {
-		"apple-signin-auth": "^2.0.0",
-		"google-auth-library": "^9.15.1",
 		"react": "^19.1.0"
 	}
 }

package/react.jsx

@@ -1,34 +1,24 @@
 import React, { useEffect, useRef } from 'react';
 
-// Subcomponent: Meta (Facebook)
 const FacebookIcon = () => (
-	<svg width="20" height="20" viewBox="0 0 32 32" fill="none">
-		<rect width="32" height="32" rx="16" fill="#1877F2"/>
-		<path d="M22 16.001h-3v8h-4v-8h-2v-3h2v-2c0-2.206 1.794-4 4-4h3v3h-3c-.553 0-1 .447-1 1v2h4l-1 3z" fill="#fff"/>
-	</svg>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666.667 666.667"><defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M0 700h700V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 -133.333 800)"><path d="M600 350c0 138.071-111.929 250-250 250S100 488.071 100 350c0-117.245 80.715-215.622 189.606-242.638v166.242h-51.552V350h51.552v32.919c0 85.092 38.508 124.532 122.048 124.532 15.838 0 43.167-3.105 54.347-6.211v-69.254c-5.901.621-16.149.932-28.882.932-40.993 0-56.832-15.528-56.832-55.9V350h81.659l-14.028-76.396h-67.631V101.831C504.073 116.782 600 222.182 600 350" fill="#0866ff"/><path d="M447.918 273.604 461.947 350h-81.66v27.019c0 40.372 15.839 55.899 56.832 55.899 12.733 0 22.98-.31 28.882-.931v69.253c-11.18 3.106-38.51 6.212-54.347 6.212-83.54 0-122.048-39.441-122.048-124.533v-32.92h-51.552v-76.395h51.552V107.362A250.559 250.559 0 0 1 350 100c10.254 0 20.358.632 30.288 1.83v171.774Z" fill="#fff"/></g></svg>
 );
 
 const GoogleIcon = () => (
-	<svg width="20" height="20" viewBox="0 0 32 32" fill="none">
-		<g>
-			<circle cx="16" cy="16" r="16" fill="#fff"/>
-			<path d="M27 16.082c0-.638-.057-1.252-.163-1.837H16v3.478h6.18a5.29 5.29 0 0 1-2.293 3.47v2.885h3.7C25.98 22.13 27 19.345 27 16.082z" fill="#4285F4"/>
-			<path d="M16 27c2.43 0 4.47-.805 5.96-2.19l-3.7-2.885c-1.03.69-2.35 1.1-3.77 1.1-2.9 0-5.36-1.96-6.24-4.6h-3.8v2.89A10.997 10.997 0 0 0 16 27z" fill="#34A853"/>
-			<path d="M9.76 18.425A6.594 6.594 0 0 1 9.2 16c0-.84.15-1.655.41-2.425v-2.89h-3.8A10.997 10.997 0 0 0 5 16c0 1.73.41 3.37 1.17 4.825l3.59-2.4z" fill="#FBBC05"/>
-			<path d="M16 9.6c1.32 0 2.5.455 3.43 1.35l2.57-2.57C20.47 6.81 18.43 6 16 6A10.997 10.997 0 0 0 5.81 10.685l3.8 2.89C10.64 11.56 13.1 9.6 16 9.6z" fill="#EA4335"/>
-		</g>
-	</svg>
+	<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
 );
 
 const AppleIcon = () => (
-	<svg width="20" height="20" viewBox="0 0 32 32" fill="none">
-		<g>
-			<circle cx="16" cy="16" r="16" fill="#000"/>
-			<path d="M22.67 23.13c-.53 1.13-1.16 2.25-2.08 2.27-.89.02-1.18-.72-2.45-.72-1.27 0-1.6.7-2.44.74-.98.04-1.73-1.22-2.27-2.34-1.24-2.54-2.18-7.19.09-8.97.86-.67 2.09-.47 3.36-.47 1.26 0 2.46-.21 3.36.47 1.03.8 1.45 2.22 1.2 3.44-.25 1.22-1.01 1.82-1.01 1.82s1.13.18 1.99 1.13c.86.95.7 2.36.18 3.13zM18.6 8.8c.59-.7 1.01-1.68.89-2.67-.86.04-1.89.57-2.5 1.27-.55.62-1.04 1.62-.86 2.58.97.08 1.88-.49 2.47-1.18z" fill="#fff"/>
-		</g>
-	</svg>
+	<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000"><path fill="#FFFFFF" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg>
 );
-export function SignInWithMeta({ service, onSignin }) {
+
+// Subcomponent: Discord Icon
+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>
+);
+
+// Subcomponent: Facebook
+export function SignInWithFacebook({ service, onSignin, onError }) {
 	useEffect(() => {
 		if (!window.FB) {
 			window.fbAsyncInit = function () {
@@ -50,49 +40,86 @@ export function SignInWithMeta({ service, onSignin }) {
 		}
 	}, [service.appId]);
 
-	const handleLogin = () => {
+	const handleLogin = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
 		window.FB.login(function (response) {
 			if (response.authResponse) {
-				onSignin('meta', { accessToken: response.authResponse.accessToken });
+				onSignin('facebook', { accessToken: response.authResponse.accessToken });
+			} else {
+				onError?.('Failed to log in with Facebook.');
 			}
 		}, { scope: 'email,public_profile' });
 	};
 
-	return <button className="signinwith-button signinwith-button-meta" onClick={handleLogin}><FacebookIcon />Continue with Facebook</button>;
+	return <button className="signinwith-button signinwith-button-facebook" onClick={handleLogin}><FacebookIcon />Continue with Facebook</button>;
 }
+
 // Subcomponent: Google
-export function SignInWithGoogle({ service, onSignin }) {
+export function SignInWithGoogle({ service, onSignin, onError }) {
 	useEffect(() => {
-		const script = document.createElement('script');
-		script.src = 'https://accounts.google.com/gsi/client';
-		script.async = true;
-		script.defer = true;
-		script.onload = () => {
+		const scriptId = 'google-gsi-script';
+		let script = document.getElementById(scriptId);
+
+		if (!script) {
+			script = document.createElement('script');
+			script.id = scriptId;
+			script.src = 'https://accounts.google.com/gsi/client';
+			script.async = true;
+			script.defer = true;
+			script.onload = () => {
+				if (window.google?.accounts?.id) {
+					window.google.accounts.id.initialize({
+						client_id: service.clientId,
+						use_fedcm_for_prompt: true,
+						callback: (res) => {
+							onSignin('google', { credential: res.credential });
+						}
+					});
+				} else {
+					onError?.('Google Sign-In script loaded but initialization failed.');
+				}
+			};
+			script.onerror = () => {
+				onError?.('Failed to load Google Sign-In script.');
+			};
+			document.body.appendChild(script);
+		} else if (window.google?.accounts?.id) {
+			// If script already exists, ensure it's initialized (might be needed if component remounts)
 			window.google.accounts.id.initialize({
 				client_id: service.clientId,
+				use_fedcm_for_prompt: true,
 				callback: (res) => {
 					onSignin('google', { credential: res.credential });
 				}
 			});
-		};
-		document.body.appendChild(script);
+		}
+
 
+		// Cleanup function does not remove the script to allow multiple instances
+		// or remounts without reloading. Google's script handles this internally.
 		return () => {
-			const scriptTag = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
-			if (scriptTag) {
-				document.body.removeChild(scriptTag);
-			}
+			// Optional: You might want to hide the prompt if the component unmounts
+			// window.google?.accounts?.id?.cancel();
 		};
-	}, [service.clientId]);
-
-	const handleGoogleLogin = () => {
-		window.google.accounts.id.requestCredential({
-			clientId: service.clientId,
-			callback: (res) => {
-				onSignin('google', { credential: res.credential });
-			},
-			scopes: ['email', 'profile']
-		});
+	}, [service.clientId, onSignin, onError]);
+
+	const handleGoogleLogin = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		if (window.google?.accounts?.id) {
+			window.google.accounts.id.prompt((notification) => {
+				// Handle prompt UI notifications (e.g., closed, error)
+				if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+					// Potentially trigger a backup UX or just log
+					onError?.(notification.getNotDisplayedReason() || notification.getSkippedReason() || 'Google Sign-In prompt was not displayed or was skipped.');
+				} else if (notification.isDismissedMoment()) {
+					onError?.(notification.getDismissedReason() || 'Google Sign-In prompt was dismissed.');
+				}
+			});
+		} else {
+			onError?.('Google Sign-In is not initialized.');
+		}
 	};
 
 	return (
@@ -103,36 +130,158 @@ export function SignInWithGoogle({ service, onSignin }) {
 }
 
 // Subcomponent: Apple
-export function SignInWithApple({ service, onSignin }) {
+export function SignInWithApple({ service, onSignin, onError }) {
 	useEffect(() => {
-		const script = document.createElement('script');
-		script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
-		script.onload = () => {
-			window.AppleID.auth.init({
-				clientId: service.clientId,
-				scope: 'email name',
-				redirectURI: window.location.origin + '/auth/apple/callback',
-				usePopup: true,
-			});
-			window.addEventListener('AppleIDSignInOnSuccess', (e) => {
-				onSignin('apple', e.detail.authorization);
+		const scriptId = 'apple-auth-script';
+		let script = document.getElementById(scriptId);
+
+		const handleAppleSignInSuccess = (event) => {
+			onSignin('apple', event.detail.authorization);
+		};
+		const handleAppleSignInFailure = (event) => {
+			onError?.(event.detail.error || 'Sign in with Apple failed.');
+		};
+
+		if (!script) {
+			script = document.createElement('script');
+			script.id = scriptId;
+			script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+			script.async = true;
+			script.defer = true;
+			script.onload = () => {
+				try {
+					window.AppleID.auth.init({
+						clientId: service.clientId,
+						scope: service.scope || 'email name', // Default scope
+						redirectURI: service.redirectUri, // Default redirect URI
+						usePopup: true,
+					});
+				} catch (error) {
+					console.error("Apple Sign In initialization failed:", error);
+					onError?.('Failed to initialize Apple Sign In.');
+					return; // Stop if init fails
+				}
+				// Add event listeners after successful initialization
+				document.addEventListener('AppleIDSignInOnSuccess', handleAppleSignInSuccess);
+				document.addEventListener('AppleIDSignInOnFailure', handleAppleSignInFailure);
+			};
+			script.onerror = () => {
+				onError?.('Failed to load Apple Sign In script.');
+			};
+			document.body.appendChild(script);
+		} else {
+			// If script exists, re-add listeners in case component remounted
+			document.removeEventListener('AppleIDSignInOnSuccess', handleAppleSignInSuccess);
+			document.removeEventListener('AppleIDSignInOnFailure', handleAppleSignInFailure);
+			document.addEventListener('AppleIDSignInOnSuccess', handleAppleSignInSuccess);
+			document.addEventListener('AppleIDSignInOnFailure', handleAppleSignInFailure);
+		}
+
+		return () => {
+			// Cleanup listeners when component unmounts
+			document.removeEventListener('AppleIDSignInOnSuccess', handleAppleSignInSuccess);
+			document.removeEventListener('AppleIDSignInOnFailure', handleAppleSignInFailure);
+		};
+	}, [service.clientId, service.scope, service.redirectUri, service.usePopup, onSignin, onError]);
+
+	const handleAppleLogin = async (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		try {
+			if (window.AppleID?.auth) {
+				await window.AppleID.auth.signIn();
+			} else {
+				onError?.('Apple Sign In is not initialized.');
+			}
+		} catch (error) {
+			// This catch might handle errors from the signIn() call itself,
+			// though the event listener is the primary mechanism.
+			console.error("Apple Sign In error:", error);
+			onError?.('An error occurred during Apple Sign In.');
+		}
+	};
+	return <button className="signinwith-button signinwith-button-apple" onClick={handleAppleLogin}><AppleIcon />Continue with Apple</button>;
+}
+
+// Subcomponent: Discord
+export function SignInWithDiscord({ service, onSignin, onError }) {
+	const handleDiscordLogin = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		const { clientId, redirectUri, scope = 'identify email' } = service; // Default scopes
+
+		if (!clientId || !redirectUri) {
+			console.error("Discord service configuration missing clientId or redirectUri.");
+			onError?.("Discord configuration is incomplete.");
+			return;
+		}
+
+		try {
+			const params = new URLSearchParams({
+				client_id: clientId,
+				redirect_uri: redirectUri,
+				response_type: 'code',
+				scope: scope,
 			});
+
+			const discordAuthUrl = `https://discord.com/api/oauth2/authorize?${params.toString()}`;
+
+			window.open(discordAuthUrl);
+		} catch (error) {
+			console.error("Failed to initiate Discord login:", error);
+			onError?.("Failed to initiate Discord login.");
+		}
+	};
+	useEffect(() => {
+		const handleMessage = (event) => {
+			if (event.origin !== window.location.origin) {
+				return; // Only accept messages from the same origin
+			}
+			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.');
+				}
+			}
+		};
+		window.addEventListener('message', handleMessage);
+		return () => {
+			window.removeEventListener('message', handleMessage);
 		};
-		document.body.appendChild(script);
-	}, [service.clientId]);
+	}, [onSignin, onError]);
 
-	return <button className="signinwith-button signinwith-button-apple" onClick={() => window.AppleID.auth.signIn()}><AppleIcon />Continue with Apple</button>;
+	return (
+		<button className="signinwith-button signinwith-button-discord" onClick={handleDiscordLogin}>
+			<DiscordIcon />Continue with Discord
+		</button>
+	);
 }
 
+
 // Main SignInWith Component
-export default function SignInWith({ onSignin, services, theme = 'light' }) {
+export default function SignInWith({ onSignin, onError, services, theme = 'light' }) {
 	return (
-		<div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
-			{Object.entries(services).map(([key, config]) => {
-				if (key === 'google') return <SignInWithGoogle key={key} service={config} onSignin={onSignin} />;
-				if (key === 'meta') return <SignInWithMeta key={key} service={config} onSignin={onSignin} />;
-				if (key === 'apple') return <SignInWithApple key={key} service={config} onSignin={onSignin} />;
-				return null;
+		<div className={`signinwith-container signinwith-theme-${theme}`}>
+			{Object.entries(services || {}).map(([key, config]) => { // Added default {} for services
+				if (!config) return null; // Skip if config is null/undefined
+
+				switch (key.toLowerCase()) { // Use lowercase key for case-insensitivity
+					case 'google':
+						return <SignInWithGoogle key={key} service={config} onSignin={onSignin} onError={onError} />;
+					case 'facebook':
+						return <SignInWithFacebook key={key} service={config} onSignin={onSignin} onError={onError} />;
+					case 'apple':
+						return <SignInWithApple key={key} service={config} onSignin={onSignin} onError={onError} />;
+					case 'discord':
+						return <SignInWithDiscord key={key} service={config} onSignin={onSignin} onError={onError} />;
+					default:
+						console.warn(`Unsupported service key: ${key}`);
+						return null;
+				}
 			})}
 		</div>
 	);

package/readme.md

@@ -1,10 +1,10 @@
 # Sign In With
 
-A simple and straightforward library for adding "Sign in with..." buttons (Google, Meta/Facebook, Apple) to your web application, handling both the frontend UI (React) and backend verification.
+A simple and straightforward library for adding "Sign in with..." buttons (Google, Facebook/Meta, Apple, Discord) to your web application, handling both the frontend UI (React) and backend verification.
 
 ## Features
 
-*   Easy integration for Google, Meta (Facebook), and Apple sign-in.
+*   Easy integration for Google, Facebook (Meta), Apple, and Discord sign-in.
 *   React components for the frontend buttons.
 *   Backend utility functions to verify the identity tokens/access tokens.
 *   Basic customizable styling.
@@ -27,47 +27,51 @@ import SignInWith from 'signinwith/react';
 import 'signinwith/styles.css'; // Import the styles
 
 function App() {
-  // Configuration for the services you want to enable
-  const services = {
-    google: {
-      clientId: 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com',
-    },
-    meta: {
-      appId: 'YOUR_FACEBOOK_APP_ID',
-    },
-    apple: {
-      clientId: 'YOUR_APPLE_SERVICE_ID', // e.g., com.mywebsite.signin
-      // redirectURI is automatically set to window.location.origin + '/auth/apple/callback'
-      // Ensure this callback route exists or handle the popup flow appropriately.
-    },
-  };
-
-  // Callback function when sign-in is successful on the frontend
-  const handleSignin = (service, data) => {
-    console.log(`Signed in with ${service}:`, data);
-    // Send 'service' and 'data' to your backend for verification
-    fetch('/api/auth/verify', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ service, data }),
-    })
-      .then(res => res.json())
-      .then(result => {
-        if (result.success) {
-          console.log('Backend verification successful:', result.email);
-          // Proceed with user session, redirect, etc.
-        } else {
-          console.error('Backend verification failed:', result.error);
-        }
-      });
-  };
-
-  return (
-    <div className="signinwith-container">
-      <h2>Sign In</h2>
-      <SignInWith services={services} onSignin={handleSignin} />
-    </div>
-  );
+	// Configuration for the services you want to enable
+	const services = {
+		google: {
+			clientId: 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com',
+		},
+		meta: {
+			appId: 'YOUR_FACEBOOK_APP_ID',
+		},
+		apple: {
+			clientId: 'YOUR_APPLE_SERVICE_ID', // e.g., com.mywebsite.signin
+			redirectUri: '/redirect-oauth.html'
+			// Ensure this callback route exists or handle the popup flow appropriately.
+		},
+		discord: {
+			clientId: 'YOUR_DISCORD_CLIENT_ID',
+			redirectUri: '/redirect-oauth.html',
+		},
+	};
+
+	// Callback function when sign-in is successful on the frontend
+	const handleSignin = (service, data) => {
+		console.log(`Signed in with ${service}:`, data);
+		// Send 'service' and 'data' to your backend for verification
+		fetch('/api/auth/verify', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ service, data }),
+		})
+			.then(res => res.json())
+			.then(result => {
+				if (result.success) {
+					console.log('Backend verification successful:', result.email);
+					// Proceed with user session, redirect, etc.
+				} else {
+					console.error('Backend verification failed:', result.error);
+				}
+			});
+	};
+
+	return (
+		<div className="signinwith-container">
+			<h2>Sign In</h2>
+			<SignInWith services={services} onSignin={handleSignin}  onError={error=>console.error(error)} />
+		</div>
+	);
 }
 
 export default App;
@@ -75,8 +79,9 @@ export default App;
 
 ### Props for `SignInWith`
 
-*   `services` (Object, required): An object where keys are the service names (`google`, `meta`, `apple`) 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 Meta, `authorization` object for Apple) to be sent to your backend for verification.
+*   `services` (Object, required): An object where keys are the service names (`google`, `meta`, `apple`, `discord`) 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.
 
 ## Backend Verification
 
@@ -93,44 +98,49 @@ app.use(express.json());
 // Your service configurations (should match frontend, plus any secrets)
 // Store these securely, e.g., in environment variables
 const servicesConfig = {
-  google: {
-    clientId: process.env.GOOGLE_CLIENT_ID,
-  },
-  meta: {
-    // Meta verification only needs the access token from the frontend
-    // No specific backend config needed here for the library function itself
-    // but you might need App ID/Secret for other Graph API calls.
-  },
-  apple: {
-    clientId: process.env.APPLE_CLIENT_ID, // Your Service ID (e.g., com.mywebsite.signin)
-    // The library uses apple-signin-auth which might require more config
-    // depending on how you generated your keys. Refer to its documentation.
-  },
+	google: {
+		clientId: process.env.GOOGLE_CLIENT_ID,
+	},
+	facebook: {
+		// Facebook verification only needs the access token from the frontend
+		// No specific backend config needed here for the library function itself
+		// but you might need App ID/Secret for other Graph API calls.
+	},
+	apple: {
+		clientId: process.env.APPLE_CLIENT_ID, // Your Service ID (e.g., com.mywebsite.signin)
+		// The library uses apple-signin-auth which might require more config
+		// depending on how you generated your keys. Refer to its documentation.
+	},
+	discord: {
+		clientId: process.env.DISCORD_CLIENT_ID,
+		clientSecret: process.env.DISCORD_CLIENT_SECRET,
+		redirectUri: process.env.DISCORD_REDIRECT_URI,
+	},
 };
 
 app.post('/api/auth/verify', async (req, res) => {
-  const { service, data } = req.body;
-
-  if (!service || !data) {
-    return res.status(400).json({ success: false, error: 'Missing service or data' });
-  }
-
-  try {
-    const result = await verifySignin(servicesConfig, service, data);
-    if (result.success) {
-      // Verification successful!
-      // Find or create user with result.email
-      console.log(`Verified ${service} sign in for: ${result.email}`);
-      res.json({ success: true, email: result.email });
-    } else {
-      // Verification failed
-      console.error(`Failed to verify ${service}: ${result.error}`);
-      res.status(401).json({ success: false, error: result.error || 'Verification failed' });
-    }
-  } catch (error) {
-    console.error(`Error during ${service} verification:`, error);
-    res.status(500).json({ success: false, error: 'Internal server error' });
-  }
+	const { service, data } = req.body;
+
+	if (!service || !data) {
+		return res.status(400).json({ success: false, error: 'Missing service or data' });
+	}
+
+	try {
+		const result = await verifySignin(servicesConfig, service, data);
+		if (result.success) {
+			// Verification successful!
+			// Find or create user with result.email
+			console.log(`Verified ${service} sign in for: ${result.email}`);
+			res.json({ success: true, email: result.email });
+		} else {
+			// Verification failed
+			console.error(`Failed to verify ${service}: ${result.error}`);
+			res.status(401).json({ success: false, error: result.error || 'Verification failed' });
+		}
+	} catch (error) {
+		console.error(`Error during ${service} verification:`, error);
+		res.status(500).json({ success: false, error: 'Internal server error' });
+	}
 });
 
 const PORT = process.env.PORT || 3001;
@@ -138,19 +148,16 @@ app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
 
 ```
 
-### Verification Functions
+### Verification
 
 The main `verifySignin` function delegates to service-specific functions:
 
-*   `verifySigninGoogle(config, verificationData)`: Verifies Google ID token.
-    *   `config`: Needs `{ clientId }`.
-    *   `verificationData`: Needs `{ credential }`.
-*   `verifySigninMeta(config, verificationData)`: Verifies Meta access token by fetching user email.
-    *   `config`: Not directly used by the function, but you need your App ID configured on the frontend.
-    *   `verificationData`: Needs `{ accessToken }`.
-*   `verifySigninApple(config, verificationData)`: Verifies Apple ID token.
-    *   `config`: Needs `{ clientId }` (Your Apple Service ID).
-    *   `verificationData`: Needs `{ id_token }` (from the `authorization` object).
+*   `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.
+*   `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.
+
+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.
 
 ## Styling
 
@@ -160,28 +167,84 @@ The buttons have the base class `signinwith-button` and provider-specific classe
 *   `signinwith-button-google` (Note: Google button uses `renderButton`, styling might be limited)
 *   `signinwith-button-meta`
 *   `signinwith-button-apple`
+*   `signinwith-button-discord`
 
 You can override these styles in your own CSS. The container in the example uses `signinwith-container` for layout.
 
 ## Configuration Details
 
 *   **Google:**
-    *   Create a project in [Google Cloud Console](https://console.cloud.google.com/).
-    *   Set up OAuth 2.0 Credentials (Web application type).
-    *   Add your domain(s) to "Authorized JavaScript origins".
-    *   Add your backend callback URL (if applicable) to "Authorized redirect URIs".
-    *   Get your **Client ID**.
-*   **Meta (Facebook):**
-    *   Create an App at [Meta for Developers](https://developers.facebook.com/).
-    *   Set up "Facebook Login for Business".
-    *   Add your domain(s) to the App Domains and Site URL in the app settings.
-    *   Get your **App ID**.
+		*   Create a project in [Google Cloud Console](https://console.cloud.google.com/).
+		*   Set up OAuth 2.0 Credentials (Web application type).
+		*   Add your domain(s) to "Authorized JavaScript origins".
+		*   Add your backend callback URL (if applicable) to "Authorized redirect URIs".
+		*   Get your **Client ID**.
+*   **Facebook (Meta):**
+		*   Create an App at [Facebook for Developers](https://developers.facebook.com/).
+		*   Set up "Facebook Login for Business".
+		*   Add your domain(s) to the App Domains and Site URL in the app settings.
+		*   Get your **App ID**.
 *   **Apple:**
-    *   Register an App ID and a Service ID in your [Apple Developer Account](https://developer.apple.com/).
-    *   Configure "Sign in with Apple" for your App ID.
-    *   Associate your domain(s) with the Service ID and verify them.
-    *   Get your **Service ID** (used as `clientId`). You might also need a private key for certain backend operations, but `apple-signin-auth` handles basic token verification with just the `clientId` (audience check). Ensure the frontend `redirectURI` is correctly handled (either via a backend route or popup flow).
-
-## License
+		*   Register an App ID and a Service ID in your [Apple Developer Account](https://developer.apple.com/).
+		*   Configure "Sign in with Apple" for your App ID.
+		*   Associate your domain(s) with the Service ID and verify them.
+		*   Get your **Service ID** (used as `clientId`). You might also need a private key for certain backend operations, but `apple-signin-auth` handles basic token verification with just the `clientId` (audience check). Ensure the frontend `redirectUri` is correctly handled (either via a backend route or popup flow).
+*   **Discord:**
+		*   Create an App at [Discord Developer Portal](https://discord.com/developers/applications).
+		*   Set up OAuth2.
+		*   Add your redirect URI.
+		*   Get your **Client ID** and **Client Secret**.  Store the client secret securely on the backend.
+
+## 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:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Discord Authentication</title>
+	<style>
+	body {
+	  font-family: sans-serif;
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  height: 100vh;
+	  margin: 0;
+	  background-color: #f0f0f0;
+	}
+	.container {
+	  text-align: center;
+	  padding: 20px;
+	  background-color: #fff;
+	  border-radius: 8px;
+	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	}
+  </style>
+</head>
+<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');
+
+		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);
+		}
+
+		// Attempt to close the window
+		setTimeout(() => {
+			window.close();
+		}, 0);
+	</script>
+</div>
+</body>
+</html>
+```
 
-ISC
+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.

package/styles.css

@@ -1,56 +1,55 @@
-.signinwith-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 10px 24px;
-	border: 1px solid #dadce0;
-	border-radius: 4px;
-	font-size: 14px;
-	font-weight: 500;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	cursor: pointer;
-	text-align: center;
-	text-decoration: none;
-	min-width: 220px;
-	height: 40px;
-	box-sizing: border-box;
-	transition: background-color 0.3s ease, border-color 0.3s ease;
-	color: #3c4043;
-	background-color: #ffffff;
-
-	&:hover {
-		background-color: #f8f9fa;
-	}
-
-	&-meta {
-		background-color: #1877F2;
-		color: white;
-		border-color: #1877F2;
-
-		&:hover {
-			background-color: #166FE5;
+.signinwith-container {
+	display: flex;
+	gap: 10px;
+	flex-direction: column;
+	align-items: stretch;
+	padding:10px 0px;
+	.signinwith-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 10px 24px;
+		border: 1px solid #dadce0;
+		border-radius: 4px;
+		font-size: 14px;
+		font-weight: 500;
+		cursor: pointer;
+		text-align: center;
+		text-decoration: none;
+		align-self: stretch;
+		box-sizing: border-box;
+		transition: background-color 0.3s ease, border-color 0.3s ease;
+		color: #3c4043;
+		background-color: #ffffff;
+	
+		& svg {
+			width:auto;
+			height:20px;
+			margin-right: 4px;
 		}
-	}
-
-	&-apple {
-		background-color: #000000;
-		color: white;
-		border-color: #000000;
-
+	
 		&:hover {
-			background-color: #333333;
+			background-color: #f8f9fa;
+		}
+	
+		&.signinwith-button-facebook {
+			background-color: #1877F2;
+			color: white;
+			border-color: #0866ff;
+	
+			&:hover {
+				background-color: #0866ff;
+			}
+		}
+	
+		&.signinwith-button-apple {
+			background-color: #000000;
+			color: white;
+			border-color: #000000;
+	
+			&:hover {
+				background-color: #333333;
+			}
 		}
 	}
-}
-
-
-#google-signin-btn > div {
-	 margin: 0 !important;
-}
-
-.signinwith-container {
-	display: flex;
-	gap: 1rem;
-	flex-direction: column;
-	align-items: center;
 }