@tapni/auth 0.0.169 → 0.0.171

package/src/mixins/okta.mixin.js

@@ -1,7 +1,7 @@
-import to from 'await-to-js'
-import AuthService from '../services/AuthService'
-import UtilService from '../services/UtilService'
-import { EventBus } from "../store/event-bus";
+import to from 'await-to-js';
+import AuthService from '../services/AuthService';
+import UtilService from '../services/UtilService';
+import { EventBus } from '../store/event-bus';
 import { Capacitor } from '@capacitor/core';
 import axios from 'axios';
 import { Browser } from '@capacitor/browser';
@@ -9,13 +9,12 @@ import { Browser } from '@capacitor/browser';
 // this tutorial was used for plain okta javascript implementation
 // https://developer.okta.com/blog/2019/05/01/is-the-oauth-implicit-flow-dead
 export default {
-	data () {
+	data() {
 		return {
-			oktaAuth: null,
-		}
-	},
-	computed: {
+			oktaAuth: null
+		};
 	},
+	computed: {},
 	watch: {
 		/*
 		'$route.path': async function(routePath) {
@@ -24,48 +23,45 @@ export default {
 		 */
 	},
 	methods: {
-		async exchangeCode (data) {
-			let [err, response] = await to(axios.post(data.domain  + '/v1/token', new URLSearchParams({code: data.code, client_id: data.clientID, grant_type: "authorization_code", redirect_uri: this.isNative ? 'tapni://t.link/callback/okta' : (location.origin + '/callback/okta'), code_verifier: localStorage.getItem("pkce_code_verifier")})));
+		async exchangeCode(data) {
+			let [err, response] = await to(axios.post(data.domain + '/v1/token', new URLSearchParams({ code: data.code, client_id: data.clientID, grant_type: 'authorization_code', redirect_uri: this.isNative ? 'tapni://t.link/callback/okta' : location.origin + '/callback/okta', code_verifier: localStorage.getItem('pkce_code_verifier') })));
 			if (err) return this.errorHandler(err);
-			localStorage.removeItem("pkce_code_verifier");
+			localStorage.removeItem('pkce_code_verifier');
 
-			let user = {accessToken: response.data?.access_token, domain: data.domain}
+			let user = { accessToken: response.data?.access_token, domain: data.domain };
 			if (this.display === 'popup') user.response_type = 'code';
 
 			[err, response] = await to(AuthService.oktaSDK(user, this.$storex));
 			if (err) {
-				this.oktaLoad = false
-				EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
-				return this.errorHandler(err)
+				this.oktaLoad = false;
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: false });
+				return this.errorHandler(err);
 			}
 			if (response.data.success) {
 				if (this.display === 'popup') {
 					return window.parent?.postMessage({ code: response.data.auth_code, state: this.$route.query.state }, '*');
 				}
-				await this.loginSetup(response)
-				await this.getLoggedInAccounts()
-				this.$router.push('/' + response.data.data.username + '#edit')
+				await this.loginSetup(response);
+				await this.getLoggedInAccounts();
+				this.$router.push('/' + response.data.data.username + '#edit');
 				setTimeout(() => {
-					this.appleLoad = false
-					EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
-				}, 1000)
-			} else this.errorSnack(this.ssoLang[this.appLanguage].unexpected_err)
+					this.appleLoad = false;
+					EventBus.$emit('ssoEvent', { name: 'setLoading', data: false });
+				}, 1000);
+			} else this.errorSnack(this.ssoLang[this.appLanguage].unexpected_err);
 		},
