@saasmakers/ui 2.0.1 → 2.0.4

package/app/components/auth/AuthSocialConnect.vue

@@ -0,0 +1,234 @@
+<script lang="ts" setup>
+import { SocialLogin } from '@capgo/capacitor-social-login'
+
+const props = withDefaults(defineProps<AuthSocialConnect>(), {
+  loading: false,
+  provider: 'apple',
+  size: 'base',
+})
+
+const emit = defineEmits<{
+  error: [error: unknown]
+  success: [payload: AuthSocialConnectSuccess]
+}>()
+
+const { t } = useI18n()
+const { isAndroid, platform } = useCapacitor()
+const oauthAuthenticating = ref(false)
+
+const buttonLoading = computed(() => {
+  return oauthAuthenticating.value || props.loading
+})
+
+onMounted(() => {
+  if (props.provider === 'google') {
+    window.addEventListener('message', processGoogleCallback)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (props.provider === 'google') {
+    window.removeEventListener('message', processGoogleCallback)
+  }
+})
+
+async function onStartAuthentication() {
+  oauthAuthenticating.value = true
+
+  try {
+    if (props.provider === 'apple') {
+      if (!props.appleConfig) {
+        throw new Error('appleConfig is required when provider is apple')
+      }
+
+      const platformKey = platform.value === 'ios' ? 'ios' : 'web'
+
+      await SocialLogin.initialize({
+        apple: {
+          clientId: props.appleConfig[platformKey].appId,
+          redirectUrl: props.appleConfig[platformKey].redirectUrl,
+        },
+      })
+
+      const { result } = await SocialLogin.login({
+        options: { scopes: ['email', 'name'] },
+        provider: 'apple',
+      })
+
+      emit('success', {
+        firstName: `${result.profile.givenName}`,
+        idToken: result.idToken!,
+        lastName: `${result.profile.familyName}`,
+        provider: 'apple',
+      })
+    }
+    else if (props.provider === 'google') {
+      if (!props.googleConfig) {
+        throw new Error('googleConfig is required when provider is google')
+      }
+
+      await SocialLogin.initialize({
+        google: {
+          iOSClientId: props.googleConfig.ios.clientId,
+          redirectUrl: props.googleConfig.web.redirectUrl,
+          webClientId: props.googleConfig.web.clientId,
+        },
+      })
+
+      const response = await SocialLogin.login({
+        options: { scopes: ['email', 'profile'] },
+        provider: 'google',
+      })
+
+      const { idToken } = response.result as GoogleLoginResponseOnline
+
+      emit('success', {
+        idToken: idToken!,
+        provider: 'google',
+      })
+    }
+  }
+  catch (error) {
+    emit('error', error)
+
+    console.error(error)
+  }
+  finally {
+    oauthAuthenticating.value = false
+  }
+}
+
+function processGoogleCallback(event: MessageEvent) {
+  if (event.origin !== globalThis.location.origin) {
+    return
+  }
+
+  if (event.data.type === 'auth:google:success') {
+    try {
+      oauthAuthenticating.value = true
+
+      emit('success', {
+        idToken: event.data.idToken,
+        provider: 'google',
+      })
+    }
+    catch (error) {
+      emit('error', error)
+
+      console.error(error)
+    }
+    finally {
+      oauthAuthenticating.value = false
+    }
+  }
+}
+</script>
+
+<template>
+  <BaseButton
+    :class="{ hidden: isAndroid && provider === 'apple' }"
+    :color="provider === 'apple' ? 'black' : 'white'"
+    full-width
+    :loading="buttonLoading"
+    :size="size"
+    :text="provider === 'apple' ? t('continueWithApple') : t('continueWithGoogle')"
+    @click="onStartAuthentication"
+  >
+    <img
+      v-if="provider === 'apple'"
+      :alt="t('appleLogo')"
+      class="mr-2.5 w-4.5 dark:invert"
+      src="/images/auth/AppleConnect/apple.svg"
+    >
+
+    <img
+      v-else-if="provider === 'google'"
+      :alt="t('googleLogo')"
+      class="mr-2.5 w-5"
+      src="/images/auth/GoogleConnect/google.svg"
+    >
+  </BaseButton>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "appleLogo": "Apple-Logo",
+    "continueWithApple": "Mit Apple fortfahren",
+    "continueWithGoogle": "Mit Google fortfahren",
+    "googleLogo": "Google-Logo"
+  },
+  "en": {
+    "appleLogo": "Apple logo",
+    "continueWithApple": "Continue with Apple",
+    "continueWithGoogle": "Continue with Google",
+    "googleLogo": "Google logo"
+  },
+  "es": {
+    "appleLogo": "Logo de Apple",
+    "continueWithApple": "Continuar con Apple",
+    "continueWithGoogle": "Continuar con Google",
+    "googleLogo": "Logo de Google"
+  },
+  "fr": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Continuer avec Apple",
+    "continueWithGoogle": "Continuer avec Google",
+    "googleLogo": "Logo Google"
+  },
+  "id": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Lanjutkan dengan Apple",
+    "continueWithGoogle": "Lanjutkan dengan Google",
+    "googleLogo": "Logo Google"
+  },
+  "it": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Continua con Apple",
+    "continueWithGoogle": "Continua con Google",
+    "googleLogo": "Logo Google"
+  },
+  "ja": {
+    "appleLogo": "Appleロゴ",
+    "continueWithApple": "Appleで続ける",
+    "continueWithGoogle": "Googleで続ける",
+    "googleLogo": "Googleロゴ"
+  },
+  "ko": {
+    "appleLogo": "Apple 로고",
+    "continueWithApple": "Apple로 계속하기",
+    "continueWithGoogle": "Google로 계속하기",
+    "googleLogo": "Google 로고"
+  },
+  "nl": {
+    "appleLogo": "Apple-logo",
+    "continueWithApple": "Doorgaan met Apple",
+    "continueWithGoogle": "Doorgaan met Google",
+    "googleLogo": "Google-logo"
+  },
+  "pl": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Kontynuuj z Apple",
+    "continueWithGoogle": "Kontynuuj z Google",
+    "googleLogo": "Logo Google"
+  },
+  "pt": {
+    "appleLogo": "Logótipo da Apple",
+    "continueWithApple": "Continuar com Apple",
+    "continueWithGoogle": "Continuar com Google",
+    "googleLogo": "Logótipo do Google"
+  },
+  "pt-BR": {
+    "appleLogo": "Logo da Apple",
+    "continueWithApple": "Continuar com Apple",
+    "continueWithGoogle": "Continuar com Google",
+    "googleLogo": "Logo do Google"
+  },
+  "vi": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Tiếp tục với Apple",
+    "continueWithGoogle": "Tiếp tục với Google",
+    "googleLogo": "Logo Google"
+  }
+}
+</i18n>

