Add Google Login Button to Authentication UI (Frontend Only) #111
Description
🧩 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/google2. 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.