-		async oktaLogin (data) {
-			const platform =  Capacitor.getPlatform() || 'web';
+		async oktaLogin(data) {
+			const platform = Capacitor.getPlatform() || 'web';
 			//const state = btoa(`email=${email}&platform=${platform}`);
 			//const state = btoa(`platform=${platform}`);
 
 			// Create and store a random "state" value
 			//localStorage.setItem("pkce_state", state);
-			let state = btoa("domain="+data.domain
-				+ "&client_id="+data.clientID
-				+ "&platform="+platform
-				+ "&rand="+UtilService.generateRandomString(28));
+			let state = btoa('domain=' + data.domain + '&client_id=' + data.clientID + '&platform=' + platform + '&rand=' + UtilService.generateRandomString(28));
 
 			// Create and store a new PKCE code_verifier (the plaintext random secret)
 			let code_verifier = UtilService.generateRandomString(28);
-			localStorage.setItem("pkce_code_verifier", code_verifier);
+			localStorage.setItem('pkce_code_verifier', code_verifier);
 
 			// Hash and base64-urlencode the secret to use as the challenge
 			let code_challenge = await UtilService.pkceChallengeFromVerifier(code_verifier);
@@ -76,30 +72,27 @@ export default {
 			if (this.isNative) redirectURI = 'tapni://t.link/callback/okta';
 			else redirectURI = location.origin + '/callback/okta';
 
-			let url = authorization_endpoint
-				+ "?response_type=code"
-				+ "&client_id="+encodeURIComponent(data.clientID)
-				+ "&state="+encodeURIComponent(state)
-				+ "&scope="+encodeURIComponent('openid email profile')
-				+ "&redirect_uri="+encodeURIComponent(redirectURI)
-				+ "&code_challenge="+encodeURIComponent(code_challenge)
-				+ "&code_challenge_method=S256";
+			let url = authorization_endpoint + '?response_type=code' + '&client_id=' + encodeURIComponent(data.clientID) + '&state=' + encodeURIComponent(state) + '&scope=' + encodeURIComponent('openid email profile') + '&redirect_uri=' + encodeURIComponent(redirectURI) + '&code_challenge=' + encodeURIComponent(code_challenge) + '&code_challenge_method=S256';
 
 			let self = this;
 			//if (response && response.data && response.data.url) {
 			let code;
-			window.addEventListener("message", async (message)=> {
-				if (!this.allowedOriginsAuth.includes(message.origin)) return console.log('Origin is not allowed!');
-				if(message.data.type === 'okta') {
-					code = message.data.code;
-					await self.exchangeCode({domain: data.domain, code, clientID: data.clientID});
-				}
-			}, { once: true });
+			window.addEventListener(
+				'message',
+				async (message) => {
+					if (!this.allowedOriginsAuth.includes(message.origin)) return console.log('Origin is not allowed!');
+					if (message.data.type === 'okta') {
+						code = message.data.code;
+						await self.exchangeCode({ domain: data.domain, code, clientID: data.clientID });
+					}
+				},
+				{ once: true }
+			);
 
 			let popupWindow;
-			if(this.isNative) {
-				popupWindow = await Browser.open({ url, presentationStyle: 'popover'});
-			} else popupWindow = window.open(url, 'popup','width=600,height=600')
+			if (this.isNative) {
+				popupWindow = await Browser.open({ url, presentationStyle: 'popover' });
+			} else popupWindow = window.open(url, 'popup', 'width=600,height=600');
 		},
 		async handleOktaRedirect() {
 			let code = this.$route.query.code;
@@ -107,7 +100,7 @@ export default {
 			let clientID;
 			let domain;
 			let platform;
-			let postMessageData = {type: 'okta'}
+			let postMessageData = { type: 'okta' };
 			if (code) postMessageData.code = code;
 			if (this.$route.query.state) {
 				state = this.$route.query.state;
@@ -117,16 +110,16 @@ export default {
 				domain = searchParams.get('domain');
 				platform = searchParams.get('platform');
 			}
-			if(window.opener) {
+			if (window.opener) {
 				window.opener.postMessage(postMessageData, location.origin);
-				window.close()
+				window.close();
 			} else {
-				if(this.isNative && this.isIOS) await Browser.close();
-				EventBus.$emit('ssoEvent', {name: 'setLoading', data: true})
-				if (code && clientID && domain) await this.exchangeCode({code, clientID, domain, platform});
-				localStorage.removeItem("pkce_code_verifier");
-				EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+				if (this.isNative && this.isiOS) await Browser.close();
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: true });
+				if (code && clientID && domain) await this.exchangeCode({ code, clientID, domain, platform });
+				localStorage.removeItem('pkce_code_verifier');
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: false });
 			}
 		}
 	}
-}
+};

package/src/mixins/qr-auth.mixin.js

