SSR Issues with api-loading class

[LeCoupa]

It looks like the api-loading class is added on the GoogleLogin button on client-side when we reload the page. This prevent to click on the button. I am using 2.0.20.

🎥 Here is a video to show you.

👨‍💻 Code of the component

<!-- --------------------------------------------------
     SCRIPT
     -------------------------------------------------- -->

<script lang="ts" setup>
// Imports
import { GoogleLogin } from 'vue3-google-login'
import type { CallbackTypes } from 'vue3-google-login'

// Props
defineProps({
  fullWidth: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String as PropType<BaseButtonSize>,
    default: 'base',
  },
})

// Events
const emit = defineEmits<{
  'authenticated': []
}>()

// State
const authenticating = ref(false)

// Composables
const { createEvent } = useAnalytics()
const { createToast } = useToasts()
const { locale, t } = useI18n()
const appConfig = useAppConfig()
const authStore = useAuthStore()
const route = useRoute()

// Listeners
function onClick() {
  authenticating.value = true
}

async function onAuthenticating(response: CallbackTypes.CodePopupResponse) {
  try {
    const { isNew, user } = await authStore.loginWithGoogle({
      code: response.code,
      invitationToken: (route.query?.invitationToken || '') as string,
      locale: locale.value as 'en' | 'fr',
    })

    createToast(`authWelcome${user.firstName ? 'FirstName' : ''}`, 'success', { firstName: user.firstName || '' })
    createEvent(`[Auth] ${isNew ? 'Register' : 'Login'}`, { Platform: 'google' })
    emit('authenticated')
  }
  catch (error) {
    console.error(error)
  }

  authenticating.value = false
}
</script>

<!-- --------------------------------------------------
     TEMPLATE
     -------------------------------------------------- -->

<template>
  <GoogleLogin
    :callback="onAuthenticating"
    :client-id="appConfig.services.googleAuth.clientId"
    class="w-full"
  >
    <BaseButton
      :full-width="fullWidth"
      :loading="authenticating"
      :size="size"
      :text="t('continue')"
      class="auth-google-connect"
      color="white"
      @click="onClick"
    >
      <img
        :alt="t('alt')"
        :class="{
          // --> MARGINS <--

          'mr-1.25': ['2xs', 'xs'].includes(size),
          'mr-2': ['sm', 'base'].includes(size),
          'mr-2.5': ['lg', 'xl'].includes(size),

          // --> SIZES <--

          'h-3 w-3': size === '2xs',
          'h-3.5 w-3.5': size === 'xs',
          'h-4 w-4': size === 'sm',
          'h-4.5 w-4.5': size === 'base',
          'h-5 w-5': size === 'lg',
          'h-6 w-6': size === 'xl',
        }"
        src="/images/auth/AuthGoogleConnect/google.svg"
      >
    </BaseButton>
  </GoogleLogin>
</template>
</i18n>

PS: Thanks a lot for your package, it's very complete and the one-page doc is very nice to read!

[devbaji]

@LeCoupa Love to hear that the package was helpful for you. The issue you mentioned looks strange, the class api-loading was supposed to be remove once the library is loaded (https://accounts.google.com/gsi/client). Can you check if there is any console errors? Its working fine on my apps.

[Monster0313]

Hello @devbaji , I've encountered the same issue as @LeCoupa , and I'm using it in the way shown in the code below, without introducing any other packages. I'm using version 2.0.20 and developing with Nuxt 3. There are no errors displayed in the console, and the button works fine as long as I remove the .api-loading class.

<template>
  <div class="w-full h-[50vh] flex justify-center items-end">
    <v-card title="login system" width="400">
      <div class="m-4">
        <GoogleLogin
          :client-id="'<client id>'"
          :callback="handleGoogleResponse"
        />
      </div>
    </v-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { GoogleLogin } from 'vue3-google-login'

export default defineComponent({
  components: {
    GoogleLogin
  },
  setup() {
    const handleGoogleResponse = (response: any) => {
      if (response) {
        console.log(response)
      }
    }
    return {
      handleGoogleResponse
    }
  }
})

[devbaji]

@Monster0313 @LeCoupa Removing this 'api-loading' class from version 2.0.21 onwards. Please update the plugin to latest one.

[LeCoupa]

@devbaji thank you it's working. I am closing the issue. How can we sponsor you?

[devbaji]

@LeCoupa Since you asked I just added donate buttons on the doc page.
Buy Me A Coffee
PayPal