package/app/composables/useCapacitor.ts

@@ -0,0 +1,47 @@
+import { Capacitor } from '@capacitor/core'
+
+export default function useCapacitor() {
+  const platform = ref(Capacitor.getPlatform() as Platforms)
+
+  const isAndroid = computed(() => {
+    return platform.value === 'android'
+  })
+
+  const isIOS = computed(() => {
+    return platform.value === 'ios'
+  })
+
+  const isNative = computed(() => {
+    return Capacitor.isNativePlatform()
+  })
+
+  const isWeb = computed(() => {
+    return platform.value === 'web'
+  })
+
+  const getPlatform = () => {
+    if (isAndroid.value) {
+      return 'android'
+    }
+    else if (isIOS.value) {
+      return 'ios'
+    }
+    else {
+      return 'web'
+    }
+  }
+
+  const isPluginAvailable = (pluginName: string) => {
+    return Capacitor.isPluginAvailable(pluginName)
+  }
+
+  return {
+    getPlatform,
+    isAndroid,
+    isIOS,
+    isNative,
+    isPluginAvailable,
+    isWeb,
+    platform,
+  }
+}

package/app/types/auth.d.ts

@@ -0,0 +1,42 @@
+export interface AuthSocialConnect {
+  appleConfig?: AuthSocialConnectAppleConfig
+  googleConfig?: AuthSocialConnectGoogleConfig
+  loading?: boolean
+  provider: AuthSocialConnectProvider
+  size?: BaseButtonSize
+}
+
+export interface AuthSocialConnectAppleConfig {
+  ios: {
+    appId: string
+    redirectUrl: string
+  }
+  web: {
+    appId: string
+    redirectUrl: string
+  }
+}
+
+export interface AuthSocialConnectGoogleConfig {
+  ios: {
+    clientId: string
+  }
+  web: {
+    clientId: string
+    redirectUrl: string
+  }
+}
+
+export type AuthSocialConnectProvider = 'apple' | 'google'
+
+export type AuthSocialConnectSuccess
+  = | {
+    firstName?: string
+    idToken: string
+    lastName?: string
+    provider: 'apple'
+  }
+  | {
+    idToken: string
+    provider: 'google'
+  }