@@ -1,117 +1,121 @@
-import to from 'await-to-js'
-import CompanyService from '../services/CompanyService'
-import {nextTick} from "vue";
-import QRCodeStyling from "qr-code-styling";
+import to from 'await-to-js';
+import CompanyService from '../services/CompanyService';
+import { nextTick } from 'vue';
+import QRCodeStyling from 'qr-code-styling';
 
 export default {
-  data () {
-    return {
-      isQrCodeLogin: false,
-      qrCode: null,
-      qrCodeHash: null,
-      qrCodeRefreshInterval: null,
-      poolingInterval: null,
-    }
-  },
-  props: {
-    isModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    displayQRLogin () {
-      return this.$route.name === 'AuthLogin' && this.display !== 'npm';
-    }
-  },
-  mounted () {
-    if (this.$route.name === 'AuthQR') this.changeLoginToQr();
-  },
-  methods: {
-    async changeLoginToQr() {
-      this.isQrCodeLogin = true;
-      await nextTick();
-      await this.initQrCodeLogin();
-    },
-    generateRandomHash() {
-      const characters =
-          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-      const charactersLength = characters.length;
-      let result = "";
+	data() {
+		return {
+			isQrCodeLogin: false,
+			qrCode: null,
+			qrCodeHash: null,
+			qrCodeRefreshInterval: null,
+			poolingInterval: null
+		};
+	},
+	props: {
+		isModal: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	computed: {
+		displayQRLogin() {
+			return this.$route.name === 'AuthLogin' && this.display !== 'npm';
+		}
+	},
+	mounted() {
+		if (this.$route.name === 'AuthQR') this.changeLoginToQr();
+	},
+	methods: {
+		async changeLoginToQr() {
+			this.isQrCodeLogin = true;
+			await nextTick();
+			await this.initQrCodeLogin();
+		},
+		generateRandomHash() {
+			const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+			const charactersLength = characters.length;
+			let result = '';
 
-      // Create an array of 32-bit unsigned integers
-      const randomValues = new Uint32Array(32);
+			// Create an array of 32-bit unsigned integers
+			const randomValues = new Uint32Array(32);
 
-      // Generate random values
-      window.crypto.getRandomValues(randomValues);
-      randomValues.forEach((value) => {
-        result += characters.charAt(value % charactersLength);
-      });
+			// Generate random values
+			window.crypto.getRandomValues(randomValues);
+			randomValues.forEach((value) => {
+				result += characters.charAt(value % charactersLength);
+			});
 
-      return result;
-    },
-    refreshQrCode() {
-      if (this.qrCode) {
-        document.getElementById("qrCodeContainer")?.childNodes[0]?.remove();
-      }
+			return result;
+		},
+		refreshQrCode() {
+			if (this.qrCode) {
+				document.getElementById('qrCodeContainer')?.childNodes[0]?.remove();
+			}
 
-      this.qrCodeHash = this.generateRandomHash();
+			this.qrCodeHash = this.generateRandomHash();
 
-      this.qrCode = new QRCodeStyling({
-        width: 300,
-        height: 300,
-        type: "png",
-        image: "",
-        imageOptions: {
-          margin: 15,
-        },
-        data: this.qrCodeHash,
-        dotsOptions: {
-          type: "extra-rounded",
-          color: "#000000",
-        },
-        cornersSquareOptions: {
-          type: "extra-rounded",
-          color: "#000000",
-        },
-        cornersDotOptions: {
-          type: "",
-          color: "#000000",
-        },
-        backgroundOptions: {
-          color: "#ffffff00",
-        },
-      });
+			this.qrCode = new QRCodeStyling({
+				width: 300,
+				height: 300,
+				type: 'png',
+				image: '',
+				imageOptions: {
+					margin: 15
+				},
+				data: this.qrCodeHash,
+				dotsOptions: {
+					type: 'extra-rounded',
+					color: '#000000'
+				},
+				cornersSquareOptions: {
+					type: 'extra-rounded',
+					color: '#000000'
+				},
+				cornersDotOptions: {
+					type: '',
+					color: '#000000'
+				},
+				backgroundOptions: {
+					color: '#ffffff00'
+				}
+			});
 
-      this.qrCode.append(document.getElementById("qrCodeContainer"));
-    },
-    async startQrCodePooling() {
-      this.poolingInterval = setInterval(async () => {
-        const [err, response] = await to(CompanyService.qrCodePooling({
-          qrToken: this.qrCodeHash,
-        }, this.$storex));
-        if (err) return this.errorHandler(err);
-        if (response.data.auth_code) {
-          if (this.display !== 'popup') {
-            this.loginSetup({ ...response, isModal: this.isModal });
-            await this.getLoggedInAccounts();
-          }
+			this.qrCode.append(document.getElementById('qrCodeContainer'));
+		},
+		async startQrCodePooling() {
+			this.poolingInterval = setInterval(async () => {
+				const [err, response] = await to(
+					CompanyService.qrCodePooling(
+						{
+							qrToken: this.qrCodeHash
+						},
+						this.$storex
+					)
+				);
+				if (err) return this.errorHandler(err);
+				if (response.data.auth_code) {
+					if (this.display !== 'popup') {
+						this.loginSetup({ ...response, isModal: this.isModal });
+						await this.getLoggedInAccounts();
+					}
 
-          this.loginSuccess({ ...response, isModal: this.isModal });
-          clearInterval(this.poolingInterval);
-          clearInterval(this.qrCodeRefreshInterval);
-        }
-      }, 2000);
-    },
+					this.loginSuccess({ ...response, isModal: this.isModal });
+					clearInterval(this.poolingInterval);
+					clearInterval(this.qrCodeRefreshInterval);
+				}
+			}, 2000);
+		},
 
-    async initQrCodeLogin() {
-      this.refreshQrCode();
-      await nextTick();
-      await this.startQrCodePooling();
-      this.qrCodeRefreshInterval = setInterval(() => {
-        this.refreshQrCode();
-      }, 60000);
-    },
-  }
-}
+		async initQrCodeLogin() {
+			this.refreshQrCode();
+			await nextTick();
+			await this.startQrCodePooling();
+			this.qrCodeRefreshInterval = setInterval(() => {
+				this.refreshQrCode();
+			}, 60000);
+		}
+	}
+};

