signinwith 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/react.jsx +52 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "signinwith",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Simple and straightforward library for sign in / sign up with thirdparty oAuth services like Google, Meta, Apple...",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/react.jsx CHANGED
@@ -1,6 +1,33 @@
1
- import React, { useEffect } from 'react';
1
+ import React, { useEffect, useRef } from 'react';
2
2
 
3
3
  // Subcomponent: Meta (Facebook)
4
+ const FacebookIcon = () => (
5
+ <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
6
+ <rect width="32" height="32" rx="16" fill="#1877F2"/>
7
+ <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"/>
8
+ </svg>
9
+ );
10
+
11
+ const GoogleIcon = () => (
12
+ <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
13
+ <g>
14
+ <circle cx="16" cy="16" r="16" fill="#fff"/>
15
+ <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"/>
16
+ <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"/>
17
+ <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"/>
18
+ <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"/>
19
+ </g>
20
+ </svg>
21
+ );
22
+
23
+ const AppleIcon = () => (
24
+ <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
25
+ <g>
26
+ <circle cx="16" cy="16" r="16" fill="#000"/>
27
+ <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"/>
28
+ </g>
29
+ </svg>
30
+ );
4
31
  export function SignInWithMeta({ service, onSignin }) {
5
32
  useEffect(() => {
6
33
  if (!window.FB) {
@@ -31,12 +58,10 @@ export function SignInWithMeta({ service, onSignin }) {
31
58
  }, { scope: 'email,public_profile' });
32
59
  };
33
60
 
34
- return <button className="signinwith-button signinwith-button-meta" onClick={handleLogin}>Continue with Facebook</button>;
61
+ return <button className="signinwith-button signinwith-button-meta" onClick={handleLogin}><FacebookIcon />Continue with Facebook</button>;
35
62
  }
36
-
37
63
  // Subcomponent: Google
38
64
  export function SignInWithGoogle({ service, onSignin }) {
39
- let btnRef = useRef();
40
65
  useEffect(() => {
41
66
  const script = document.createElement('script');
42
67
  script.src = 'https://accounts.google.com/gsi/client';
@@ -49,15 +74,32 @@ export function SignInWithGoogle({ service, onSignin }) {
49
74
  onSignin('google', { credential: res.credential });
50
75
  }
51
76
  });
52
- window.google.accounts.id.renderButton(
53
- ref.current,
54
- { theme: 'outline', size: 'large' }
55
- );
56
77
  };
57
78
  document.body.appendChild(script);
79
+
80
+ return () => {
81
+ const scriptTag = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
82
+ if (scriptTag) {
83
+ document.body.removeChild(scriptTag);
84
+ }
85
+ };
58
86
  }, [service.clientId]);
59
87
 
60
- return <div className="signinwith-button signinwith-button-google" ref={btnRef}></div>;
88
+ const handleGoogleLogin = () => {
89
+ window.google.accounts.id.requestCredential({
90
+ clientId: service.clientId,
91
+ callback: (res) => {
92
+ onSignin('google', { credential: res.credential });
93
+ },
94
+ scopes: ['email', 'profile']
95
+ });
96
+ };
97
+
98
+ return (
99
+ <button className="signinwith-button signinwith-button-google" onClick={handleGoogleLogin}>
100
+ <GoogleIcon />Continue with Google
101
+ </button>
102
+ );
61
103
  }
62
104
 
63
105
  // Subcomponent: Apple
@@ -79,7 +121,7 @@ export function SignInWithApple({ service, onSignin }) {
79
121
  document.body.appendChild(script);
80
122
  }, [service.clientId]);
81
123
 
82
- return <button className="signinwith-button signinwith-button-apple" onClick={() => window.AppleID.auth.signIn()}>Continue with Apple</button>;
124
+ return <button className="signinwith-button signinwith-button-apple" onClick={() => window.AppleID.auth.signIn()}><AppleIcon />Continue with Apple</button>;
83
125
  }
84
126
 
85
127
  // Main SignInWith Component