@tapni/auth 0.0.1

package/src/mixins/facebook.mixin.js

@@ -0,0 +1,78 @@
+import to from 'await-to-js'
+import AuthService from '../services/AuthService'
+import { FacebookLogin } from '@capacitor-community/facebook-login';
+import {EventBus} from "../store/event-bus";
+
+window.fbAsyncInit = function () {
+  // eslint-disable-next-line no-undef
+  FB.init({
+    appId: '202577611527680',
+    cookie: true, // enable cookies to allow the server to access the session
+    xfbml: true, // parse social plugins on this page
+    version: 'v16.0' // use graph api current version
+  })
+};
+
+// Load the SDK asynchronously
+(function (d, s, id) {
+  // eslint-disable-next-line one-var
+  var js, fjs = d.getElementsByTagName(s)[0]
+  if (d.getElementById(id)) return
+  js = d.createElement(s); js.id = id
+  js.src = 'https://connect.facebook.net/en_US/sdk.js'
+  fjs.parentNode.insertBefore(js, fjs)
+}(document, 'script', 'facebook-jssdk'))
+
+export default {
+  data () {
+    return {
+      facebookLoad: false
+    }
+  },
+  computed: {
+    fbLoginUrl () {
+      return 'https://www.facebook.com/v16.0/dialog/oauth?client_id=202577611527680&state={"oauth":"facebook"}&response_type=code%20granted_scopes&scope=email&redirect_uri=https://' + window.location.host + '/login'
+    },
+    displayFacebookLogin () {
+        return false // (this.ssoCompany?.login?.facebook_login && !this.isModal) ?? true;
+    }
+  },
+  methods: {
+    async facebookLogin () {
+      this.facebookLoad = true
+      const FACEBOOK_PERMISSIONS = ['email']
+      const [errAuth, user] = await to(FacebookLogin.login({permissions: FACEBOOK_PERMISSIONS}))
+      if (errAuth) return this.facebookLoad = false
+
+      // Track Referrals
+      if (this.referral) user.ref = this.referral;
+
+      if (this.display === 'popup') user.response_type = 'code';
+
+      if (user.accessToken) {
+
+        const [err, response] = await to(AuthService.facebookSDK(user, this.storage))
+        if (err) {
+          this.facebookLoad = 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)
+	      this.getLoggedInAccounts()
+          this.$router.push('/' + response.data.data.username + '#edit')
+          setTimeout(() => {
+            this.facebookLoad = false
+            EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+          }, 1000)
+        } else this.errorSnack(this.ssoLang[this.appLang].unexpected_err)
+      } else {
+        this.facebookLoad = false
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+      }
+    }
+  }
+}

package/src/mixins/global.mixin.js

@@ -0,0 +1,110 @@
+import {Capacitor} from '@capacitor/core';
+
+export default {
+  computed: {
+    home() {
+      if (this.storage.token && this.storage.username) {
+        if (import.meta.env.VITE_APP_MODE === 'npm') return '/' + this.storage.username
+        if (import.meta.env.VITE_APP_MODE === 'redirect') return 'https://t.link/'
+      } else return '/welcome'
+    },
+    isAndroid(){
+      return /Android/i.test(navigator.userAgent) || Capacitor.getPlatform() === 'android'
+    },
+    isiOS() {
+      return [
+        'iPad Simulator',
+        'iPhone Simulator',
+        'iPod Simulator',
+        'iPad',
+        'iPhone',
+        'iPod'
+      ].includes(navigator.platform)
+        // iPad on iOisNativeS 13 detection
+        || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+        || Capacitor.getPlatform() === 'ios'
+    },
+    isNative() {
+      return Capacitor.isNativePlatform()
+    },
+  },
+  methods: {
+    errorHandler(error) {
+      if (error && error.response && error.response.data && error.response.data.error) {
+        if (
+          error.response.data.error === 'ACCESS_DENIED' ||
+          error.response.data.error === 'TOKEN_EXPIRED'
+        ) {
+          this.logout();
+        }
+        // Link click network error bug fix
+        if (!error.response.data.error.includes('Network Error') && !error.response.data.error.includes('Cannot read properties')) {
+          this.errorSnack(error.response.data.error)
+        }
+      }
+      return error
+    },
+    errorSnack(message) {
+      let snackbar = document.getElementById('snackbar')
+      let errMessage = document.getElementById('errorMessage')
+      let errorSnack = document.getElementById('errorSnack')
+      errMessage.innerHTML = message
+      snackbar.classList.add('show-snack')
+      errorSnack.classList.add('active-snack')
+      setTimeout(function () { errorSnack.classList.remove('active-snack'); snackbar.classList.remove('show-snack')  }, 3000)
+    },
+    successSnack(message) {
+      let snackbar = document.getElementById('snackbar')
+      let successMessage = document.getElementById('successMessage')
+      let successSnack = document.getElementById('successSnack')
+      successMessage.innerHTML = message
+      snackbar.classList.add('show-snack')
+      successSnack.classList.add('active-snack')
+      setTimeout(function () { successSnack.classList.remove('active-snack'); snackbar.classList.remove('show-snack') }, 3000)
+    },
+    closeSnacks() {
+      document.getElementById('snackbar').classList.remove('show-snack')
+      document.getElementById('successSnack').classList.remove('active-snack')
+      document.getElementById('errorSnack').classList.remove('active-snack')
+    },
+    tapsEmoji(count) {
+      if (count < 10) return ''
+      else if (count <= 50) return '🔥'
+      else if (count <= 100) return '💥'
+      else if (count <= 300) return '💎'
+      else if (count > 300) return '🚀'
+      return ''
+    },
+    /** Function which checks if provided object is empty  */
+    isEmpty(obj) {
+      if (!obj) return true
+      for (let prop in obj) {
+        if (obj.hasOwnProperty(prop)) {
+          return false
+        }
+      }
+      return JSON.stringify(obj) === JSON.stringify({})
+    },
+    /** Copy string to clipboard */
+    copy(str = '') {
+      const el = document.createElement('textarea')
+      el.value = str
+      el.setAttribute('readonly', '')
+      el.style.position = 'absolute'
+      el.style.left = '-9999px'
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+      this.successSnack(this.ssoLang[this.appLang].copied)
+    },
+    async getCaptchaToken(action){
+      try {
+       return await window.grecaptcha.execute(import.meta.env.VITE_APP_GOOGLE_RECAPTCHA_SITE_KEY, {action: action});
+      } catch (err){
+        console.log(err)
+        return null
+      }
+    },
+  }
+}

package/src/mixins/google.mixin.js

@@ -0,0 +1,61 @@
+import to from 'await-to-js'
+import AuthService from '../services/AuthService'
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
+import {EventBus} from "../store/event-bus";
+
+export default {
+  data () {
+    return {
+      googleLoad: false
+    }
+  },
+  computed: {
+    displayGoogleLogin () {
+      return (this.ssoCompany?.login?.google_login && !this.isModal) ?? true;
+    }
+  },
+  mounted () {
+    GoogleAuth.initialize()
+  },
+  methods: {
+    async googleLogin () {
+
+      this.googleLoad = true
+      let [errAuth, user] = await to(GoogleAuth.signIn())
+      if (errAuth) return this.googleLoad = false
+
+      // Track Referrals
+      if (this.referral) user.ref = this.referral;
+
+      if (user.authentication && (user.authentication.accessToken || user.authentication.idToken)) {
+        // Track Referrals
+        if (this.referral) user.ref = this.referral;
+
+        // Code Login
+        if (this.display === 'popup') user.response_type = 'code';
+
+        const [err, response] = await to(AuthService.googleSDK(user, this.storage))
+        if (err) {
+          this.googleLoad = 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)
+          this.getLoggedInAccounts()
+          this.$router.push('/' + response.data.data.username + '#edit')
+          setTimeout(() => {
+            this.googleLoad = false
+            EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+          }, 1000)
+        } else this.errorSnack(this.ssoLang[this.appLang].unexpected_err)
+      } else {
+        this.googleLoad = false
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+      }
+    }
+  }
+}

package/src/mixins/microsoft.mixin.js

@@ -0,0 +1,88 @@
+import to from "await-to-js";
+import AuthService from "../services/AuthService";
+import { MsAuthPlugin } from "@recognizebv/capacitor-plugin-msauth";
+import { EventBus } from "../store/event-bus";
+
+export default {
+  data() {
+    return {
+      microsoftLoad: false,
+      microsoftSSOLoad: false,
+    };
+  },
+  computed: {
+    displayMicrosoftSSOLogin() {
+      return (
+        (this.ssoCompany?.login?.microsoft_login && !this.isModal) ?? false
+      );
+    },
+  },
+  methods: {
+    async microsoftLogin(type, sso = {}) {
+      if (type === "sso") this.microsoftSSOLoad = true;
+      else this.microsoftLoad = true;
+
+      if (!Object.keys(sso).length) sso = this.ssoCompany.sso?.azure?.sso || {};
+
+      const [errAuth, user] = await to(
+        MsAuthPlugin.login({
+          clientId: type === "sso" ? sso.clientID : import.meta.env.VITE_APP_SSO_ID,
+          tenant: type === "sso" ? sso.tenant : "consumers",
+          scopes: ["User.Read"],
+          knownAuthorities: [],
+          keyHash: "4+5wCp8QcLptlO0aeP5RDTTOWyg=", // Android,
+          redirectUri:
+            import.meta.env.NODE_ENV === "development"
+              ? `${window.location.origin}/login`
+              : "https://" + window.location.host + "/login",
+        })
+      );
+      if (errAuth) {
+        console.log("Error: " + JSON.stringify(errAuth));
+        return (this.microsoftLoad = false);
+      }
+
+      // Track Referrals
+      if (this.referral) user.ref = this.referral;
+
+      // Code Login
+      // if (this.display === "popup") user.response_type = "code";
+      user.response_type = "code";
+
+      if (user && (user.accessToken || user.idToken)) {
+        const [err, response] = await to(
+          AuthService.microsoftSDK(user, this.storage)
+        );
+        if (err) {
+          this.microsoftLoad = false;
+          this.microsoftSSOLoad = 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);
+          this.getLoggedInAccounts();
+          this.$router.push("/" + response.data.data.username + "#edit");
+          setTimeout(() => {
+            this.microsoftLoad = false;
+            this.microsoftSSOLoad = false;
+            EventBus.$emit("ssoEvent", { name: "setLoading", data: false });
+          }, 1000);
+        } else this.errorSnack(this.ssoLang[this.appLang].unexpected_err);
+      } else {
+        this.microsoftLoad = false;
+        this.microsoftSSOLoad = false;
+        EventBus.$emit("ssoEvent", { name: "setLoading", data: false });
+      }
+    },
+    ssoLogin() {
+      EventBus.$emit("toggleSSOModal");
+    },
+  },
+};

package/src/mixins/okta.mixin.js

@@ -0,0 +1,132 @@
+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';
+
+// 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 () {
+		return {
+			oktaAuth: null,
+		}
+	},
+	computed: {
+	},
+	watch: {
+		/*
+		'$route.path': async function(routePath) {
+			await this.handleOktaRedirect(routePath)
+		}
+		 */
+	},
+	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")})));
+			if (err) return this.errorHandler(err);
+			localStorage.removeItem("pkce_code_verifier");
+
+			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.storage));
+			if (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)
+				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.appLang].unexpected_err)
+		},
+		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));
+
+			// 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);
+
+			// Hash and base64-urlencode the secret to use as the challenge
+			let code_challenge = await UtilService.pkceChallengeFromVerifier(code_verifier);
+
+			let authorization_endpoint = data.domain + '/v1/authorize';
+
+			let redirectURI;
+			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 self = this;
+			//if (response && response.data && response.data.url) {
+			let code;
+			window.addEventListener("message", async (message)=> {
+				if (!this.allowedOrigins.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')
+		},
+		async handleOktaRedirect() {
+			let code = this.$route.query.code;
+			let state;
+			let clientID;
+			let domain;
+			let platform;
+			let postMessageData = {type: 'okta'}
+			if (code) postMessageData.code = code;
+			if (this.$route.query.state) {
+				state = this.$route.query.state;
+				state = atob(state);
+				const searchParams = new URLSearchParams(state);
+				clientID = searchParams.get('client_id');
+				domain = searchParams.get('domain');
+				platform = searchParams.get('platform');
+			}
+			if(window.opener) {
+				window.opener.postMessage(postMessageData, location.origin);
+				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})
+			}
+		}
+	}
+}

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

@@ -0,0 +1,112 @@
+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,
+    },
+  },
+  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);
+
+      // 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();
+      }
+
+      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.append(document.getElementById("qrCodeContainer"));
+    },
+    async startQrCodePooling() {
+      this.poolingInterval = setInterval(async () => {
+        const [err, response] = await to(CompanyService.qrCodePooling({
+          qrToken: this.qrCodeHash,
+        }, this.storage));
+        if (err) return this.errorHandler(err);
+        if (response.data.auth_code) {
+          if (this.display === 'npm') {
+            this.loginSetup({ ...response, isModal: this.isModal });
+            this.getLoggedInAccounts();
+          }
+
+          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);
+    },
+  }
+}

package/src/mixins/saml.mixin.js

@@ -0,0 +1,84 @@
+import { Browser } from '@capacitor/browser';
+import UtilService from '@/services/UtilService';
+import { Capacitor } from "@capacitor/core";
+
+export default {
+	data () {
+		return {
+			code_verifier: '',
+			code_challenge: ''
+		}
+	},
+	computed: {
+	},
+	watch: {
+		/*
+		'$route.path': async function(routePath) {
+			await this.handleSamlRedirect(routePath)
+		}
+		 */
+	},
+	methods: {
+		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 relayState = Buffer.from(`code_challenge=${this.code_challenge}&platform=${platform}&redirect_uri=${(location.origin + '/callback/saml')}&realm=${this.storage.realm}`).toString('base64');
+
+			loginUrl = `${loginUrl}&RelayState=${relayState}`
+
+			let self = this;
+
+			window.addEventListener("message", async (message)=> {
+				if (!this.allowedOrigins.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") }, '*');
+					}
+					await self.exchangeAuthCode({code: message.data.code, code_verifier: localStorage.getItem("pkce_code_verifier")});
+					localStorage.removeItem("pkce_code_verifier");
+				}
+			}, { once: true });
+
+			let popupWindow;
+			if(this.isNative) {
+				popupWindow = await Browser.open({ url: loginUrl, presentationStyle: 'popover'});
+			}
+			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()
+			} 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 (code) {
+					if (this.display === 'popup') {
+						return window.parent?.postMessage({ code: code, state: this.$route.query.state }, '*');
+					}
+					await this.exchangeAuthCode({code, code_verifier: localStorage.getItem("pkce_code_verifier")});
+				}
+				localStorage.removeItem("pkce_code_verifier");
+				EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+			}
+		}
+	},
+}

package/src/router/index.js

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