@nitra/cap 7.0.0 → 7.1.1

package/auth/NCapLoginApple.vue

@@ -0,0 +1,132 @@
+<template>
+  <div v-if="appleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
+    {{ appleError }}
+  </div>
+  <q-btn
+    v-if="!isAndroid"
+    @click="signInWithApple()"
+    :loading="checkInProgress"
+    class="full-width bg-white"
+    padding="6px"
+    no-caps
+    unelevated
+    style="border: 1px solid #ddd">
+    <div class="row items-center full-width q-pl-xs text-grey-9">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512">
+        <path
+          fill="#555555"
+          d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
+      </svg>
+      <div class="col">{{ label }}</div>
+    </div>
+  </q-btn>
+</template>
+
+<script setup>
+import { Capacitor } from '@capacitor/core'
+import { SignInWithApple } from '@capacitor-community/apple-sign-in'
+import { ref } from 'vue'
+import { checkToken } from '@nitra/vite-boot/token'
+import tf from '@nitra/tfm'
+import homeCheck from './njs/home-check.js'
+
+const props = defineProps({
+  // apple signin options
+  id: { type: String, default: null, required: true },
+  verifyOnly: { type: Boolean, default: false }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['verify', 'authorized'])
+
+const t = tf.bind({ tr: getTr() })
+
+const isAndroid = Capacitor.getPlatform() === 'android'
+const label = props.verifyOnly ? t`Прив’язати мій Apple` : t`Вхід через Apple`
+
+// console.log('props.id', props.id)
+const appleSignInOptions = {
+  clientId: props.id,
+  redirectURI: `https://${window.location.host}/not-used-with-popup`, // Не використовується з popup, але потрібно щоб було задано
+  // та й ще це повинен бути той самий домен, який вказаний в apple developer
+  // та й поточного домену де кнопка
+  scopes: 'email name', // в якості id будемо брати sub
+  state: 'origin:web', // Any string of your choice that you may use for some logic. It's optional and you may omit it.
+  usePopup: true, // Important if we want to capture the data apple sends on the client side.
+  nonce: 'nonce'
+}
+// лоадер
+const checkInProgress = ref(false)
+
+// APPLE
+const appleError = ref('')
+
+const authAppleUser = async identityToken => {
+  if (!identityToken) {
+    checkInProgress.value = false
+    return
+  }
+  // пользователь авторизован
+  try {
+    const respFromRun = await fetch('/auth/apple', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        idToken: identityToken,
+        verifyOnly: props.verifyOnly
+      })
+    })
+
+    const res = await respFromRun.json()
+    if (props.verifyOnly) {
+      emit('verify', res)
+      return
+    }
+
+    if (res?.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        emit('authorized', check.decoded)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        appleError.value = t`Користувачу ${check.userName} не дозволено входити`
+      }
+    } else {
+      appleError.value = t`Помилка Apple авторизації`
+    }
+  } catch (error) {
+    appleError.value = error
+  } finally {
+    checkInProgress.value = false
+  }
+}
+
+const signInWithApple = async () => {
+  try {
+    const signInWithAppleResponse = await SignInWithApple.authorize(appleSignInOptions)
+    console.log(signInWithAppleResponse)
+    const { identityToken } = signInWithAppleResponse
+    await authAppleUser(identityToken)
+  } catch (error) {
+    appleError.value = error
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Вхід через Apple': { ru: 'Вход через аккаунт Apple' },
+    'Прив’язати мій Apple': { ru: 'Привязать мой Apple' },
+    'Помилка Apple авторизації': { ru: 'Ошибка авторизации Apple' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити': { ru: ' не разрешен вход' }
+  }
+}
+</script>

package/auth/NCapLoginGoogle.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="googleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
+    {{ googleError }}
+  </div>
+  <q-btn
+    v-if="isGoogleAuthInitialized"
+    @click="signInWithGoogle()"
+    :loading="checkInProgress"
+    icon="fa-brands fa-google"
+    :label="t`Вхід через Google`"
+    class="full-width"
+    padding="sm md"
+    color="google"
+    no-caps />
+</template>
+
+<script setup>
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
+import { ref } from 'vue'
+import { checkToken } from '@nitra/vite-boot/token'
+import tf from '@nitra/tfm'
+import homeCheck from './njs/home-check.js'
+
+const googleError = ref('')
+
+const props = defineProps({
+  verifyOnly: { type: Boolean, default: false }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['verify', 'authorized'])
+
+const t = tf.bind({ tr: getTr() })
+
+const checkInProgress = ref(false)
+const isGoogleAuthInitialized = ref(false)
+try {
+  GoogleAuth.init()
+  isGoogleAuthInitialized.value = true
+} catch {
+  isGoogleAuthInitialized.value = false
+}
+
+/**
+ *
+ */
+async function signInWithGoogle() {
+  checkInProgress.value = true
+  googleError.value = ''
+  try {
+    const response = await GoogleAuth.signIn()
+    const credential = response?.authentication?.idToken
+    if (!credential) {
+      checkInProgress.value = false
+      googleError.value = t`Помилка Google авторизації`
+      return
+    }
+    authGoogleUser(credential)
+  } catch {
+    checkInProgress.value = false
+    googleError.value = t`Помилка Google авторизації`
+  }
+}
+
+/**
+ *
+ * @param credential
+ */
+async function authGoogleUser(credential) {
+  try {
+    const respFromRun = await fetch('/auth/google', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        credential,
+        verifyOnly: props.verifyOnly
+      })
+    })
+
+    const res = await respFromRun.json()
+    if (props.verifyOnly) {
+      emit('verify', res)
+      return
+    }
+
+    if (res?.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        emit('authorized', check.decoded)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        googleError.value = t`Користувачу ${check.userName} не дозволено входити`
+      }
+    } else {
+      googleError.value = t`Помилка Google авторизації`
+    }
+  } catch (error) {
+    googleError.value = error
+  } finally {
+    checkInProgress.value = false
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Помилка Google авторизації': { ru: 'Ошибка авторизации Google' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити': { ru: ' не разрешен вход' },
+    'Вхід через Google': { ru: 'Вход через аккаунт Google' }
+  }
+}
+</script>

