Vue 3 Google Login Component

A lightweight and customizable Vue 3 component for Google OAuth 2.0 authentication supporting both JWT-based and Authorization Code-based flows.

🏠 Installation

npm install google-login-vue3

🚀 Usage

Import the component:

<template>
  <GoogleLogin
    :clientId="YOUR_GOOGLE_CLIENT_ID"
    mode="JWT"
    :oneTapLogin="true"
    @success="handleSuccess"
    @error="handleError"
  />
  <!-- Optional: mode="JWT" (default) or "code" -->
  <!-- Optional: Enables Google One Tap (:oneTapLogin="true") in JWT mode -->
</template>

<script setup>
import GoogleLogin from "google-login-vue3";

const handleSuccess = (response) => {
  console.log("Success response:", response);
  if (response.credential) {
    console.log("JWT Token:", response.credential);
    // Send the token to your backend for verification
  } else if (response.code) {
    console.log("Authorization Code:", response.code);
    // Send the code to your backend for access token exchange
  }
};

const handleError = (error) => {
  console.error("Google login error:", error);
};
</script>

Replace YOUR_GOOGLE_CLIENT_ID with your actual client ID from Google Developer Console.

🔐 Authentication Modes

1. JWT-Based Authentication (ID Token Flow) [Default]

• Google returns a JWT (ID Token) to the frontend.
• No backend interaction is required (unless token validation is needed).
• Ideal for apps using the ID token directly to verify identity.
• One Tap Login is supported via the oneTapLogin prop.
• Uses the native Google Sign-In button.

2. Code-Based Authentication (Authorization Code Flow)

• Returns an Authorization Code to the frontend.
• You must send this code to your backend to exchange for access/refresh tokens.
• Best suited for secure OAuth flows requiring backend token handling.
• Custom UI can be used via the default slot.

⚙️ Props

| Prop | Type | Default | Description | | ------------- | ------- | ------- | ---------------------------------------------------------- | | clientId | String | — | Required. Your Google OAuth 2.0 client ID. | | mode | String | "JWT" | "JWT" or "code" depending on the flow you want to use. | | oneTapLogin | Boolean | true | Enables Google One Tap login (only valid in JWT mode). |

🤩 Customization

• In code mode, you can customize the login button using the default slot.

Example:

<GoogleLogin mode="code" :clientId="clientId">
  <template #default>
    <button class="my-custom-btn">Sign in with Google</button>
  </template>
</GoogleLogin>

🔄 Backend Integration (For mode="code")

• Use the authorization code to exchange tokens securely from your backend.
• Recommended libraries:
  • Node.js: google-auth-library
  • Python: google-auth
• Follow Google's OAuth 2.0 for Web Server Applications documentation.

⚠️ Notes

• Configure JavaScript Origins and Redirect URIs in your Google Cloud Console.
• For One Tap login, ensure the domain is verified.
• Pop-up blockers can prevent login. Notify users if login fails due to browser settings.
• Always handle success and error events properly.

🤝 Contributing

Contributions are welcome! Feel free to:

• Open issues for bugs or feature requests.
• Submit PRs to improve the codebase or docs.

📝 License

MIT

👨‍💼 Author

Shiv Baran Singh
📧 [email protected]
🔗 GitHub