google-login-vue3

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
📧 [e-mail]
🔗 GitHub