package/auth/NCapLoginMulti.vue

@@ -0,0 +1,331 @@
+<template>
+  <q-page class="flex flex-center bg-grey-3">
+    <q-card style="width: 300px">
+      <!-- лого -->
+      <div style="margin-top: -50px" class="text-center">
+        <q-avatar class="shadow-2" size="100px">
+          <img :src="props.logo" />
+        </q-avatar>
+      </div>
+
+      <!-- вход по логину/паролю -->
+      <q-card-section class="q-pb-none">
+        <q-form @submit="loginSubmit" class="full-width q-gutter-y-md" autocomplete="on">
+          <div v-if="loginError" class="text-white text-red bg-red-1 q-pa-xs text-center">{{ loginError }}</div>
+
+          <q-input id="login" v-model.trim="login" type="login" autocomplete="username" :label="t`Логін`" outlined>
+            <template #prepend>
+              <q-icon name="person" />
+            </template>
+            <template v-if="login && browserSupportsWebAuthn()" #append>
+              <q-btn @click="biometry(login, 'login')" padding="none" flat icon="fingerprint" />
+            </template>
+          </q-input>
+          <q-input
+            id="password"
+            v-model="password"
+            :type="isPwd ? 'password' : 'text'"
+            autocomplete="current-password"
+            :label="t`Пароль`"
+            outlined>
+            <template #prepend>
+              <q-icon name="vpn_key" />
+            </template>
+            <template #append>
+              <q-icon @click="isPwd = !isPwd" :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" />
+            </template>
+          </q-input>
+
+          <q-btn
+            v-if="login && password && password.length > 4"
+            :loading="loginLoading"
+            type="submit"
+            :label="t`Увійти`"
+            class="full-width q-mt-md"
+            padding="md"
+            color="primary" />
+        </q-form>
+
+        <n-forgot-pass />
+      </q-card-section>
+
+      <!-- или -->
+      <q-card-section v-if="apple || google" class="row items-center q-gutter-x-md">
+        <q-separator class="col" />
+        <div>{{ t`АБО` }}</div>
+        <q-separator class="col" />
+      </q-card-section>
+
+      <q-card-section v-if="apple || google" class="q-gutter-y-md">
+        <!-- вход по email -->
+        <q-input
+          v-model="email"
+          type="email"
+          :label="t`Вхід через E-mail`"
+          debounce="300"
+          :rules="[checkEmail]"
+          :error-message="t`Помилковий формат email`"
+          :hint="email ? t`на цю адресу буде надіслано код` : undefined"
+          hide-bottom-space
+          outlined
+          autofocus>
+          <template #prepend>
+            <q-icon name="mail" />
+          </template>
+          <template v-if="email && checkEmail(email) && browserSupportsWebAuthn()" #append>
+            <q-btn @click="biometry(email)" padding="none" flat icon="fingerprint" />
+          </template>
+        </q-input>
+        <q-btn
+          v-if="email && checkEmail(email)"
+          @click="emailSubmit"
+          :label="t`Отримати код`"
+          :loading="emailLoading"
+          class="full-width q-mt-md"
+          padding="md"
+          color="primary" />
+
+        <!-- google логин -->
+        <div v-if="google">
+          <n-cap-login-google v-if="isNative" />
+          <n-login-google v-else :id="google" @authorized="authorized" />
+        </div>
+
+        <!-- apple логин -->
+        <div v-if="apple">
+          <n-cap-login-apple :id="apple" @authorized="authorized" />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script setup>
+import NCapLoginApple from './NCapLoginApple.vue'
+import NLoginGoogle from './NLoginGoogle.vue'
+import NCapLoginGoogle from './NCapLoginGoogle.vue'
+import homeCheck from './njs/home-check.js'
+import NForgotPass from './NForgotPass.vue'
+import { startAuthentication, browserSupportsWebAuthn } from '@simplewebauthn/browser'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { date, Notify } from 'quasar'
+import { Capacitor } from '@capacitor/core'
+import { checkToken } from '@nitra/vite-boot/token'
+import { autoLogin, defaultLogin } from '@nitra/vite-boot/login'
+import tf from '@nitra/tfm'
+
+const router = useRouter()
+
+const props = defineProps({
+  logo: {
+    type: String,
+    default: 'https://cdn.jsdelivr.net/npm/@nitra/auth-components@2/assets/logo.jpeg'
+  },
+  google: {
+    type: String,
+    default: null
+  },
+  // apple signin options
+  apple: {
+    type: String,
+    default: null
+  }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['authorized'])
+// Авто авторизація якщо у користувача є коректний токен
+autoLogin()
+
+const t = tf.bind({ tr: getTr() })
+
+const isNative = ref(Capacitor.isNativePlatform())
+
+// ВХОД ПО EMAIL
+const email = ref(localStorage.getItem('email') || '')
+const emailLowerCased = computed(() => email.value.toLowerCase())
+const emailLoading = ref(false)
+
+// валидный ли адрес
+const checkEmail = email => {
+  if (!email) {
+    return true
+  }
+
+  if (email.length > 320) {
+    return false
+  }
+
+  const regex =
+    /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/
+
+  return regex.test(String(email).toLowerCase().trim())
+}
+
+// получить код
+const emailSubmit = async () => {
+  try {
+    emailLoading.value = true
+
+    const response = await fetch('/auth/otp-email', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        email: emailLowerCased.value,
+        href: globalThis.location.origin + '/code'
+      })
+    })
+    const res = await response.json()
+
+    if (res.error) {
+      loginError.value = JSON.stringify(res.error)
+    } else {
+      localStorage.setItem('email', emailLowerCased.value)
+      localStorage.setItem('email-otp-date', date.addToDate(new Date(), { minutes: 30 }))
+      await router.push('/code')
+    }
+  } catch (error) {
+    loginError.value = error.message
+  } finally {
+    emailLoading.value = false
+  }
+}
+
+// ВХОД ПО ЛОГИНУ/ПАРОЛЮ
+const login = ref(null)
+const password = ref(null)
+const isPwd = ref(true)
+const loginLoading = ref(false)
+const loginError = ref('')
+
+// отправить логин/пароль
+const loginSubmit = async () => {
+  try {
+    loginLoading.value = true
+    loginError.value = ''
+
+    const data = { login: login.value, pass: password.value }
+
+    const response = await fetch('/auth/send-login-pass', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+
+    const res = await response.json()
+
+    if (res.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        await defaultLogin(check.decoded, res.token)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        loginError.value = t`Користувачу ${localStorage.getItem(
+          'email'
+        )} не дозволено входити в дане програмне забезпечення`
+      }
+    } else {
+      if (JSON.stringify(res.error).includes('Incorrect auth')) {
+        loginError.value = t`Помилковий логін або пароль`
+      } else {
+        loginError.value = t`Помилка: ${JSON.stringify(res.error)}`
+      }
+    }
+  } catch (error) {
+    loginError.value = error.message
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+/**
+ *
+ * @param jwt
+ */
+function authorized(jwt) {
+  emit('authorized', jwt)
+}
+
+const biometry = async (user, type = 'email') => {
+  try {
+    // Отримуємо параметри реєстрації (зберігається challenge на сервері)
+    const resp = await fetch('/auth/generate-authentication-options', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        user,
+        type
+      })
+    })
+    const authOptions = await resp.json()
+
+    if (!authOptions.challenge) {
+      Notify.create({
+        type: 'warning',
+        message: t`${t`У користувача "`}${user}" немає зареєстрованих біометричних даних`
+      })
+      return
+    }
+
+    // Pass the options to the authenticator and wait for a response
+    const authResp = await startAuthentication(authOptions)
+
+    // POST the response to the endpoint that calls
+    const verificationResp = await fetch('/auth/verify-authentication', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(authResp)
+    })
+
+    // Wait for the results of verification
+    const res = await verificationResp.json()
+
+    if (res.verified && res.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        await defaultLogin(check.decoded, res.token)
+      } else {
+        loginError.value = t`Користувачу ${user} не дозволено входити в дане програмне забезпечення`
+      }
+    } else {
+      loginError.value = t`Користувачу ${user} не дозволено входити в дане програмне забезпечення`
+    }
+  } catch (error) {
+    Notify.create({ type: 'negative', message: `${error}` })
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'на цю адресу буде надіслано код': { ru: 'на этот адрес будет отправлен код' },
+    'Помилковий формат email': { ru: 'Некорректный формат email' },
+    'Помилковий логін або пароль': { ru: 'Неверный логин или пароль' },
+    'Отримати код': { ru: 'Получить код' },
+    'Помилка: ': { ru: 'Ошибка: ' },
+    АБО: { ru: 'ИЛИ' },
+    Увійти: { ru: 'Войти' },
+    Логін: { ru: 'Логин' },
+    Пароль: { ru: 'Пароль' },
+    'У користувача "': { ru: 'У пользователя "' },
+    '" немає зареєстрованих біометричних даних': { ru: '" нет зарегистрированных биометрических данных' },
+    'Вхід через E-mail': { ru: 'Вход через E-mail' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити в дане програмне забезпечення': { ru: ' не разрешено входить в данное приложение' }
+  }
+}
+</script>

package/auth/NDialog.vue

@@ -0,0 +1,113 @@
+<template>
+  <q-dialog v-model="dialog" @hide="$emit('close')">
+    <q-card :style="'min-width: 330px;' + (wide ? 'max-width: 990px;' : 'max-width:90vw; ')">
+      <!-- Шапка диалога -->
+      <q-card-section :class="'text-white bg-' + color">
+        <div class="row items-center">
+          <q-icon v-if="icon" :name="icon" size="md" class="q-mr-sm" />
+          <div class="col">
+            <div class="text-h6">
+              {{ title }}
+            </div>
+            <div v-if="subtitle" class="text-subtitle1 q-my-xs">
+              {{ subtitle }}
+            </div>
+          </div>
+
+          <!-- закрыть диалог -->
+          <q-btn v-if="noActions" v-close-popup icon="close" color="white" class="q-ml-sm" round flat />
+        </div>
+      </q-card-section>
+
+      <!-- Слот для содержимого -->
+      <q-card-section>
+        <slot />
+      </q-card-section>
+
+      <!-- Дії -->
+      <q-card-section v-if="!noActions" class="row q-pt-none">
+        <!-- підтвердити -->
+        <q-btn @click="$emit('confirm')" :label="button" :color="color" padding="sm md" class="col" />
+        <!-- відмінити -->
+        <q-btn v-close-popup @click="$emit('cancel')" :label="t`Відмінити`" class="col" flat />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import tf from '@nitra/tfm'
+
+const t = tf.bind({ tr: getTr() })
+
+const props = defineProps({
+  // состояние диалога
+  modelValue: {
+    type: Boolean,
+    default: null
+  },
+  // заголовок
+  title: {
+    type: String,
+    default: ''
+  },
+  // подзаголовок
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  // иконка диалога
+  icon: {
+    type: String,
+    default: null
+  },
+  // цвет диалога
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  // название кнопки подтверждения
+  button: {
+    type: String,
+    default: 'Подтвердить'
+  },
+  // название кнопки отмены
+  buttonCancel: {
+    type: String,
+    default: ''
+  },
+  // без кнопок (появится крестик закрытия диалога в шапке)
+  noActions: {
+    type: Boolean,
+    default: false
+  },
+  // широкий вариант
+  wide: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])
+
+// состояние диалога - активен / неактивен
+const dialog = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    Відмінити: { ru: 'Отмена' }
+  }
+}
+</script>

package/auth/NForgotPass.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <q-btn
+      @click="forgotPassword = true"
+      :label="t`Забули пароль?`"
+      color="primary"
+      padding="16px 2px"
+      class="full-width"
+      align="center"
+      no-caps
+      flat />
+
+    <!-- Диалог - подтверждение удаления категории  -->
+    <n-dialog v-model="forgotPassword" @confirm="restorePassword" :title="t`Відновлення паролю`" :button="t`Відновити`">
+      <div v-if="forgotError" class="text-white text-red q-pa-xs text-center" style="background: #f002">
+        {{ forgotError }}
+      </div>
+      <q-input
+        v-model="forgotLogin"
+        :label="t`Ваш телефон або email`"
+        :rules="[val => !!val || t`вкажіть телефон чи email`]"
+        outlined
+        hide-bottom-space />
+    </n-dialog>
+  </div>
+</template>
+
+<script setup>
+import NDialog from './NDialog.vue'
+import { Notify } from 'quasar'
+import { ref } from 'vue'
+import tf from '@nitra/tfm'
+
+const t = tf.bind({ tr: getTr() })
+
+const forgotPassword = ref(false)
+const forgotLogin = ref('')
+const forgotError = ref('')
+
+const restorePassword = async () => {
+  forgotError.value = ''
+  try {
+    const response = await fetch('/auth/forgot-pass', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ login: forgotLogin.value })
+    })
+
+    const res = await response.json()
+
+    if (res.error) {
+      forgotError.value = t`Помилка: ${JSON.stringify(res.error)}`
+      return
+    }
+
+    if (!res.type) {
+      forgotError.value = t`Некоректно вказано email або номер телефону`
+      return
+    }
+
+    if (res.type === 'email') {
+      Notify.create({
+        type: 'positive',
+        message: t`Новий пароль надіслано на email ${forgotLogin.value}`
+      })
+    } else if (res.type === 'phone') {
+      Notify.create({
+        type: 'positive',
+        message: t`Новий пароль надіслано на номер ${forgotLogin.value}`
+      })
+    }
+
+    forgotPassword.value = false
+  } catch (error) {
+    forgotError.value = error
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Забули пароль?': { ru: 'Забыли пароль?' },
+    'Відновлення паролю': { ru: 'Восстановление пароля' },
+    Відновити: { ru: 'Восстановить' },
+    'Ваш телефон або email': { ru: 'Ваш телефон или email' },
+    'вкажіть телефон чи email': { ru: 'укажите телефон или email' },
+    'Помилка: ': { ru: 'Ошибка: ' },
+    'Некоректно вказано email або номер телефону': { ru: 'Некорректно указан email или номер телефона' },
+    'Новий пароль надіслано на email ': { ru: 'Новый пароль отправлен на email ' },
+    'Новий пароль надіслано на номер ': { ru: 'Новый пароль отправлен на номер ' }
+  }
+}
+</script>

package/auth/NLoginGoogle.vue

@@ -0,0 +1,114 @@
+<template>
+  <div v-if="googleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
+    {{ googleError }}
+  </div>
+  <div id="buttonDiv" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { checkToken } from '@nitra/vite-boot/token'
+import tf from '@nitra/tfm'
+import homeCheck from './njs/home-check.js'
+
+const googleError = ref('')
+
+const props = defineProps({
+  id: { type: String, default: null, required: true },
+  verifyOnly: { type: Boolean, default: false }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['verify', 'authorized'])
+
+const t = tf.bind({ tr: getTr() })
+
+let local = 'uk-UA'
+if (import.meta.env.VITE_T || import.meta.env.VITE_TFM === 'ru') {
+  local = 'ru_RU'
+}
+
+// Завантажуємо скрипт Google асинхронно
+const scriptTag = document.createElement('script')
+scriptTag.src = 'https://accounts.google.com/gsi/client'
+scriptTag.async = true
+scriptTag.defer = true
+// Та коли він завантажився ініціалізуємо його
+scriptTag.addEventListener('load', () => {
+  window.google.accounts.id.initialize({
+    client_id: props.id,
+    callback: handleCredentialResponse
+  })
+  // рендеримо кнопку з атрибутами
+  window.google.accounts.id.renderButton(document.querySelector('#buttonDiv'), {
+    theme: 'filled_white',
+    size: 'large',
+    text: 'signin_with',
+    width: '270',
+    locale: local
+  })
+})
+document.head.append(scriptTag)
+
+// Коли відповідь від кнопки прийшла
+/**
+ *
+ * @param credentialResponse
+ */
+async function handleCredentialResponse(credentialResponse) {
+  const credential = credentialResponse.credential
+  googleError.value = ''
+
+  if (!credentialResponse.clientId || !credential) {
+    googleError.value = t`Помилка Google авторизації`
+    return
+  }
+
+  try {
+    const respFromRun = await fetch('/auth/google', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        credential,
+        verifyOnly: props.verifyOnly
+      })
+    })
+
+    const res = await respFromRun.json()
+    if (props.verifyOnly) {
+      emit('verify', res)
+      return
+    }
+
+    if (res?.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        emit('authorized', check.decoded)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        googleError.value = t`Користувачу ${check.userName} не дозволено входити`
+      }
+    } else {
+      googleError.value = t`Помилка Google авторизації`
+    }
+  } catch (error) {
+    googleError.value = error
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Помилка Google авторизації': { ru: 'Ошибка авторизации Google' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити': { ru: ' не разрешен вход' }
+  }
+}
+</script>

package/auth/index.js

@@ -0,0 +1,6 @@
+export { default as NCapLoginApple } from './NCapLoginApple.vue'
+export { default as NCapLoginGoogle } from './NCapLoginGoogle.vue'
+export { default as NCapLoginMulti } from './NCapLoginMulti.vue'
+export { default as NDialog } from './NDialog.vue'
+export { default as NForgotPass } from './NForgotPass.vue'
+export { default as NLoginGoogle } from './NLoginGoogle.vue'

package/auth/njs/home-check.js

@@ -0,0 +1,23 @@
+import jwtDecode from '@nitra/jwt-decode'
+
+/**
+ *
+ * @param jwtOrig
+ */
+export default function (jwtOrig) {
+  const jwt = jwtDecode(jwtOrig)
+
+  // Якщо не дозволено жодної ролі, то не йдемо далі
+  if (jwt['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'].length === 0) {
+    return
+  }
+
+  // Якщо користувачу дозволено тільки home, то редиректимо на home
+  if (
+    jwt['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'].length === 1 &&
+    jwt['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'][0] === 'home-user'
+  ) {
+    const domain = import.meta.env.VITE_DOMAIN || '.nitra.ai'
+    globalThis.location.href = `https://home${domain}/profile`
+  }
+}

package/index.js

@@ -1,2 +1,3 @@
 export * from './app-update'
 export * from './save-token'
+export * from './auth'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitra/cap",
-  "version": "7.0.0",
+  "version": "7.1.1",
   "description": "Nitra capacitor components",
   "type": "module",
   "exports": {
@@ -20,10 +20,15 @@
   },
   "homepage": "https://github.com/nitra/cap",
   "dependencies": {
-    "@capacitor-firebase/messaging": "^7.0.0",
-    "@capacitor/core": "^7.0.1",
-    "@capawesome/capacitor-app-update": "^7.0.0",
-    "@firebase/app": "^0.10.18",
-    "firebase": "^11.2.0"
+    "@capacitor-community/apple-sign-in": "^7.0.1",
+    "@capacitor-firebase/messaging": "^7.3.1",
+    "@capacitor/core": "^7.4.3",
+    "@capawesome/capacitor-app-update": "^7.0.1",
+    "@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.4",
+    "@firebase/app": "^0.14.3",
+    "@nitra/tfm": "^2.4.0",
+    "@nitra/vite-boot": "^3.7.1",
+    "@simplewebauthn/browser": "^11.0.0",
+    "firebase": "^12.3.0"
   }
 }