signinwith 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "signinwith",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Simple and straightforward library for sign in / sign up with thirdparty oAuth services like Google, Meta, Apple...",
 	"main": "index.js",
 	"scripts": {
@@ -8,7 +8,8 @@
 	"type": "module",
 	"exports": {
 		".": "./index.js",
-		"./react": "./react.jsx"
+		"./react": "./react.jsx",
+		"./styles.css": "./styles.css"
 	},
 	"keywords": [
 		"signinwith",

package/react.jsx

@@ -1,34 +1,19 @@
 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: Facebook (Facebook)
+export function SignInWithFacebook({ service, onSignin, onError }) {
 	useEffect(() => {
 		if (!window.FB) {
 			window.fbAsyncInit = function () {
@@ -50,18 +35,20 @@ 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 });
 			}
 		}, { 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';
@@ -70,6 +57,7 @@ export function SignInWithGoogle({ service, onSignin }) {
 		script.onload = () => {
 			window.google.accounts.id.initialize({
 				client_id: service.clientId,
+				use_fedcm_for_prompt: true,
 				callback: (res) => {
 					onSignin('google', { credential: res.credential });
 				}
@@ -85,13 +73,11 @@ export function SignInWithGoogle({ service, onSignin }) {
 		};
 	}, [service.clientId]);
 
-	const handleGoogleLogin = () => {
-		window.google.accounts.id.requestCredential({
-			clientId: service.clientId,
-			callback: (res) => {
-				onSignin('google', { credential: res.credential });
-			},
-			scopes: ['email', 'profile']
+	const handleGoogleLogin = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		window.google.accounts.id.prompt((notification) => {
+			onError?.(notification.getDismissedReason() || 'Sign-in with Google failed.');
 		});
 	};
 
@@ -103,7 +89,7 @@ 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';
@@ -120,18 +106,22 @@ export function SignInWithApple({ service, onSignin }) {
 		};
 		document.body.appendChild(script);
 	}, [service.clientId]);
-
-	return <button className="signinwith-button signinwith-button-apple" onClick={() => window.AppleID.auth.signIn()}><AppleIcon />Continue with Apple</button>;
+	const handleAppleLogin = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		window.AppleID.auth.signIn();
+	};
+	return <button className="signinwith-button signinwith-button-apple" onClick={handleAppleLogin}><AppleIcon />Continue with Apple</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' }}>
+		<div className={`signinwith-container signinwith-theme-${theme}`}>
 			{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} />;
+				if (key === 'google') return <SignInWithGoogle key={key} service={config} onSignin={onSignin} onError={onError} />;
+				if (key === 'facebook') return <SignInWithFacebook key={key} service={config} onSignin={onSignin} onError={onError} />;
+				if (key === 'apple') return <SignInWithApple key={key} service={config} onSignin={onSignin} onError={onError} />;
 				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) 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), and Apple sign-in.
 *   React components for the frontend buttons.
 *   Backend utility functions to verify the identity tokens/access tokens.
 *   Basic customizable styling.
@@ -65,7 +65,7 @@ function App() {
   return (
     <div className="signinwith-container">
       <h2>Sign In</h2>
-      <SignInWith services={services} onSignin={handleSignin} />
+      <SignInWith services={services} onSignin={handleSignin}  onError={error=>console.error(error)} />
     </div>
   );
 }
@@ -76,7 +76,8 @@ 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.
+*   `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, `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
 
@@ -96,8 +97,8 @@ const servicesConfig = {
   google: {
     clientId: process.env.GOOGLE_CLIENT_ID,
   },
-  meta: {
-    // Meta verification only needs the access token from the frontend
+  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.
   },
@@ -145,7 +146,7 @@ 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.
+*   `verifySigninFacebook(config, verificationData)`: Verifies Facebook 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.
@@ -171,8 +172,8 @@ You can override these styles in your own CSS. The container in the example uses
     *   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/).
+*   **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**.

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;
 }