🔐 Adding Google Popup Sign-In to Nuxt 3 (Continuing the Auth Flow)

In the previous article, we integrated Google One Tap Login into a Nuxt 3 application using nuxt-vue3-google-signin and @trandaison/nuxt-3-auth. Now, we’re continuing our authentication journey by adding Google Popup Login — the traditional OAuth flow where users choose their Google account via a modal popup.

📌 If you haven’t set up the required library yet, check the setup steps in the previous article.

🧩 What We Added in This Step

In this commit, I:

• Added a login button on the home page (pages/index.vue)
• Used useTokenClient() from vue3-google-signin to launch the Auth Code Flow
• Handled success and error callbacks
• Used @trandaison/nuxt-3-auth to persist the user after login

🧪 Code Overview

📄 pages/index.vue

<template>
  <section>
    <button
      :disabled="!isReady"
      :loading="!isReady"
      @click="() => loginGoogle()"
    >
      <span> google auth </span>
    </button>
  </section>
</template>

This renders a simple login button that becomes active when the token client is ready.

⚙️ Script Setup Logic

const { isReady, login: loginGoogle } = useTokenClient({
  onSuccess: handleOnSuccess,
  onError: handleOnError,
})

The useTokenClient composable initiates the Google OAuth Code Flow, where the user selects their account in a popup.

✅ Handling the Response

const handleOnSuccess = async (response) => {
  const res = await $api("/api/auth/google", {
    method: "POST",
    body: response,
  })

  auth.storage.setAuth({
    token: res.access_token,
    refresh_token: res.refresh_token,
  })
  auth.storage.setPersistent(true)
  await auth.fetchUser()
  navigateTo("/private")
}

Once Google returns a successful response:

1. The response is sent to the backend (/api/auth/google)
2. The backend verifies the token and responds with access_token, refresh_token, and user data
3. Tokens are stored using @trandaison/nuxt-3-auth (auth.storage.setAuth(...))
4. The user is redirected to the protected area /private

🧪 Testing the Flow

1. Make sure your OAuth credentials in Google Cloud Console include:

• Authorized JavaScript origins (e.g. http://localhost:3000 or your ngrok domain)
• Authorized redirect URIs (even though popup mode doesn’t use redirection directly)

1. Use ngrok for local HTTPS testing:

• bash
• ngrok http 3000

1. Then use the ngrok URL in Google Cloud Console settings and .env.

📂 Source Code

🔗 View the exact commit:
https://github.com/yevheniimoskalenko/nuxt-3-auth/commit/0db9c7b69aa036d9236572d42bc9750f500d8c69

Get Eugene Moskalenko’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

📁 Full project on GitHub:
https://github.com/yevheniimoskalenko/nuxt-3-auth

🙌 Follow me on GitHub to stay updated:
github.com/yevheniimoskalenko

🔜 Stay tuned! Next, we’ll explore handling logout, token refreshing, and protecting pages using Nuxt middleware.