Add Google Login Button to Authentication UI (Frontend Only)

[Villarley]

🧩 Issue: Add Google Login Button to Authentication UI (Frontend Only)

Description

Implement the UI and integration setup for Google Login using the @react-oauth/google package. This task sets up the button, token handling, and mutation scaffold so that the frontend is ready once the backend endpoint is connected.

---

Steps to Follow

1. Install the Google OAuth SDK

npm install @react-oauth/google

2. Add GoogleOAuthProvider Globally

In src/app/providers.tsx or the global layout component, wrap the app:

import { GoogleOAuthProvider } from "@react-oauth/google";

<GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!}>
  {children}
</GoogleOAuthProvider>

✅ Add your Google client ID to .env.local as:

NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-client-id-here

3. Create Google Login Button Component

File: src/features/auth/components/GoogleLoginButton.tsx

"use client";

import { GoogleLogin } from "@react-oauth/google";
import { useMutation } from "@tanstack/react-query";
import { showError, showSuccess } from "@/shared/utils/toast";
import { useAuthStore } from "@/store/authStore";

export const GoogleLoginButton = () => {
  const login = useAuthStore((state) => state.login);

  const mutation = useMutation({
    mutationFn: async ({ id_token }: { id_token: string }) => {
      // TEMP placeholder – connect to backend when ready
      console.log("Received Google token:", id_token);
      return { token: "mock-token" };
    },
    onSuccess: ({ token }) => {
      login(token);
      showSuccess("Google login successful");
    },
    onError: () => {
      showError("Google login failed");
    },
  });

  return (
    <GoogleLogin
      onSuccess={(credentialResponse) => {
        if (credentialResponse.credential) {
          mutation.mutate({ id_token: credentialResponse.credential });
        }
      }}
      onError={() => showError("Google login was cancelled or failed")}
    />
  );
};

4. Add Button to Login Screen

In your src/app/auth/login/page.tsx, import and place the button:

import { GoogleLoginButton } from "@/features/auth/components/GoogleLoginButton";

<CardContent>
  <GoogleLoginButton />
  {/* ...other login buttons */}
</CardContent>

Acceptance Criteria

• Google login button renders on the login screen.

• On click, token is logged to the console.

• Toast messages (success/fail) appear using sonner.

• Mutation setup is ready to plug into backend.

[motuncoded]

Hello, I am a Frontend Developer. Can I work on this ?

[Lizzy223]

I would love to work on this issue, i am a frontend developer and a contributor. This should take me maximum of 5 hours to implement

[Ayoazeez26]

I would love to work on this issue, I will follow all instructions and make sure the UI looks as expected before making a PR.

ETA - < 1day

[sammajayi]

HI there, I am. a frontend developer.. I will like to work on this issue

[Marvelousmicheal]

Hello ,

I’d love to contribute to your project by implementing the Google Login UI using the react-google-login package.

About Me:
I’m a frontend developer with 2.5 years of experience and recently selected for the OnlyDust fellowship. This task is a great opportunity to learn and contribute.

Scope:

Integrate the Google Login button in the UI.

Ensure it's ready for backend integration.

Provide clear documentation.

I’m confident I can get this done efficiently.

[rajanarahul93]

Hi, I’d like to work on this. I’ve implemented Google OAuth before using @react-oauth/google, and I’m comfortable setting up the provider, button component, and mutation flow with React Query. I’ll follow the given steps exactly, add token logging, toast notifications, and ensure the UI is clean and ready for backend integration. I can complete this quickly and with clarity.

Recommended by OnlyDust for outstanding experience and quality contributions.

[gidson5]

Hy,I can work on this one.ETA 24hours.

[JosueBrenes]

Hii, can i work this issue? Please

[clintjeff2]

Hello @Villarley,

I'm Jefferson Youashi, a full-stack developer well-versed in Next.js, React, TypeScript, TailwindCSS, Zustand, and React Query—the same stack powering this project. Having previously contributed to this codebase, I'm already familiar with its architecture and component conventions, which will ensure a fast, seamless integration of the Google login feature.

For this task, I will install @react-oauth/google, configure the global GoogleOAuthProvider using NEXT_PUBLIC_GOOGLE_CLIENT_ID, and create the GoogleLoginButton component using the provided scaffold. I’ll ensure the token is logged correctly and toast feedback is shown using Sonner. The component will be properly imported into the login page and scoped for clean UI integration. I’ll also validate that the mutation setup is backend-ready, and the auth store integration is solid. Husky, Prettier, and ESLint will ensure code quality before commit.

Estimated completion time: 10 hours
Telegram: @JeffersonYouashi

[AnkurSi18228]

Hello,
I’d be happy to take on the implementation of the Google Login button. OAuth integration is an essential part of modern authentication flows, and I’m excited to help make this process smooth and production-ready. I’ll ensure the UI is properly integrated using the @react-oauth/google package, set up token handling through a mutation scaffold, and display clear feedback using toast notifications. Looking forward to getting started and setting this up cleanly for backend integration!

[Verifieddanny]

I believe I have the necessary skills and experience to get this done within a day

Recommended by OnlyDust for exceptional experience, quality, and reliability.