package/src/mixins/saml.mixin.js

@@ -1,29 +1,37 @@
 import { Browser } from '@capacitor/browser';
 import UtilService from '@/services/UtilService';
-import { Capacitor } from "@capacitor/core";
+import { Capacitor } from '@capacitor/core';
 import { EventBus } from '@/store/event-bus.js';
 export default {
-	data () {
+	data() {
 		return {
 			code_verifier: '',
-			code_challenge: ''
-		}
-	},
-	computed: {
+			code_challenge: '',
+			shouldCloseWindow: false,
+			popupWindow: null,
+			checkInterval: null
+		};
 	},
+	computed: {},
 	watch: {
-		/*
-		'$route.path': async function(routePath) {
-			await this.handleSamlRedirect(routePath)
+		'$route.path' (nv) {
+			if (nv === '/callback/saml') {
+				this.handleSamlRedirect(nv)
+			}
 		}
-		 */
 	},
 	methods: {
-		async samlLogin (loginUrl) {
-
+		closeWindow() {
+			try {
+				window.close()
+			} catch (e) {
+				console.log('Window close error', e);
+			}
+		},
+		async samlLogin(loginUrl) {
 			// Create and store a new PKCE code_verifier (the plaintext random secret)
 			this.code_verifier = UtilService.generateRandomString(28);
-			localStorage.setItem("pkce_code_verifier", this.code_verifier);
+			localStorage.setItem('pkce_code_verifier', this.code_verifier);
 
 			// Hash and base64-urlencode the secret to use as the challenge
 			this.code_challenge = await UtilService.pkceChallengeFromVerifier(this.code_verifier);
@@ -31,58 +39,99 @@ export default {
 			const platform = Capacitor.getPlatform();
 
 			// append public key as relayState
-			let dataString = `code_challenge=${this.code_challenge}&platform=${platform}&redirect_uri=${(location.origin + '/callback/saml')}&realm=${this.$storex.realm}`;
+			let dataString = `code_challenge=${this.code_challenge}&platform=${platform}&redirect_uri=${location.origin + '/callback/saml'}&realm=${this.realm}&display=${this.display}`;
 			let relayState = btoa(dataString);
 
-			loginUrl = `${loginUrl}&RelayState=${relayState}`
+			loginUrl = `${loginUrl}&RelayState=${relayState}`;
 
 			let self = this;
 
-			window.addEventListener("message", async (message)=> {
-				if (!this.allowedOriginsAuth.includes(message.origin)) return console.log('Origin is not allowed!');
-				if(message.data.type === 'saml' && message.data.code) {
-					if (this.display === 'popup') {
-						return window.parent?.postMessage({ code: message.data.code, state: this.$route.query.state, code_verifier: localStorage.getItem("pkce_code_verifier") }, '*');
+			window.addEventListener(
+				'message',
+				async (message) => {
+					if (!this.allowedOriginsAuth.includes(message.origin)) return console.log('Origin is not allowed!');
+					if (message.data.code) {
+						console.log('post message from opener', message.data, self.display);
+
+						if (self.display === 'popup') {
+							return window.parent?.postMessage({ code: message.data.code, state: message.data.state, code_verifier: localStorage.getItem('pkce_code_verifier') }, '*');
+						}
+						await self.exchangeAuthCode({ code: message.data.code, code_verifier: localStorage.getItem('pkce_code_verifier') });
+						localStorage.removeItem('pkce_code_verifier');
 					}
-					await self.exchangeAuthCode({code: message.data.code, code_verifier: localStorage.getItem("pkce_code_verifier")});
-					localStorage.removeItem("pkce_code_verifier");
-				}
-			}, { once: true });
+				},
+				{ once: true }
+			);
+
+			if (this.isNative) {
+				this.popupWindow = await Browser.open({ url: loginUrl, presentationStyle: 'popover' });
+			} else {
+				this.checkInterval = setInterval(() => {
+					// check localStorage
+					const code = localStorage.getItem('auth_code');
+					const pkce = localStorage.getItem('pkce_code_verifier');
 
-			let popupWindow;
-			if(this.isNative) {
-				popupWindow = await Browser.open({ url: loginUrl, presentationStyle: 'popover'});
+					console.log('interval', code, pkce);
+
+					if (code) {
+						clearInterval(this.checkInterval);
+						localStorage.removeItem('auth_code');
+						localStorage.removeItem('pkce_code_verifier');
+
+						// handle code exchange
+						window.parent?.postMessage({ code: code, state: this.$route.query.state, code_verifier: pkce }, '*');
+
+						// attempt to close child if possible
+						// if (this.popupWindow?.closed === false) this.popupWindow.close();
+					}
+				}, 500);
+
+				this.popupWindow = window.open('https://auth.tapni.com/callback/redirect?uri=' + btoa(loginUrl), 'popup', 'width=600,height=600');
+			}
+
+			if (this.popupWindow) {
+				this.popupWindow.addEventListener('beforeunload', () => {
+					console.log('popup window closed');
+				})
 			}
-			else popupWindow = window.open(loginUrl, 'popup','width=600,height=600')
-			/*
-			popupWindow.addEventListener('beforeunload', () => {
-				console.log('window closed')
-			})
-			 */
+
 		},
 		async handleSamlRedirect() {
 			let code;
-			let postMessageData = {type: 'saml'}
-			if (this.$route.query.code) postMessageData.code = this.$route.query.code;
-			if(window.opener) {
-				window.opener.postMessage(postMessageData, location.origin);
-				window.close()
+			if (this.$route.query.code) {
+				code = this.$route.query.code
+			}
+			console.log('window1', window.opener);
+			console.log('window2', window.parent);
+			if (window.opener) {
+				window.opener.postMessage({ type: 'saml', code }, '*');
+				this.closeWindow();
 			} else {
-				if(this.isNative && this.isIOS) await Browser.close();
-				EventBus.$emit('ssoEvent', {name: 'setLoading', data: true})
-				if (this.$route.query.code) code = this.$route.query.code
+				if (this.isNative && this.isiOS) await Browser.close();
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: true });
 
-				console.log(this.display, {code});
+				console.log(this.display, { code }, window.parent, window.opener);
 
 				if (code) {
 					if (this.display === 'popup') {
-						return window.parent?.postMessage({ code: code, state: this.$route.query.state }, '*');
+						localStorage.setItem('auth_code', code);
+						this.shouldCloseWindow = true;
+						window.parent?.postMessage({ code: code, state: this.$route.query.state }, '*');
+						this.closeWindow()
+					}
+					// TODO: Replace URLs with .env variables to support staging
+					if (this.display === 'redirect' || location.host === 'auth.tapni.com') {
+						let redirect_url = 'https://auth.tapni.com/callback/auth';
+						if (this.realm === 'dashboard') {
+							redirect_url = 'https://business.tapni.com/login'
+						}
+						return location.href = redirect_url + '?code=' + code + '&code_verifier=' + localStorage.getItem('pkce_code_verifier');
 					}
-					await this.exchangeAuthCode({code, code_verifier: localStorage.getItem("pkce_code_verifier")});
+					await this.exchangeAuthCode({ code, code_verifier: localStorage.getItem('pkce_code_verifier') });
 				}
-				localStorage.removeItem("pkce_code_verifier");
-				EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+				// localStorage.removeItem('pkce_code_verifier');
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: false });
 			}
 		}
-	},
-}
+	}
+};

package/src/router/index.js

@@ -1,9 +1,9 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import routes from '../routes.js'
+import { createRouter, createWebHistory } from 'vue-router';
+import routes from '../routes.js';
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes
+});
 
-export default router
+export default router;