Skip to content

A
ajs12_shop
Commit 15af72ce authored by Egor Kremnev's avatar Egor Kremnev
Browse files
Options

add google auth

parent 0f9e029b
Hide whitespace changes
Inline Side-by-side
Showing with 476 additions and 2 deletions
README.md
View file @ 15af72ce
This shop api and front clent
\ No newline at end of file
This shop api and front client
api_client/.env.example 0 → 100644
View file @ 15af72ce
NODE_FACEBOOK_APP_ID=
NODE_FACEBOOK_SECRET=
NODE_GOOGLE_APP_ID=116339632653-c637pvdqe9csqchit034e3tv77ki94cp.apps.googleusercontent.com
NODE_GOOLGE_SECRET=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
api_client/.gitignore
View file @ 15af72ce
......@@ -13,6 +13,7 @@
# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
......
api_client/config.js
View file @ 15af72ce
......@@ -10,5 +10,13 @@ module.exports = {
db: {
host: 'mongodb://127.0.0.1',
database: isTest ? 'shop_test' : 'shop',
},
facebook: {
appId: process.env.NODE_FACEBOOK_APP_ID,
secretApp: process.env.NODE_FACEBOOK_SECRET,
},
google: {
appId: process.env.NODE_GOOGLEK_APP_ID,
secretApp: process.env.NODE_GOOGLE_SECRET,
}
};
api_client/index.js
View file @ 15af72ce
require('dotenv').config();
const cors = require('cors');
const express = require('express');
const app = express();
......
api_client/models/User.js
View file @ 15af72ce
......@@ -9,6 +9,14 @@ const UserSchema = new Schema({
type: String,
required: true
},
facebookId: {
type: String,
unique: true
},
googleId: {
type: String,
unique: true
},
username: {
type: String,
required: true,
......
api_client/package-lock.json
View file @ 15af72ce
......@@ -9,10 +9,13 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"axios": "^1.4.0",
"bcrypt": "^5.1.0",
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"fix-esm": "^1.0.1",
"google-auth-library": "^9.0.0",
"mongodb": "^5.3.0",
"mongoose": "^6.5.0",
"mongoose-id-validator": "^0.6.0",
......@@ -670,6 +673,21 @@
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -707,6 +725,14 @@
"node": ">= 10.0.0"
}
},
"node_modules/bignumber.js": {
"version": "9.1.1",
"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
"integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
"engines": {
"node": "*"
}
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
......@@ -818,6 +844,11 @@
"ieee754": "^1.1.13"
}
},
"node_modules/buffer-equal-constant-time": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
"integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
},
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
......@@ -950,6 +981,17 @@
"color-support": "bin.js"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
......@@ -1036,6 +1078,14 @@
"ms": "2.0.0"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
......@@ -1074,6 +1124,25 @@
"node": ">=8"
}
},
"node_modules/dotenv": {
"version": "16.3.1",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
"integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/motdotla/dotenv?sponsor=1"
}
},
"node_modules/ecdsa-sig-formatter": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
"integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
"dependencies": {
"safe-buffer": "^5.0.1"
}
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......@@ -1167,6 +1236,11 @@
"node": ">= 0.10.0"
}
},
"node_modules/extend": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
},
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
......@@ -1206,6 +1280,38 @@
"@babel/plugin-transform-modules-commonjs": "^7.14.5"
}
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
......@@ -1292,6 +1398,32 @@
"node": ">=10"
}
},
"node_modules/gaxios": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-6.0.3.tgz",
"integrity": "sha512-ns+NiTWT9daIerko/qAj8HSPNuNNlzGGrEVB7y8MQ8CP0bymuR8fCql6Ec+rlh7b9BW18JDXQnJNXWMiWO3jlg==",
"dependencies": {
"extend": "^3.0.2",
"https-proxy-agent": "^5.0.0",
"is-stream": "^2.0.0",
"node-fetch": "^2.6.9"
},
"engines": {
"node": ">=14"
}
},
"node_modules/gcp-metadata": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-6.0.0.tgz",
"integrity": "sha512-Ozxyi23/1Ar51wjUT2RDklK+3HxqDr8TLBNK8rBBFQ7T85iIGnXnVusauj06QyqCXRFZig8LZC+TUddWbndlpQ==",
"dependencies": {
"gaxios": "^6.0.0",
"json-bigint": "^1.0.0"
},
"engines": {
"node": ">=14"
}
},
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
......@@ -1352,6 +1484,51 @@
"node": ">=4"
}
},
"node_modules/google-auth-library": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.0.0.tgz",
"integrity": "sha512-IQGjgQoVUAfOk6khqTVMLvWx26R+yPw9uLyb1MNyMQpdKiKt0Fd9sp4NWoINjyGHR8S3iw12hMTYK7O8J07c6Q==",
"dependencies": {
"base64-js": "^1.3.0",
"ecdsa-sig-formatter": "^1.0.11",
"gaxios": "^6.0.0",
"gcp-metadata": "^6.0.0",
"gtoken": "^7.0.0",
"jws": "^4.0.0",
"lru-cache": "^6.0.0"
},
"engines": {
"node": ">=14"
}
},
"node_modules/google-auth-library/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dependencies": {
"yallist": "^4.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/google-auth-library/node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
},
"node_modules/gtoken": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.0.1.tgz",
"integrity": "sha512-KcFVtoP1CVFtQu0aSk3AyAt2og66PFhZAlkUOuWKwzMLoulHXG5W5wE5xAnHb+yl3/wEFoqGW7/cDGMU8igDZQ==",
"dependencies": {
"gaxios": "^6.0.0",
"jws": "^4.0.0"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
......@@ -1548,6 +1725,17 @@
"node": ">=0.12.0"
}
},
"node_modules/is-stream": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
......@@ -1569,6 +1757,14 @@
"node": ">=4"
}
},
"node_modules/json-bigint": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
"integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
"dependencies": {
"bignumber.js": "^9.0.0"
}
},
"node_modules/json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
......@@ -1580,6 +1776,25 @@
"node": ">=6"
}
},
"node_modules/jwa": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.0.tgz",
"integrity": "sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==",
"dependencies": {
"buffer-equal-constant-time": "1.0.1",
"ecdsa-sig-formatter": "1.0.11",
"safe-buffer": "^5.0.1"
}
},
"node_modules/jws": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jws/-/jws-4.0.0.tgz",
"integrity": "sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==",
"dependencies": {
"jwa": "^2.0.0",
"safe-buffer": "^5.0.1"
}
},
"node_modules/kareem": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/kareem/-/kareem-2.4.1.tgz",
......@@ -2145,6 +2360,11 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/pstree.remy": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
......
api_client/package.json
View file @ 15af72ce
......@@ -15,10 +15,13 @@
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.4.0",
"bcrypt": "^5.1.0",
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"fix-esm": "^1.0.1",
"google-auth-library": "^9.0.0",
"mongodb": "^5.3.0",
"mongoose": "^6.5.0",
"mongoose-id-validator": "^0.6.0",
......
api_client/routes/users.js
View file @ 15af72ce
const router = require('express').Router();
const User = require('../models/User');
const auth = require("../middleware/auth");
const config = require('../config');
const axios = require("axios");
const {OAuth2Client} = require("google-auth-library");
const {nanoid} = require('fix-esm').require("nanoid");
router.post('/', async (req, res) => {
try {
......@@ -78,4 +82,81 @@ router.delete('/logout', auth, async (req, res) => {
res.send({message: 'Success'});
});
router.post('/facebookLogin', async (req, res) => {
const inputToken = req.body.accessToken;
const accessToken = config.facebook.appId + '|' + config.facebook.secretApp;
const debugTokenUrl = `https://graph.facebook.com/debug_token?input_token=${inputToken}&access_token=${accessToken}`;
try {
const response = await axios.get(debugTokenUrl).then(res => res.data.data);
if (response.error) {
return res.status(401).send({message: 'Facebook token incorrect'});
}
if (req.body.id !== response.user_id) {
return res.status(401).send({message: 'Wrong user ID'});
}
let user = await User.findOne({facebookId: req.body.id});
if (!user) {
user = new User({
username: req.body.email,
facebookId: req.body.id,
displayName: req.body.name,
password: nanoid(),
});
}
user.generateToken();
await user.save();
return res.send(user);
} catch (e) {
return res.status(400).send({message: 'Facebook token incorrect'});
}
});
router.post('/googleLogin', async (req, res) => {
const idToken = req.body.tokenObj.id_token;
const profileData = req.body.profileObj;
try {
const client = new OAuth2Client();
const ticket = await client.verifyIdToken({
idToken: idToken,
audience: config.google.appId
});
const payload = ticket.getPayload();
if (payload.error) {
return res.status(401).send({message: 'Google token incorrect'});
}
if (profileData.googleId !== payload.sub) {
return res.status(401).send({message: 'Wrong user ID'});
}
let user = await User.findOne({googleId: profileData.googleId});
if (!user) {
user = new User({
username: profileData.email,
googleId: profileData.googleId,
displayName: profileData.name,
password: nanoid(),
});
}
user.generateToken();
await user.save();
return res.send(user);
} catch (e) {
return res.status(400).send({message: 'Google token incorrect'});
}
});
module.exports = router;
front_client/package-lock.json
View file @ 15af72ce
......@@ -8,8 +8,10 @@
"name": "front",
"version": "0.1.0",
"dependencies": {
"@dump-work/react-google-login": "^6.0.14",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@greatsumini/react-facebook-login": "^3.3.3",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.11.16",
"@mui/styled-engine-sc": "^5.11.11",
......@@ -2194,6 +2196,20 @@
"postcss-selector-parser": "^6.0.10"
}
},
"node_modules/@dump-work/react-google-login": {
"version": "6.0.14",
"resolved": "https://registry.npmjs.org/@dump-work/react-google-login/-/react-google-login-6.0.14.tgz",
"integrity": "sha512-szoS1jYvhrkBqSudGJFUYS3Qd20CJ9Ye4etN7DTOkM3gxJHCiqZUoQLhzV0DJPBC6y0TkWg56n47eTutX5OaGQ==",
"dependencies": {
"@types/react": "*",
"jwt-decode": "^3.1.2",
"prop-types": "^15.6.0"
},
"peerDependencies": {
"react": "^16 || ^17",
"react-dom": "^16 || ^17"
}
},
"node_modules/@emotion/babel-plugin": {
"version": "11.10.6",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
......@@ -2425,6 +2441,14 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@greatsumini/react-facebook-login": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/@greatsumini/react-facebook-login/-/react-facebook-login-3.3.3.tgz",
"integrity": "sha512-Y5D7EncR3iy/X/OfWwjjpM5OW0XV6PCE08RZUV/yhAE413PEBIlML7S6z69BcpUPWO5XzEt7cytHChUdwXO4Dw==",
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
......@@ -11714,6 +11738,11 @@
"node": ">=4.0"
}
},
"node_modules/jwt-decode": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
},
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
......
front_client/package.json
View file @ 15af72ce
......@@ -3,8 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@dump-work/react-google-login": "^6.0.14",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@greatsumini/react-facebook-login": "^3.3.3",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.11.16",
"@mui/styled-engine-sc": "^5.11.11",
......@@ -23,7 +25,7 @@
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"start": "HTTPS=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
......
front_client/src/components/SocialAuth/FacebookLoginButton/FacebookLoginButton.jsx 0 → 100644
View file @ 15af72ce
import FacebookLogin from "@greatsumini/react-facebook-login";
import {facebookAppId} from '../../../constants/config';
import {Button} from "@mui/material";
import {facebookLogin} from "../../../store/actions/usersActions";
import {useDispatch} from "react-redux";
import {useNavigate} from "react-router-dom";
const FacebookLoginButton = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
return <FacebookLogin
appId={facebookAppId}
initParams={{
version: 'v17.0',
xfbml: true,
}}
onSuccess={(response) => {
console.log('Login Success!', response);
dispatch(facebookLogin({data: response, callback: () => navigate('/')}));
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
render={({onClick, logout}) => (
<Button onClick={onClick}>
Enter with facebook
</Button>
)}
/>
};
export default FacebookLoginButton;
front_client/src/components/SocialAuth/GoogleLoginButton/GoogleLoginButton.jsx 0 → 100644
View file @ 15af72ce
import GoogleLogin from "@dump-work/react-google-login";
import {googleAppId} from '../../../constants/config';
import {Button} from "@mui/material";
import {useDispatch} from "react-redux";
import {useNavigate} from "react-router-dom";
import {googleLogin} from "../../../store/actions/usersActions";
const GoogleLoginButton = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
return <GoogleLogin
clientId={googleAppId}
onFailure={(error) => {
console.log('Login Failed!', error);
}}
onSuccess={(response) => {
console.log('Login Success!', response);
dispatch(googleLogin({data: response, callback: () => navigate('/')}));
}}
render={({ onClick, logout }) => (
<Button onClick={onClick}>
Enter with Google
</Button>
)}
/>;
};
export default GoogleLoginButton;
front_client/src/constants/config.js
View file @ 15af72ce
......@@ -7,3 +7,5 @@ if (process.env.REACT_APP_API_HOST_ENV) {
export const apiUrl = host;
export const uploadUrl = apiUrl + '/uploads';
export const facebookAppId = 606018451709501;
export const googleAppId = '116339632653-c637pvdqe9csqchit034e3tv77ki94cp.apps.googleusercontent.com';
front_client/src/containers/Auth/Login/Login.jsx
View file @ 15af72ce
......@@ -8,6 +8,8 @@ import {useDispatch, useSelector} from "react-redux";
import {loginUser} from "../../../store/actions/usersActions";
import FormElement from "../../../components/UI/Form/FormElement/FormElement";
import {setLoginError} from "../../../store/services/usersSlice";
import FacebookLoginButton from "../../../components/SocialAuth/FacebookLoginButton/FacebookLoginButton";
import GoogleLoginButton from "../../../components/SocialAuth/GoogleLoginButton/GoogleLoginButton";
const theme = createTheme();
......@@ -94,6 +96,14 @@ const Login = () => {
</Link>
</Grid>
</Grid>
<Grid container justifyContent="flex-end">
<Grid item>
<FacebookLoginButton/>
</Grid>
<Grid item>
<GoogleLoginButton/>
</Grid>
</Grid>
</Box>
</Box>
</Container>
......
front_client/src/containers/Auth/Register/Register.jsx
View file @ 15af72ce
......@@ -8,6 +8,8 @@ import {useDispatch, useSelector} from "react-redux";
import {registerUser} from "../../../store/actions/usersActions";
import FormElement from "../../../components/UI/Form/FormElement/FormElement";
import {setRegisterError} from "../../../store/services/usersSlice";
import FacebookLoginButton from "../../../components/SocialAuth/FacebookLoginButton/FacebookLoginButton";
import GoogleLoginButton from "../../../components/SocialAuth/GoogleLoginButton/GoogleLoginButton";
const theme = createTheme();
......@@ -99,6 +101,14 @@ const Register = () => {
</Link>
</Grid>
</Grid>
<Grid container justifyContent="flex-end">
<Grid item>
<FacebookLoginButton/>
</Grid>
<Grid item>
<GoogleLoginButton/>
</Grid>
</Grid>
</Box>
</Box>
</Container>
......
front_client/src/store/actions/usersActions.js
View file @ 15af72ce
......@@ -59,3 +59,33 @@ export const updateUser = createAsyncThunk(
throw e;
})
);
export const googleLogin = createAsyncThunk(
'users/googleLogin',
async ({data, callback}, {dispatch}) => await axiosApi
.post('/users/googleLogin', data)
.then(res => {
dispatch(setUser(res.data));
callback();
})
.catch(e => {
if (e?.response?.data) dispatch(setLoginError(e.response.data));
else dispatch(setLoginError(e));
throw e;
})
);
export const facebookLogin = createAsyncThunk(
'users/facebookLogin',
async ({data, callback}, {dispatch}) => await axiosApi
.post('/users/facebookLogin', data)
.then(res => {
dispatch(setUser(res.data));
callback();
})
.catch(e => {
if (e?.response?.data) dispatch(setLoginError(e.response.data));
else dispatch(setLoginError(e));
throw e;
})
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment