@tapni/auth 0.0.2 → 0.0.3

package/src/main.js

@@ -0,0 +1,96 @@
+import "./styles/framework.css";
+import "./styles/style.css";
+
+import { createApp } from 'vue'
+import RootApp from './App.vue'
+import router from './router'
+import GlobalMixin from './mixins/global.mixin'
+import VueCookies from 'vue-cookies'
+import { App } from '@capacitor/app';
+import { Browser } from '@capacitor/browser';
+
+const app = createApp(RootApp)
+
+app.config.productionTip = false
+
+// Cookies
+app.use(VueCookies)
+
+// Global Mixin
+app.mixin(GlobalMixin)
+
+app.use(router)
+
+app.mount('#app')
+
+
+function hasQueryParams(route) {
+    return !!Object.keys(route.query).length
+}
+
+router.beforeEach((to, from, next) => {
+    setTimeout(() => {
+        window.scrollTo(0, 0)
+    }, 100)
+
+    if(!hasQueryParams(to) && hasQueryParams(from)){
+        next({name: to.name, query: from.query});
+    } else {
+        next()
+    }
+})
+
+/**
+ * Redirect users to desired profile - DEEP LINKING
+ * @param data
+ */
+function redirectToProfile(data) {
+    if (data && data.url) {
+        let url = new URL(data.url)
+        let pathname = url.pathname || '';
+        let queryParams = url.search || ''
+        if(queryParams) queryParams = Object.fromEntries(new URLSearchParams(queryParams));
+        else queryParams = {};
+        let subdomain = '';
+        //['my', 'tapni', 'co']
+        let tempArr = url.hostname.split('.');
+        if(tempArr.length === 3) subdomain = tempArr[0];
+        if(subdomain) queryParams.s = subdomain;
+
+        // open t.link shorter links in browser
+        if(pathname && /[A-Z]/.test(pathname) && !pathname.startsWith('/t/')) {
+            Browser.open({url: url.toString()});
+            return router.push('/');
+        }
+
+        if (pathname) {
+            router.push({
+                path: pathname,
+                query: queryParams
+            })
+        }
+    }
+}
+/**
+ * CAPACITOR_CONFIG
+ * Deep linking configuration
+ * Users who have an app should get the profiles opened in the app ie: tapni.co/tapni
+ */
+App.addListener('appUrlOpen', async function (data) {
+    if(data.url && data.url.startsWith('tapni://')) data.url = data.url.replace('tapni://', 'https://')
+    let url = new URL(data.url);
+    if(url.pathname.includes('/callback/')) {
+        await router.push({path: url.pathname, query:  Object.fromEntries(new URLSearchParams(url.search))});
+    }
+    else redirectToProfile(data);
+})
+
+// When the app is open and you trigger NFC event to open the app
+// App.addListener('appStateChange', async function (l) {
+// 	const data = await App.getLaunchUrl()
+// })
+
+// When the app is closed and NFC event opens the app
+App.getLaunchUrl().then((data) => {
+    redirectToProfile(data)
+});

package/src/mixins/apple.mixin.js

@@ -0,0 +1,60 @@
+import to from 'await-to-js'
+import AuthService from '../services/AuthService'
+import {SignInWithApple} from '@capacitor-community/apple-sign-in';
+
+import { jwtDecode } from "jwt-decode";
+import {EventBus} from '../store/event-bus';
+export default {
+  data () {
+    return {
+      appleLoad: false
+    }
+  },
+  computed: {
+    displayAppleLogin () {
+      return (this.ssoCompany?.login?.apple_login && !this.isModal) ?? ((Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'ios') || (!Capacitor.isNativePlatform() && this.isiOS));
+    }
+  },
+  methods: {
+    async appleLogin () {
+      this.appleLoad = true
+      const [errAuth, user] = await to(SignInWithApple.authorize({
+        clientId: 'co.tapni.applelogin',
+        redirectURI: 'https://' + window.location.host + '/login',
+        scopes: 'email name'
+      }))
+      if (errAuth) return this.appleLoad = false
+      user.response.tokenData = jwtDecode(user.response.identityToken);
+
+      if (user && user.response && user.response.identityToken) {
+        // Track Referrals
+        if (this.referral) user.response.ref = this.referral;
+
+        // Code Login
+        if (this.display === 'popup') user.response_type = 'code';
+
+        const [err, response] = await to(AuthService.appleSDK(user.response, this.storage))
+        if (err) {
+          this.appleLoad = 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)
+      } else {
+        this.appleLoad = false
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+      }
+    }
+  }
+}

package/src/mixins/auth.mixin.js

