@krowdy/kds-auth
Version:
React components that implement Google's Material Design.
818 lines (715 loc) • 28.5 kB
JavaScript
;
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;