src/pages/GoogleLoginPage.js

import React, { useState } from "react";
import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
import axios from "axios";
import { useNavigate } from "react-router-dom";


const FLASK_API_URL = process.env.REACT_APP_FLASK_API_URL;
const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
console.log(`FLASK_API_URL: ${process.env.REACT_APP_FLASK_API_URL}`);

const GoogleLoginPage = ({ setUser }) => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleLoginSuccess = (credentialResponse) => {
    const { credential } = credentialResponse;
    setLoading(true);

    // Send the ID token to the backend
    axios
      .post(`$(FLASK_API_URL)/auth/google`, { id_token: credential })
      .then((res) => {
        setLoading(false);
        const userData = res.data;
        setUser(userData);
        localStorage.setItem("user", JSON.stringify(userData));
        navigate("/");
      })
      .catch((err) => {
        setLoading(false);
        console.error("Login failed:", err);
        alert("Login failed. Please try again.");
      });
  };

  const handleLoginFailure = () => {
    alert("Google login failed. Please try again.");
  };

  return (
    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
      <div
        style={{
          height: "100vh",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#1e1e1e",
          color: "#f5f5f5",
          flexDirection: "column",
        }}
      >
        <h1>Login to Chat with Llama3.2:3b</h1>
        {loading ? (
          <p>Loading...</p>
        ) : (
          <GoogleLogin
            onSuccess={handleLoginSuccess}
            onError={handleLoginFailure}
            useOneTap
          />
        )}
      </div>
    </GoogleOAuthProvider>
  );
};

export default GoogleLoginPage;