react-native-azure-ad-auth
Version:
A react native azure active directory authentication component
107 lines (106 loc) • 5.03 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_webview_1 = require("react-native-webview");
var AzureAdAuth_1 = __importDefault(require("./AzureAdAuth"));
var AzureAdView = /** @class */ (function (_super) {
__extends(AzureAdView, _super);
function AzureAdView(props, state) {
var _this = _super.call(this, props) || this;
_this.auth = new AzureAdAuth_1.default(_this.props.azureAdInstance);
_this.state = {
visible: true,
cancelled: false
};
_this.handleTokenRequest = _this.handleTokenRequest.bind(_this);
_this.renderLoadingView = _this.renderLoadingView.bind(_this);
return _this;
}
AzureAdView.prototype.handleTokenRequest = function (e) {
var _this = this;
var _a = this.props, needLogout = _a.needLogout, azureAdInstance = _a.azureAdInstance;
if (needLogout && e.url.includes('/logoutsession')) {
this.setState({ visible: false });
azureAdInstance.clearToken();
// call success handler
this.props.onSuccess();
}
else {
// not logging out, check code when url changes
var code = /((\?|\&)code\=)[^\&]+/.exec(e.url);
if (code !== null) {
code = String(code[0]).replace(/(\?|\&)?code\=/, '');
this.setState({ visible: false });
// request for a token
this.auth.getTokenFromCode(code).then(function (token) {
// set token to instance
azureAdInstance.setToken(token);
// call success handler
_this.props.onSuccess();
}).catch(function (err) {
throw new Error(err);
});
}
}
// if user cancels the process before finishing
if (!this.state.cancelled && this.props.onCancel && e.url.indexOf('error=access_denied') > -1) {
this.setState({ cancelled: true, visible: false });
// call cancel handler
this.props.onCancel();
}
};
AzureAdView.prototype.renderLoadingView = function () {
var _a = this.props, loadingView = _a.loadingView, loadingStyle = _a.loadingStyle, loadingMessage = _a.loadingMessage;
return (loadingView === undefined)
? (react_1.default.createElement(react_native_1.View, { style: [loadingStyle, styles.loadingView, styles.centered] },
react_1.default.createElement(react_native_1.Text, null, loadingMessage))) : (loadingView);
};
AzureAdView.prototype.render = function () {
var source = (this.props.needLogout)
? this.auth.getAuthLogoutUrl()
: this.auth.getAuthLoginUrl();
return ((this.state.visible)
? (react_1.default.createElement(react_native_webview_1.WebView, { automaticallyAdjustContentInsets: true, style: [this.props.loadingStyle, styles.webView, styles.centered], source: { uri: source }, javaScriptEnabled: true, domStorageEnabled: true, decelerationRate: "normal", onNavigationStateChange: this.handleTokenRequest, onShouldStartLoadWithRequest: function (e) { return true; }, startInLoadingState: true, scalesPageToFit: true, incognito: false })) : this.renderLoadingView());
};
return AzureAdView;
}(react_1.Component));
exports.default = AzureAdView;
var styles = react_native_1.StyleSheet.create({
webView: {
marginTop: 50
},
centered: {
flex: 1,
alignSelf: 'stretch',
width: react_native_1.Dimensions.get('window').width,
height: react_native_1.Dimensions.get('window').height
},
loadingView: {
alignItems: 'center',
justifyContent: 'center'
}
});