@tapni/auth 1.0.5 → 1.0.6-3.dev

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

@@ -2,86 +2,123 @@ import { Browser } from '@capacitor/browser';
 import UtilService from '@/services/UtilService';
 import { Capacitor } from "@capacitor/core";
 import { EventBus } from '@/store/event-bus.js';
+
 export default {
-	data () {
+	data() {
 		return {
 			code_verifier: '',
-			code_challenge: ''
-		}
+			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) {
+				// Window close error
+			}
+		},
+		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);
 
 			// Hash and base64-urlencode the secret to use as the challenge
 			this.code_challenge = await UtilService.pkceChallengeFromVerifier(this.code_verifier);
-
 			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 + (this.display === 'npm' ? '/app' : '') + '/callback/saml'}&realm=${this.realm}&display=${this.display}`;
 			let relayState = btoa(dataString);
-
 			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.error('Origin is not allowed! ' + message.origin);
+					const code = message.data.code;
+					const pkce = localStorage.getItem('pkce_code_verifier');
+					if (code) {
+						if (self.display === 'popup') {
+							return window.parent?.postMessage({ code: code, state: message.data.state, code_verifier: pkce }, '*');
+						}
+						if (pkce) {
+							await self.exchangeAuthCode({ code: message.data.code, code_verifier: pkce });
+							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 }
+			);
 
-			let popupWindow;
-			if(this.isNative) {
-				popupWindow = await Browser.open({ url: loginUrl, presentationStyle: 'popover'});
+			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');
+
+					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 }, '*');
+
+						if (pkce && (this.display === 'npm' || this.display === 'redirect')) {
+							this.exchangeAuthCode({ code, code_verifier: pkce });
+						}
+					}
+				}, 500);
+
+				this.popupWindow = window.open(window.location.origin + (this.display === 'npm' ? '/app' : '') + '/callback/redirect?uri=' + btoa(loginUrl), 'popup', 'width=600,height=600');
 			}
-			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
+			}
+			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
-
-				console.log(this.display, {code});
+				if (this.isNative && this.isiOS) await Browser.close();
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: true });
 
 				if (code) {
-					if (this.display === 'popup') {
-						return window.parent?.postMessage({ code: code, state: this.$route.query.state }, '*');
+					if (this.display === 'popup' || this.display === 'npm') {
+						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")});
 				}
-				localStorage.removeItem("pkce_code_verifier");
-				EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+				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;

package/src/routes.js

@@ -26,7 +26,7 @@ export default [
   {
     path: "/callback/saml",
     name: "Callback",
-    alias: ['/callback/okta', '/callback/auth'],
+    alias: ['/callback/okta', '/callback/auth', '/callback/redirect'],
     component: Callback,
   },
   {

package/src/services/Api.js

@@ -1,60 +1,58 @@
-import axios from 'axios'
-import { jwtDecode } from "jwt-decode";
-import { version } from "../../package.json"
+import axios from 'axios';
+import { jwtDecode } from 'jwt-decode';
+import { version } from '../../package.json';
 import store from '../store/store.js';
 
-export default (refreshTokenAction = null) => {
-    const appInfo = version;
-    let baseURL = import.meta.env.VITE_APP_API_ROOT + '/v1/';
-
-    if (store.getters['auth/apiRoot']) {
-      baseURL = store.getters['auth/apiRoot'] + '/v1/';
-    }
-
-    let apiInstance = axios.create({
-      baseURL,
-      headers: {
-        Authorization: `Bearer ${store.getters['auth/accessToken']}`,
-        "X-Client-Name": "sso-" + appInfo.platform,
-        "X-Client-Version": appInfo.version
-      }
-    })
-
-    // Add a request interceptor
-    apiInstance.interceptors.request.use(async function (config) {
-
-      if (['post', 'put', 'delete'].includes(config.method.toLowerCase())) {
-        config.data = {
-          ...config.data,
-          lang: store.getters['auth/appLanguage'],
-          realm: store.getters['auth/appRealm'] || 'app'
-        }
-      } else if (config.method.toLowerCase() === 'get') {
-        config.params = {
-          ...config.params,
-          lang: store.getters['auth/appLanguage'],
-          realm: store.getters['auth/appRealm'] || 'app'
-        }
-      }
-
-        // Check refresh token expiration before request is sent
-      if (store.getters['auth/accessToken'] && !refreshTokenAction) {
-        const decoded = jwtDecode(store.getters['auth/accessToken'])
-
-        // Check if access token expired
-        if (decoded.exp - 30 < Math.floor(Date.now() / 1000)) {
-          return store.dispatch('auth/refreshTokenAction', decoded)
-              .then(() => {
-                config.headers = {
-                  ...config.headers,
-                  Authorization: `Bearer ${store.getters['auth/accessToken']}`
-                }
-                return config;
-              })
-        }
-      }
-      return config;
-    });
-
-    return apiInstance;
-}
+export default (refreshTokenAction = null, version = 'v1') => {
+	const appInfo = version;
+	let baseURL = import.meta.env.VITE_APP_API_ROOT + '/' + version + '/';
+
+	if (store.getters['auth/apiRoot']) {
+		baseURL = store.getters['auth/apiRoot'] + '/' + version + '/';
+	}
+
+	let apiInstance = axios.create({
+		baseURL,
+		headers: {
+			Authorization: `Bearer ${store.getters['auth/accessToken']}`,
+			'X-Client-Name': 'sso-' + appInfo.platform,
+			'X-Client-Version': appInfo.version
+		}
+	});
+
+	// Add a request interceptor
+	apiInstance.interceptors.request.use(async function (config) {
+		if (['post', 'put', 'delete'].includes(config.method.toLowerCase())) {
+			config.data = {
+				...config.data,
+				lang: store.getters['auth/appLanguage'],
+				realm: store.getters['auth/appRealm'] || 'app'
+			};
+		} else if (config.method.toLowerCase() === 'get') {
+			config.params = {
+				...config.params,
+				lang: store.getters['auth/appLanguage'],
+				realm: store.getters['auth/appRealm'] || 'app'
+			};
+		}
+
+		// Check refresh token expiration before request is sent
+		if (store.getters['auth/accessToken'] && !refreshTokenAction) {
+			const decoded = jwtDecode(store.getters['auth/accessToken']);
+
+			// Check if access token expired
+			if (decoded.exp - 30 < Math.floor(Date.now() / 1000)) {
+				return store.dispatch('auth/refreshTokenAction', decoded).then(() => {
+					config.headers = {
+						...config.headers,
+						Authorization: `Bearer ${store.getters['auth/accessToken']}`
+					};
+					return config;
+				});
+			}
+		}
+		return config;
+	});
+
+	return apiInstance;
+};

package/src/services/AuthService.js

@@ -33,7 +33,13 @@ export default {
     })
   },
   verify (data) {
-    return api().get('/users/verify?c=' + data.code + '&e=' + data.email + '&captchatoken=' + data.captchaToken)
+    return api().get('/users/verify', {
+		params: {
+			c: data.code,
+			e: data.email,
+			captchatoken: data.captchaToken
+		}
+	});
   },
   googleUrl (storage) {
     return api().get('/users/google/url')
@@ -42,18 +48,10 @@ export default {
     data.device_id = deviceID
     return api().post('/users/google', data)
   },
-  facebook (data) {
-    data.device_id = deviceID
-    return api().post('/users/facebook', data)
-  },
   googleSDK (data) {
     data.device_id = deviceID
     return api().post('/users/google/sdk', data)
   },
-  facebookSDK (data) {
-    data.device_id = deviceID
-    return api().post('/users/facebook/sdk', data)
-  },
   appleSDK (data) {
     data.device_id = deviceID
     return api().post('/users/apple/sdk', data)

package/src/services/CompanyService.js

@@ -1,13 +1,13 @@
 import api from './Api';
 
 export default {
-  getBySSOEmail (email) {
-    return api().get(`/company/sso/${email}`)
-  },
-  acceptCompanyInvitation (code) {
-    return api().get(`/users/invitation?ic=${code}`)
-  },
-  qrCodePooling(payload) {
-    return api().post("/company/login/qr", payload);
-  },
-}
+	getBySSOEmail(email) {
+		return api().get(`/company/sso/${email}`);
+	},
+	acceptCompanyInvitation(code) {
+		return api().get(`/users/invitation?ic=${code}`);
+	},
+	qrCodePooling(payload) {
+		return api().post('/company/login/qr', payload);
+	}
+};

package/src/services/DeviceService.js

@@ -2,9 +2,9 @@ import api from './Api';
 
 export default {
 	registerDevice(data) {
-		return api().post(`/devices/add`, data)
+		return api().post(`/devices/add`, data);
 	},
 	addFcmToken(data) {
-		return api().post(`/devices/fcm/add`, data)
+		return api().post(`/devices/fcm/add`, data);
 	}
-}
+};