@@ -0,0 +1,525 @@
+import to from "await-to-js";
+
+import UserService from "../services/UserService";
+import DeviceService from "../services/DeviceService";
+import AuthService from "../services/AuthService";
+import CompanyService from "../services/CompanyService";
+
+import { EventBus } from "../store/event-bus";
+import { Device } from "@capacitor/device";
+import axios from "axios";
+import en from "@/store/locales/en.js";
+import de from "@/store/locales/de.js";
+import es from "@/store/locales/es.js";
+import fr from "@/store/locales/fr.js";
+import it from "@/store/locales/it.js";
+import sr from "@/store/locales/sr.js";
+import tr from "@/store/locales/tr.js";
+import cn from "@/store/locales/cn.js";
+import kr from "@/store/locales/kr.js";
+import { StorageMixin } from '@tapni/capacitor-reactive-localstorage-vue3'
+export default {
+  mixins: [StorageMixin],
+  data() {
+    return {
+      appLanguage: "en",
+      token: "",
+      refreshToken: "",
+      loggedInUserId: "",
+      ssoUser: {},
+      ssoCompany: {},
+      device: {},
+      loggedInAccounts: {},
+      ssoLang: {
+        en: en.state,
+        de: de.state,
+        es: es.state,
+        fr: fr.state,
+        it: it.state,
+        sr: sr.state,
+        tr: tr.state,
+        cn: cn.state,
+        kr: kr.state,
+      },
+      display: import.meta.env.VITE_APP_MODE,
+      redirect_uri: import.meta.env.VITE_APP_APP_ROOT + "/callback/auth",
+      response_type: "token",
+      state: "",
+      allowedOrigins: [
+        "https://business.tapni.com",
+        "https://business-dev.tapni.com",
+        "https://tapni.com",
+        "https://tapni.co",
+        "https://t.link",
+        "https://my.tapni.com",
+        "https://my.tapni.co",
+        "https://dev.tapni.co",
+        "https://dev.tapni.com",
+        "https://auth.tapni.com",
+        "https://auth.tapni.co",
+        "https://mailsign.link",
+        "https://sign.tapni.com",
+        "https://qrcodetoolkit.com",
+        "https://qr.tapni.com",
+        "https://designer.tapni.com",
+        "https://designer-dev.tapni.com",
+      ],
+    };
+  },
+  computed: {
+    appLang() {
+      return this.appLanguage;
+    },
+    isLoggedIn() {
+      return !!this.token && this.token !== "" && this.token !== "null";
+    },
+    renderView() {
+      if (this.display === "redirect") {
+        return false;
+      } else return this.view;
+    },
+  },
+  mounted() {
+    if (this.$route.query.redirect_uri)
+      this.redirect_uri = this.$route.query.redirect_uri;
+    if (this.$route.query.display) this.display = this.$route.query.display;
+    if (this.$route.query.state) this.state = this.$route.query.state;
+    if (this.$route.query.response_type)
+      this.response_type = this.$route.query.response_type;
+    if (this.$route.query.realm) this.storage.realm = this.$route.query.realm;
+
+    EventBus.$on("updateLang", this.updateLang);
+
+    if (import.meta.env.NODE_ENV === "development") {
+      this.allowedOrigins.push("http://localhost:8082");
+      this.allowedOrigins.push("http://localhost:7777");
+      this.allowedOrigins.push("http://localhost:5173");
+    }
+  },
+  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"
+        ) {
+          return 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");
+    },
+
+    async eventLog(data) {
+      const [err, response] = await to(
+        UserService.eventLog(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response;
+    },
+    async maintenance() {
+      const [err, response] = await to(
+        axios.get("https://status.tapni.co/data/maintenance.json")
+      );
+      if (err) return console.error(err);
+      if (response) {
+        let maintenanceState = response.data;
+        if (typeof response.data === "string") {
+          maintenanceState = JSON.parse(response.data);
+        }
+
+        if (maintenanceState.api && maintenanceState.api.maintenanceActive) {
+          location.href =
+            "https://t.link/maintenance?msg=" + maintenanceState.api.msg;
+        }
+      }
+    },
+    async getUser(data) {
+      if (data) {
+        let err, response;
+        if (data.username)
+          [err, response] = await to(
+            UserService.getByUsername(data, this.storage)
+          );
+        else if (data.serial)
+          [err, response] = await to(
+            UserService.getByNumber(data, this.storage)
+          );
+        if (err) return this.errorHandler(err);
+        if (response.data.success) {
+          if (!response.data.user && response.data.showDemoProfile) {
+            if (this.isLoggedIn) {
+              this.$router.push("/tags#activate");
+              throw new Error("Activate the tag");
+            } else {
+              return this.$router.push("/" + response.data.showDemoProfile);
+            }
+          }
+
+          if (!response.data.user && data.login) {
+            this.logout();
+          }
+
+          this.registerLang(
+            response.data.user ? response.data.user.ssoLang : "en"
+          );
+          this.setUser(response.data.user);
+        }
+      }
+    },
+
+    async loginSetup(response) {
+      // Save Refresh Token
+      if (response.data.refreshToken)
+        this.setRefreshToken(response.data.refreshToken);
+
+      // Save Access Token
+      if (response.data.token) this.setToken(response.data.token);
+
+      // Update Language
+      if (response.data?.data?.ssoLang !== this.appLang) {
+        EventBus.$emit("ssoEvent", {
+          name: "saveProfile",
+          data: { lang: this.appLang, username: response.data.data.username },
+        });
+      }
+
+      this.setLoggedInUserId(response.data.data.id);
+
+      this.storage.UserId = response.data.data.id;
+      this.storage.username = response.data.data.username;
+
+      if (response.isModal === true) {
+        this.setLoggedInAccounts([
+          {
+            id: response.data.data.id,
+            username: response.data.data.username,
+            refreshToken: response.data.refreshToken,
+            photo: response.data.data.photo,
+          },
+        ]);
+      }
+
+      // await this.registerDevice();
+      // if (Capacitor.isNativePlatform()) initPushNotifications();
+    },
+    async refreshTokenAction(data) {
+
+      const [err, response] = await to(
+        AuthService.refreshToken({
+          id: data.id,
+          refreshToken: this.refreshToken,
+          refreshTokenAction: true
+        }, this.storage)
+      );
+      if (err && err.response && err.response.data.error === "ACCESS_DENIED") {
+        this.logout(false);
+        return location.reload();
+      }
+
+      // Set new access token
+      this.setToken(response.data.token);
+    },
+    async login(data) {
+      const [err, response] = await to(AuthService.login(data, this.storage));
+      if (err) return this.errorHandler(err);
+      if (response.data.success) {
+        if (this.display === "npm") {
+          this.loginSetup({ ...response, isModal: data.isModal });
+          this.getLoggedInAccounts();
+        }
+
+        this.loginSuccess({ ...response, isModal: data.isModal });
+
+        return true;
+      }
+    },
+    loginSuccess(response) {
+      if (this.display === "redirect") {
+        if (this.redirect_uri &&
+          !this.allowedOrigins.some((domain) =>
+            this.redirect_uri.startsWith(domain)
+          )
+        ) {
+          return console.log("Redirect URI not allowed");
+        }
+
+        location.href =
+          this.redirect_uri +
+          "?code=" +
+          response.data.auth_code +
+          "&state=" +
+          this.state;
+      } else if (this.display === "popup") {
+        this.allowedOrigins.forEach((domain) => {
+          window.parent?.postMessage(
+            { code: response.data.auth_code, state: this.$route.query.state },
+            domain
+          );
+        });
+      } else if (this.display === "npm") {
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: true})
+        EventBus.$emit("ssoEvent", { name: "getUser", data: { login: true, username: response.data.data.username } });
+
+        if (response.isModal) {
+          EventBus.$emit("closeModal");
+          this.successSnack(this.ssoLang[this.appLang].success_login);
+        }
+        this.$router.push("/" + response.data.data.username + "#edit");
+      }
+    },
+    async register(data) {
+      const [err, response] = await to(
+        AuthService.register(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response;
+    },
+    async verify(data) {
+      const [err, response] = await to(AuthService.verify(data, this.storage));
+      if (err) return this.errorHandler(err);
+      return response;
+    },
+    async reset(data) {
+      const [err, response] = await to(
+        AuthService.sendResetEmail(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      if (response.data.success) {
+        this.successSnack(this.ssoLang[this.appLang].password_reset_success);
+      }
+    },
+    async exchangeAuthCode(data) {
+      const [err, response] = await to(
+        axios.post(import.meta.env.VITE_APP_API_ROOT + "/v1/users/auth-code", {
+          code: data.code,
+          code_verifier: data.code_verifier,
+        })
+      );
+      if (err) return this.errorHandler(err);
+      await this.loginSetup(response);
+      await this.getLoggedInAccounts();
+      this.loginSuccess(response);
+    },
+    async changePassword(data) {
+      const [err, response] = await to(
+        AuthService.changePassword(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response.data.success;
+    },
+    async newPassword(data) {
+      const [err, response] = await to(
+        UserService.newPassword(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response.data.success;
+    },
+    async deleteAccount(data) {
+      const [err, response] = await to(
+        UserService.deleteAccount(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response.data.success;
+    },
+    async registerDevice() {
+      const deviceID = await Device.getId();
+      const deviceInfo = await Device.getInfo();
+      let deviceData = {
+        device_id: deviceID.uuid,
+        platform: deviceInfo.platform,
+        device_info: {
+          model: deviceInfo.model,
+          manufacturer: deviceInfo.manufacturer,
+          operatingSystem: deviceInfo.operatingSystem,
+          osVersion: deviceInfo.osVersion,
+          isVirtual: deviceInfo.isVirtual,
+          webViewVersion: deviceInfo.webViewVersion,
+        },
+      };
+      const [err, response] = await to(
+        DeviceService.registerDevice(deviceData, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response;
+    },
+    async addFcmToken(data) {
+      const [err, response] = await to(
+        DeviceService.addFcmToken(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response;
+    },
+    async acceptCompanyInvitation(code) {
+      const [err, response] = await to(
+        CompanyService.acceptCompanyInvitation(code, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response;
+    },
+    async logout(sendRequest = true) {
+      if (sendRequest) {
+        AuthService.logout({ token: this.refreshToken }, this.storage);
+      }
+
+      this.storage.username = null;
+      this.storage.ssoUser = null;
+      this.storage.UserId = null;
+      this.setLoggedInUserId(null);
+      this.setToken(null);
+      this.setRefreshToken(null);
+
+      if (this.refreshToken) {
+        Object.keys(this.loggedInAccounts).forEach((username) => {
+          if (
+            this.loggedInAccounts[username].refreshToken === this.refreshToken
+          ) {
+            this.refreshTokenAction({
+              id: this.loggedInAccounts[username].id,
+            }).then(() => {
+              this.setLoggedInUserId(this.loggedInAccounts[username].id);
+              this.storage.username = username;
+              this.storage.UserId = this.loggedInAccounts[username].id;
+              this.getLoggedInAccounts();
+              return this.$router.push("/" + username);
+            });
+          }
+        });
+      } else this.setUser(null);
+      await this.$router.push("/welcome");
+    },
+    async getCompanyBySSOEmail(data) {
+      const [err, response] = await to(
+        CompanyService.getBySSOEmail(data.email, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      if (response.data.success) {
+        return response.data;
+      }
+    },
+    async getLoggedInAccounts() {
+      const refreshTokens = this.getRefreshTokens();
+      const [err, response] = await to(
+        AuthService.getLoggedInAccounts({ refreshTokens }, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      if (response.data.success) {
+        this.setLoggedInAccounts(response.data.accounts);
+      }
+    },
+    async loginUsingQR(data) {
+      const [err, response] = await to(
+        UserService.loginUsingQR(data, this.storage)
+      );
+      if (err) return this.errorHandler(err);
+      return response.data.success;
+    },
+    setLoggedInAccounts(accounts) {
+      this.loggedInAccounts = {};
+      accounts.forEach((account) => {
+        this.loggedInAccounts[account.username] = account;
+      });
+      EventBus.$emit("ssoEvent", { name: "setLoggedInAccounts", data: accounts });
+    },
+    setLoggedInUserId(id) {
+      this.loggedInUserId = id;
+    },
+    setUser(user) {
+      this.ssoUser = user;
+      if (
+        this.storage &&
+        this.ssoUser &&
+        this.storage.username === this.ssoUser.username
+      ) {
+        this.appLanguage = user.ssoLang;
+      }
+    },
+    getRefreshTokens() {
+      return this.storage.refreshTokens.split(',');
+    },
+    setRefreshToken(token) {
+      let refreshTokens = this.getRefreshTokens();
+      if (token && !refreshTokens.includes(token)) refreshTokens.unshift(token);
+      else refreshTokens = refreshTokens.filter((t) => t !== this.refreshToken);
+
+      if (refreshTokens.length >= 1) this.refreshToken = refreshTokens[0];
+      else this.refreshToken = token;
+
+      this.storage.refreshTokens = refreshTokens.join(",");
+      EventBus.$emit("ssoEvent", { name: "setRefreshToken", data: token });
+    },
+    setToken(token) {
+      this.storage.token = token;
+      this.token = token;
+      EventBus.$emit("ssoEvent", { name: "setToken", data: token });
+    },
+    setUserID(userID) {
+      this.storage.UserId = userID;
+    },
+    updateLang(lang) {
+      this.appLanguage = lang;
+    },
+  },
+  watch: {
+    "$route.query": {
+      handler: function handler() {
+        if (this.$route.query.redirect_uri)
+          this.redirect_uri = this.$route.query.redirect_uri;
+        if (this.$route.query.display) this.display = this.$route.query.display;
+        if (this.$route.query.state) this.state = this.$route.query.state;
+        if (this.$route.query.response_type)
+          this.response_type = this.$route.query.response_type;
+        if (this.$route.query.realm)
+          this.storage.realm = this.$route.query.realm;
+        if (this.$route.query.qrLogin) this.changeLoginToQr();
+      },
+      deep: true,
+    },
+    storage: {
+      async handler() {
+        await store.setRaw(this.storage);
+      },
+      deep: true
+    }
+  },
+};