Google login integration

package-lock.json

@@ -2356,11 +2356,26 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.0.tgz",
       "integrity": "sha512-hkc1DATxFLQo4VxPDpMH1gCkPpBbpOoJ/4nhuXw4n63/0R6bCpQECj4+K226UJ4JO/eJQz+1mC2I7JsWanAdQw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz",
+      "integrity": "sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2369,6 +2384,11 @@
         "@types/node": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -4403,6 +4423,11 @@
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
       "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
     },
+    "cookie-handler": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/cookie-handler/-/cookie-handler-1.2.3.tgz",
+      "integrity": "sha512-TVP5m5HrBCfgUnHqY6lynUNjDUGZBieC3pe4yht7OBWywH4/Elq64hK30AZ4E4xUh662SmJv2MyJcxC3JmyAWw=="
+    },
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -4876,6 +4901,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
     "csv-parse": {
       "version": "4.16.0",
       "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.16.0.tgz",
@@ -12833,6 +12863,15 @@
       "resolved": "https://registry.npmjs.org/react-global-key-down-hook/-/react-global-key-down-hook-0.2.1.tgz",
       "integrity": "sha512-7bi/jJlD6VlRird5VJTKow3q28pWn6H36zhOzBmKGgklAdEjqqwyjX0vxBcHlohd08VcUUBiLxRJ/7oz3IZOiQ=="
     },
+    "react-google-login": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
+      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
+      "requires": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-helmet": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
+    "cookie-handler": "^1.2.3",
     "csv-parse": "^4.16.0",
     "express": "^4.17.1",
     "gh-pages": "^3.2.3",
@@ -17,6 +18,7 @@
     "react-bootstrap-icons": "^1.5.0",
     "react-dom": "^16.14.0",
     "react-global-key-down-hook": "^0.2.1",
+    "react-google-login": "^5.2.2",
     "react-helmet": "^6.1.0",
     "react-modal": "^3.14.3",
     "react-router": "^5.2.0",

public/index.html

@@ -24,6 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    
     <title>NGS Planner</title>
   </head>
   <body>

src/App.js

@@ -8,6 +8,8 @@ import {TrashFill, PlusCircle, LifePreserver, Server, CloudUploadFill} from 'rea
 
 import { SkillTreeEditor } from './skilltree/skillTreeEditor'
 
+import { GoogleLogin } from 'react-google-login';
+
 import {
   HashRouter,
   Switch,
@@ -652,6 +654,7 @@ function LoginForm(p) {
 	const [rememberMe,setRememberMe] = useState(false)
 	const [error,setError] = useState("")
 	const [loading,setLoading] = useState(false)
+	const [message,setMessage] = useState("")
 
 	const history = useHistory()
 
@@ -686,6 +689,37 @@ function LoginForm(p) {
 		})
 	}
 
+	function responseGoogle(response) {
+		if (response.error) {
+			setMessage(JSON.stringify(response))
+		} else 
+		if (response.profileObj.googleId&&
+			response.profileObj.imageUrl&&
+			response.profileObj.email&&
+			response.profileObj.name&&
+			response.tokenId){
+			axios.post(GetBackendURL(p)+"/registerUser",{
+				username:response.profileObj.name,
+				email:response.profileObj.email,
+				password:response.profileObj.tokenId,
+				avatar:response.profileObj.imageUrl,
+				userID:response.profileObj.googleId,
+			})
+			.then((data)=>{
+				if (data.data.verified) {
+					p.setLOGGEDINUSER(response.profileObj.name)
+					p.setLOGGEDINHASH(response.profileObj.tokenId)
+					setUsername("")
+					setPassword("")
+					setRememberMe(false)
+					history.push("/")
+				} else {
+					setError("Could not authenticate!")
+				}
+			})
+		}
+	  }
+
 	return <>
 	<Box title="Login Form">
 	{loading?
@@ -694,7 +728,18 @@ function LoginForm(p) {
 		<FormField field="username" label="Username: " value={username} maxlength={20} onChange={(p)=>{setUsername(p.currentTarget.value)}} placeholder="Username"/><br/>
 		<FormField field="password" label="Password: " type="password" value={password} onChange={(p)=>{setPassword(p.currentTarget.value)}} placeholder="Password"/><br/>
 		<FormField field="rememberMe" label="Remember Me " type="toggle" checked={rememberMe} onChange={(p)=>{setRememberMe(p.currentTarget.checked)}}/><br/>
-		<button type="submit" onClick={SubmitLogin}>Login</button></div></>
+		<button type="submit" onClick={SubmitLogin}>Login</button></div>
+		<hr/>
+		{message}<br/>
+		<GoogleLogin
+			theme="dark"
+			clientId="1081276553893-r50huhr0f9hkpcd7fdbb0oe4qcpglcpp.apps.googleusercontent.com"
+			buttonText="Login"
+			onSuccess={responseGoogle}
+			onFailure={responseGoogle}
+			cookiePolicy={'single_host_origin'}
+		/>
+		</>
 	}
 	</Box></>
 }