package/app/types/global.d.ts

@@ -1,6 +1,13 @@
 import type { Directive } from 'vue'
 
 declare global {
+  // Auth
+  type AuthSocialConnect = import('./auth').AuthSocialConnect
+  type AuthSocialConnectAppleConfig = import('./auth').AuthSocialConnectAppleConfig
+  type AuthSocialConnectGoogleConfig = import('./auth').AuthSocialConnectGoogleConfig
+  type AuthSocialConnectProvider = import('./auth').AuthSocialConnectProvider
+  type AuthSocialConnectSuccess = import('./auth').AuthSocialConnectSuccess
+
   // Bases
   type BaseAlert = import('./bases').BaseAlert
   type BaseAlignment = import('./bases').BaseAlignment
@@ -67,6 +74,8 @@ declare global {
   type ChartistLineChartData = import('chartist').LineChartData
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
+  type GoogleLoginResponseOnline = import('@capgo/capacitor-social-login').GoogleLoginResponseOnline
+  type Platforms = import('@saasmakers/shared').Platforms
 
   // Fields
   type FieldAvatar = import('./fields').FieldAvatar

package/nuxt.config.ts

@@ -28,6 +28,10 @@ export default defineNuxtConfig({
   ],
 
   components: [
+    {
+      path: 'components/auth',
+      pathPrefix: false,
+    },
     {
       path: 'components/bases',
       pathPrefix: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -21,7 +21,9 @@
     "uno.config.ts"
   ],
   "dependencies": {
+    "@capacitor/core": "8.4.0",
     "@capacitor/preferences": "8.0.1",
+    "@capgo/capacitor-social-login": "8.3.22",
     "@nuxt/icon": "2.2.3",
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "3.5.2",

package/public/images/auth/AppleConnect/apple.svg

@@ -0,0 +1,3 @@
+<svg width="842" height="1e3" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFFFFF" d="M702 960c-54.2 52.6-114 44.4-171 19.6-60.6-25.3-116-26.9-180 0-79.7 34.4-122 24.4-170-19.6-271-279-231-704 77-720 74.7 4 127 41.3 171 44.4 65.4-13.3 128-51.4 198-46.4 84.1 6.8 147 40 189 99.7-173 104-132 332 26.9 396-31.8 83.5-72.6 166-141 227zM423 237C414.9 113 515.4 11 631 1c15.9 143-130 250-208 236z"/>
+</svg>

package/public/images/auth/GoogleConnect/google.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="47px" height="48px" viewBox="0 0 47 48" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+  <title>Google_color</title>
+  <desc>Created with Sketch.</desc>
+  <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Color-" transform="translate(-401.000000, -860.000000)">
+      <g id="Google" transform="translate(401.000000, 860.000000)">
+        <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05"></path>
+        <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EA4335"></path>
+        <path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853"></path>
+        <path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4"></path>
+      </g>
+    </g>
+  </g>
+</svg>