@boligmappa/web-component-auth
Version:
Web component for authenticating a user towards Boligmappa
189 lines • 7.09 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from "lit";
import { property, state } from "lit/decorators.js";
import "./loading-animation-auth";
import axios from "axios";
export class BoligmappaAuth extends LitElement {
constructor() {
super();
this.loadingLabel = "";
this.errorMessage = "";
this.development = false;
// @property() developmentStorage = false;
this.authBaseUrl = "https://auth.boligmappa.no/auth/realms/professional-realm/protocol/openid-connect";
}
static get styles() {
return css `
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
z-index: 10000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loading-label {
margin-top: 0;
font-weight: normal;
}
.auth-failed {
margin-top: 0;
font-weight: normal;
color: red;
}
`;
}
firstUpdated() {
// if (!this.development) {
// this.developmentStorage = false;
// }
if (this.development) {
this.authBaseUrl =
"https://testauth.boligmappa.no/auth/realms/professional-realm-staging/protocol/openid-connect";
}
}
async updated(changedProperties) {
const path = window.location.pathname;
if (this.config && changedProperties.has("config")) {
await this.setupConfig();
if (path.includes("boligmappa-connect")) {
await this.connectToBoligmappa();
}
if (path.includes("boligmappa-redirect")) {
await this.handleRedirect();
}
}
}
async setupConfig() {
if (!this.config) {
throw new Error("Config not set");
}
if (!this.config.scope) {
this.config.scope = "offline_access";
}
if (this.config.authCodeEndpoint) {
if (!this.config.authCodeEndpoint.endpointUrl) {
throw new Error("authCodeEndpoint cannot be set without an endpointUrl");
}
if (!this.config.authCodeEndpoint.headers) {
this.config.authCodeEndpoint.headers = {};
}
this.config.authCodeEndpoint.headers["Content-Type"] = "application/json";
if (!this.config.authCodeEndpoint.method) {
this.config.authCodeEndpoint.method = "POST";
}
}
else {
throw new Error("Endpoint for Authentication Code is not set.");
}
}
async handleRedirect() {
this.loadingLabel = "Redirecting...";
if (!this.config) {
throw new Error("Config not set");
}
const urlSearchParams = new URLSearchParams(window.location.search);
const authCode = urlSearchParams.get("code");
if (!authCode) {
throw new Error("No auth code found.");
}
let redirectUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/boligmappa-redirect`;
if (this.config.redirectUri) {
redirectUrl = this.config.redirectUri;
}
const authCodeObjectToBeStored = {
idObject: JSON.parse(this.config.idObject),
authCode: authCode,
scope: this.config.scope,
redirectUrl: redirectUrl,
};
const requestConfig = {
headers: this.config.authCodeEndpoint.headers,
};
axios
.post(this.config.authCodeEndpoint.endpointUrl, authCodeObjectToBeStored, requestConfig)
.then((response) => {
this.setTokensInSearchComponent(response.data);
this.setTokensInMenuComponent(response.data);
window.close();
})
.catch((error) => {
this.loadingLabel = "";
this.errorMessage = error.message;
});
}
setTokensInSearchComponent(result) {
const tokenResponse = result;
const opener = window.opener;
const search = opener === null || opener === void 0 ? void 0 : opener.document.querySelector("boligmappa-search");
if (search) {
search.config.access_token = tokenResponse.accessToken;
search.requestUpdate();
}
}
setTokensInMenuComponent(result) {
const tokenResponse = result;
const opener = window.opener;
const menu = opener === null || opener === void 0 ? void 0 : opener.document.querySelector("boligmappa-menu");
if (menu) {
menu.accessToken = tokenResponse.accessToken;
menu.requestUpdate();
}
}
async connectToBoligmappa() {
this.loadingLabel = "Connecting...";
if (!this.config) {
throw new Error("Config not set");
}
let redirectUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/boligmappa-redirect`;
if (this.config.redirectUri) {
redirectUrl = this.config.redirectUri;
}
const authUrl = `${this.authBaseUrl}/auth?client_id=${this.config.clientId}&scope=${this.config.scope}&redirect_uri=${redirectUrl}&response_type=code`;
window.location.href = authUrl;
}
render() {
if (!this.errorMessage) {
return this.loadingLabel
? html `
<div class="overlay">
<loading-animation></loading-animation>
<h4 class="loading-label">${this.loadingLabel}</h4>
</div>
`
: html ``;
}
else {
return html `
<div class="overlay">
<h4 class="auth-failed">Authentication Failed</h4>
<h6>ERROR_MESSAGE: ${this.errorMessage}</h6>
</div>
`;
}
}
}
__decorate([
state()
], BoligmappaAuth.prototype, "loadingLabel", void 0);
__decorate([
state()
], BoligmappaAuth.prototype, "errorMessage", void 0);
__decorate([
property()
], BoligmappaAuth.prototype, "config", void 0);
__decorate([
property()
], BoligmappaAuth.prototype, "development", void 0);
customElements.define("boligmappa-auth", BoligmappaAuth);
//# sourceMappingURL=BoligmappaAuth.js.map