UNPKG

@krowdy/kds-auth

Version:

React components that implement Google's Material Design.

818 lines (715 loc) 28.5 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _react = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _LoginContext = _interopRequireDefault(require("./LoginContext")); var _Client = _interopRequireDefault(require("../Client")); var _utils = require("./utils"); var _utils2 = require("../utils"); var _PasswordNotify = _interopRequireDefault(require("../LoginSinglePage/PasswordNotify")); var _OnetapAuth = _interopRequireDefault(require("../OnetapAuth")); var _OnetapGoogle = _interopRequireDefault(require("../OnetapGoogle/OnetapGoogle")); var _LinkedInPopUp = _interopRequireDefault(require("../LoginSinglePage/LinkedInPopUp")); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } var _ref5 = /*#__PURE__*/_react["default"].createElement(_OnetapGoogle["default"], null); var _ref6 = /*#__PURE__*/_react["default"].createElement(_LinkedInPopUp["default"], null); var AuthProvider = function AuthProvider(_ref) { var children = _ref.children, _ref$stateContext = _ref.stateContext, stateContext = _ref$stateContext === void 0 ? {} : _ref$stateContext, baseUrl = _ref.baseUrl, _ref$storage = _ref.storage, storage = _ref$storage === void 0 ? 'localStorage' : _ref$storage, urlLogin = _ref.urlLogin, _ref$social = _ref.social; _ref$social = _ref$social === void 0 ? {} : _ref$social; var google = _ref$social.google, linkedin = _ref$social.linkedin, microsoft = _ref$social.microsoft, facebook = _ref$social.facebook, referrer = _ref.referrer, clientSecret = _ref.clientSecret, _ref$loginWith = _ref.loginWith, loginWith = _ref$loginWith === void 0 ? 'only-email' : _ref$loginWith, clientId = _ref.clientId, withGoogle = _ref.withGoogle, isBolsa = _ref.isBolsa, customLegalBase = _ref.customLegalBase, _ref$onError = _ref.onError, onError = _ref$onError === void 0 ? function () {} : _ref$onError; var authClient = (0, _react.useRef)(); var iframeRef = (0, _react.useRef)(); var _useState = (0, _react.useState)(_utils.initialState), _useState2 = (0, _slicedToArray2["default"])(_useState, 2), state = _useState2[0], setState = _useState2[1]; var paramsLinkedIn = typeof window !== 'undefined' ? (0, _utils2.parseQueryString)(window.location.search) : {}; (0, _react.useEffect)(function () { if (baseUrl) authClient.current = new _Client["default"](baseUrl); }, [baseUrl]); var sendMessageToLoginApp = (0, _react.useCallback)(function (eventId, credentials) { var iframe = iframeRef ? iframeRef.current : null; if (iframe) iframe.contentWindow.postMessage({ credentials: credentials, eventId: eventId }, "".concat(urlLogin, "/set-credentials")); }, // eslint-disable-next-line react-hooks/exhaustive-deps [urlLogin, iframeRef, iframeRef.current]); var _handleError = (0, _react.useCallback)(function (error) { onError(error, state.typeView); }, [onError, state.typeView]); var _handleVerifySession = (0, _react.useCallback)(function (credentials) { return authClient.current.verifySession(credentials).then(function (res) { if (res.success) { setState(function (prev) { return (0, _extends2["default"])({}, prev, {}, credentials); }); (0, _utils.updateStorage)(storage, credentials); } return res.success; })["catch"](function () { setState(function (prev) { return (0, _extends2["default"])({}, prev, { error: true }); }); return false; }); }, // eslint-disable-next-line react-hooks/exhaustive-deps [authClient, authClient.current]); var _handleMessage = (0, _react.useCallback)(function _callee(_ref2) { var data, success, eventId, credentials, successLogin; return _regenerator["default"].async(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: data = _ref2.data; success = data.success, eventId = data.eventId, credentials = data.credentials; if (!(success && eventId === 'authStatus')) { _context.next = 9; break; } _context.next = 5; return _regenerator["default"].awrap(_handleVerifySession(credentials)); case 5: successLogin = _context.sent; setState(function (prev) { return (0, _extends2["default"])({}, prev, { flowFinished: successLogin, loadingAuth: false, successLogin: successLogin }); }); _context.next = 10; break; case 9: setState(function (prev) { return (0, _extends2["default"])({}, prev, { loadingAuth: false }); }); case 10: case "end": return _context.stop(); } } }, null, null, null, Promise); }, []); (0, _react.useEffect)(function () { if (urlLogin) { window.addEventListener('message', _handleMessage, false); return function () { return window.removeEventListener('message', _handleMessage); }; } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); var _handleVerifyAccount = (0, _react.useCallback)(function _callee2(source) { var _data; var recoveryPass, data, result, _data2, hasPassword, success, value, type, _args2 = arguments; return _regenerator["default"].async(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: recoveryPass = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false; setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: true }); }); data = {}; if (!(authClient === null || authClient === void 0 ? void 0 : authClient.current)) { _context2.next = 7; break; } _context2.next = 6; return _regenerator["default"].awrap(authClient.current.validateAccount({ recoveryPass: recoveryPass, source: source })); case 6: data = _context2.sent; case 7: result = data; if ((_data = data) === null || _data === void 0 ? void 0 : _data.success) { _data2 = data, hasPassword = _data2.hasPassword, success = _data2.success, value = _data2.value, type = _data2.type; setState(function (prev) { return (0, _extends2["default"])({}, prev, { typeCode: type }); }); result = { hasPassword: hasPassword, success: success, type: type, value: value }; } else { _handleError(data.error); } setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: false }); }); return _context2.abrupt("return", result); case 11: case "end": return _context2.stop(); } } }, null, null, null, Promise); }, []); var _handleSendVerifyCode = (0, _react.useCallback)(function (source) { if (authClient === null || authClient === void 0 ? void 0 : authClient.current) authClient.current.sendVerifyCode(source); }, [authClient]); var _handleLoginByPassword = (0, _react.useCallback)(function (_ref3) { var email = _ref3.email, password = _ref3.password, keepSession = _ref3.keepSession; if (authClient === null || authClient === void 0 ? void 0 : authClient.current) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: true }); }); return authClient.current.loginByPassword({ allowAds: state.allowAds ? 1 : 0, clientId: clientId, clientSecret: clientSecret, email: email, keepSession: keepSession ? 1 : 0, password: password }).then(function (data) { var result = {}; if (data.success) { var accessToken = data.accessToken, refreshToken = data.refreshToken, userId = data.userId; (0, _utils.updateStorage)(storage, { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); setState(function (prev) { return (0, _extends2["default"])({}, prev, { accessToken: accessToken, flowFinished: true, refreshToken: refreshToken, successLogin: true, userId: userId }); }); sendMessageToLoginApp('logged', { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); result = { accessToken: accessToken, refreshToken: refreshToken, success: true, userId: userId }; } setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: false }); }); return result; })["catch"](function (error) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: false }); }); _handleError(error); return {}; }); } }, [clientId, clientSecret, _handleError, sendMessageToLoginApp, state.allowAds, storage]); var _handleLoginByCode = (0, _react.useCallback)(function _callee3(_ref4) { var code, value, type, keepSession; return _regenerator["default"].async(function _callee3$(_context3) { while (1) { switch (_context3.prev = _context3.next) { case 0: code = _ref4.code, value = _ref4.value, type = _ref4.type, keepSession = _ref4.keepSession; if (!(authClient === null || authClient === void 0 ? void 0 : authClient.current)) { _context3.next = 4; break; } setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: true }); }); return _context3.abrupt("return", authClient.current.verifyCode({ allowAds: state.allowAds ? 1 : 0, clientId: clientId, clientSecret: clientSecret, code: code, keepSession: keepSession ? 1 : 0, type: type, value: value }).then(function (data) { var result = {}; if (data.success) { var accessToken = data.accessToken, refreshToken = data.refreshToken, userId = data.userId, isNew = data.isNew; if (state.typeView !== _utils.ViewType.Recovery) (0, _utils.updateStorage)(storage, { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); setState(function (prev) { return (0, _extends2["default"])({}, prev, { accessToken: accessToken, flowFinished: !isNew, isNew: isNew, refreshToken: refreshToken, userId: userId }); }); sendMessageToLoginApp('logged', { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); result = { accessToken: accessToken, isNew: isNew, refreshToken: refreshToken, success: true, userId: userId }; } if (data.error) result = { error: data.error, success: false }; setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: false }); }); return result; })["catch"](function (error) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: false }); }); _handleError(error); return {}; })); case 4: case "end": return _context3.stop(); } } }, null, null, null, Promise); }, [state.allowAds, state.typeView, clientId, clientSecret, storage, sendMessageToLoginApp, _handleError]); var _handleSuccessLogin = (0, _react.useCallback)(function (successLogin) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { successLogin: successLogin }); }); }, []); var _handleUpdateAccount = (0, _react.useCallback)(function _callee4(body) { var data; return _regenerator["default"].async(function _callee4$(_context4) { while (1) { switch (_context4.prev = _context4.next) { case 0: setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: true }); }); if (!(authClient === null || authClient === void 0 ? void 0 : authClient.current)) { _context4.next = 5; break; } _context4.next = 4; return _regenerator["default"].awrap(authClient.current.updateAccount(state.accessToken, body)); case 4: data = _context4.sent; case 5: setState(function (prev) { var _data3; return (0, _extends2["default"])({}, prev, { loading: false, successLogin: Boolean((_data3 = data) === null || _data3 === void 0 ? void 0 : _data3.success) }); }); return _context4.abrupt("return", data); case 7: case "end": return _context4.stop(); } } }, null, null, null, Promise); }, // eslint-disable-next-line react-hooks/exhaustive-deps [authClient, authClient.current, state.accessToken]); var _handleValidateSocial = (0, _react.useCallback)(function _callee5(network, response) { var tokenId, method, _await$authClient$cur, error, refreshToken, accessToken, userId, isNew; return _regenerator["default"].async(function _callee5$(_context5) { while (1) { switch (_context5.prev = _context5.next) { case 0: tokenId = response.tokenId, method = response.method; if (!(authClient === null || authClient === void 0 ? void 0 : authClient.current)) { _context5.next = 12; break; } setState(function (prev) { return (0, _extends2["default"])({}, prev, { loadingSignIn: true, method: method }); }); _context5.next = 5; return _regenerator["default"].awrap(authClient.current.loginSocialNetwork({ allowAds: state.allowAds ? 1 : 0, clientId: clientId, clientSecret: clientSecret, keepSession: state.keepSession ? 1 : 0, network: network, tokenId: tokenId }, referrer)); case 5: _await$authClient$cur = _context5.sent; error = _await$authClient$cur.error; refreshToken = _await$authClient$cur.refreshToken; accessToken = _await$authClient$cur.accessToken; userId = _await$authClient$cur.userId; isNew = _await$authClient$cur.isNew; if (!error) { sendMessageToLoginApp('logged', { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); (0, _utils.updateStorage)(storage, { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); if (network === 'microsoft') window.sessionStorage.clear(); setState(function (prev) { return (0, _extends2["default"])({}, prev, { accessToken: accessToken, flowFinished: true, isNew: isNew, refreshToken: refreshToken, successLogin: true, userId: userId }); }); } else { _handleError(error); setState(function (prev) { return (0, _extends2["default"])({}, prev, { loadingSignIn: false }); }); } case 12: case "end": return _context5.stop(); } } }, null, null, null, Promise); }, [clientId, clientSecret, _handleError, referrer, sendMessageToLoginApp, state.allowAds, state.keepSession, storage]); var _handleAllowAds = (0, _react.useCallback)(function () { setState(function (prev) { return (0, _extends2["default"])({}, prev, { allowAds: !prev.allowAds }); }); }, []); var _handleFlowFinished = (0, _react.useCallback)(function (flowFinished) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { flowFinished: flowFinished }); }); }, []); var createPassword = (0, _react.useCallback)(function _callee6(password) { var res, accessToken, userId, refreshToken; return _regenerator["default"].async(function _callee6$(_context6) { while (1) { switch (_context6.prev = _context6.next) { case 0: if (!(authClient === null || authClient === void 0 ? void 0 : authClient.current)) { _context6.next = 15; break; } setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: true }); }); _context6.next = 4; return _regenerator["default"].awrap(authClient.current.updatePassword({ accessToken: state.accessToken, password: password })); case 4: res = _context6.sent; if (res === null || res === void 0 ? void 0 : res.success) { _context6.next = 9; break; } setState(function (prev) { return (0, _extends2["default"])({}, prev, { loading: false }); }); _handleError(res ? res.error : null); return _context6.abrupt("return", { success: false }); case 9: accessToken = state.accessToken, userId = state.userId, refreshToken = state.refreshToken; if (state.keepSession) (0, _utils.updateStorage)(storage, { accessToken: accessToken, iduser: userId, refreshToken: refreshToken }); setState(function (prev) { return (0, _extends2["default"])({}, prev, { flowFinished: true, loading: false, successLogin: true }); }); return _context6.abrupt("return", { success: true }); case 15: return _context6.abrupt("return", { success: false }); case 16: case "end": return _context6.stop(); } } }, null, null, null, Promise); }, // eslint-disable-next-line react-hooks/exhaustive-deps [authClient, authClient.current, state.accessToken]); var _handleLogOut = (0, _react.useCallback)(function () { var deleteSession = function deleteSession() { if (window.google) window.google.accounts.id.disableAutoSelect(); (0, _utils.clearStorage)(storage, ['accessToken', 'iduser', 'refreshToken']); sessionStorage.clear(); }; var accessToken = state.accessToken, refreshToken = state.refreshToken; if (accessToken || refreshToken) { authClient.current.logout({ accessToken: accessToken, refreshToken: refreshToken }).then(function (res) { var success = res.success; if (!success) return console.error('Error when user closing session'); deleteSession(); sendMessageToLoginApp('unlogged'); })["catch"](function (error) { _handleError(error); deleteSession(); sendMessageToLoginApp('unlogged'); }); } else { deleteSession(); sendMessageToLoginApp('unlogged'); } }, [_handleError, sendMessageToLoginApp, state, storage]); var _handleUpdateState = (0, _react.useCallback)(function (data) { setState(function (prev) { return (0, _extends2["default"])({}, prev, {}, data); }); }, []); var _handlePasswordNotify = (0, _react.useCallback)(function (value) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { openPasswordNotify: value }); }); }, []); var _handlePasswordCreate = (0, _react.useCallback)(function () { setState(function (prev) { return (0, _extends2["default"])({}, prev, { openBackdrop: true, openPasswordNotify: false, typeView: _utils.ViewType.NewPassword }); }); }, []); var _handleClosePasswordNotify = (0, _react.useCallback)(function () { setState(function (prev) { return (0, _extends2["default"])({}, prev, { flowFinished: true, openPasswordNotify: false }); }); }, []); var _handleChangeView = (0, _react.useCallback)(function (typeView) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { typeView: typeView }); }); }, []); var _handleCloseModal = (0, _react.useCallback)(function () { setState(function (prev) { return (0, _extends2["default"])({}, prev, { customMainText: '', openBackdrop: false }); }); }, []); var _handleOpenModal = (0, _react.useCallback)(function (customMainText) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { customMainText: typeof customMainText === 'string' ? customMainText : '', openBackdrop: true }); }); }, []); var _handleSetLoadingSignIn = (0, _react.useCallback)(function (value) { setState(function (prev) { return (0, _extends2["default"])({}, prev, { loadingSignIn: value }); }); }, []); var now = (0, _react.useMemo)(function () { return new Date().getTime(); }, []); return /*#__PURE__*/_react["default"].createElement(_LoginContext["default"].Provider, { value: (0, _extends2["default"])({}, state, {}, stateContext, { customLegalBase: customLegalBase, facebookCredentials: facebook, googleCredentials: google, isBolsa: isBolsa, linkedinCredentials: linkedin, loginByCode: _handleLoginByCode, loginByPassword: _handleLoginByPassword, loginWith: loginWith, logout: _handleLogOut, microsoftCredentials: microsoft, onAllowAds: _handleAllowAds, onChangeView: _handleChangeView, onClose: _handleCloseModal, onError: _handleError, onFlowFinished: _handleFlowFinished, onOpen: _handleOpenModal, onPasswordNotify: _handlePasswordNotify, onSuccessLogin: _handleSuccessLogin, onUpdatePassword: createPassword, onUpdateState: _handleUpdateState, referrer: referrer, sendVerifyOrCode: _handleSendVerifyCode, setLoadingSignIn: _handleSetLoadingSignIn, updateAccount: _handleUpdateAccount, validateSocialNetwork: _handleValidateSocial, verifyAccount: _handleVerifyAccount }) }, withGoogle && !state.successLogin && !state.loadingAuth ? _ref5 : null, urlLogin && /*#__PURE__*/_react["default"].createElement("iframe", { height: "0px", ref: iframeRef, src: "".concat(urlLogin, "/set-credentials?timestamp=").concat(now), style: { display: 'none' }, title: "Alternative login", width: "0px" }), state.openPasswordNotify ? /*#__PURE__*/_react["default"].createElement(_PasswordNotify["default"], { onClose: _handleClosePasswordNotify, onCreate: _handlePasswordCreate }) : null, children, paramsLinkedIn.code || paramsLinkedIn.error ? _ref6 : null, state.openBackdrop ? /*#__PURE__*/_react["default"].createElement(_OnetapAuth["default"], { customMainText: state.customMainText }) : null); }; process.env.NODE_ENV !== "production" ? AuthProvider.propTypes = { baseUrl: _propTypes["default"].string.isRequired, children: _propTypes["default"].any, clientId: _propTypes["default"].string, clientSecret: _propTypes["default"].string, customLegalBase: _propTypes["default"].shape({ footerHTML: _propTypes["default"].string, urlPrivacyPolicy: _propTypes["default"].string, urlTermsAndConditions: _propTypes["default"].string }), isBolsa: _propTypes["default"].bool, loginWith: _propTypes["default"].oneOf(['only-email', 'only-phone', 'phone-and-email']), onError: _propTypes["default"].func, referrer: _propTypes["default"].string, social: _propTypes["default"].shape({ facebook: _propTypes["default"].shape({ clientId: _propTypes["default"].string, redirectUri: _propTypes["default"].string }), google: _propTypes["default"].shape({ clientId: _propTypes["default"].string, redirectUri: _propTypes["default"].string }), linkedin: _propTypes["default"].shape({ clientId: _propTypes["default"].string, redirectUri: _propTypes["default"].string }), microsoft: _propTypes["default"].shape({ clientId: _propTypes["default"].string, redirectUri: _propTypes["default"].string }) }), stateContext: _propTypes["default"].any, storage: _propTypes["default"].string, urlLogin: _propTypes["default"].string, withGoogle: _propTypes["default"].bool } : void 0; var _default = _react["default"].memo(AuthProvider); exports["default"] = _default;