Google Login OAuth Error:401 in React Frontend

Dhivya M — Thu, 05 Sep 2024 03:06:25 +0000
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cflrqbnar8aef26t7lv3.png)Login.jsx
import{ useState } from "react";
import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";
import { FaFacebook, FaLinkedin } from "react-icons/fa";
import { Link, useNavigate } from "react-router-dom";
import { facebookLogin, linkedinLogin } from "../../utils/api";
import logo from "../../assets/logo.png"; // Ensure the correct path to your logo

const clientId = "xxxx"; // Replace with your actual Google client ID

const Login = () => {
  const [error, setError] = useState("");
  const navigate = useNavigate();

  const handleGoogleSuccess = async (credentialResponse) => {
    try {
      const token = credentialResponse.credential;

      // Fetch user profile info from Google
      //const userInfoResponse = await fetch(`https://www.googleapis.com/oauth2/v3/userinfo?access_token=${token}`, {
      const userInfoResponse = await fetch(`https://www.googleapis.com/oauth2/v3/userinfo?token=${token}`);
      if (!userInfoResponse.ok) {
        throw new Error(`Failed to fetch user info: ${userInfoResponse.statusText}`);
      }
      const userInfo = await userInfoResponse.json();
      console.log("User info:", userInfo);

      // Send user info to the backend
      const response = await fetch("http://localhost:3000/auth/gxxxxx", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          firstName: userInfo.given_name || "",
          lastName: userInfo.family_name || "",
          email: userInfo.email || "",
        }),
      });

      if (!response.ok) {
        throw new Error(`Backend responded with status: ${response.status}`);
      }

      const data = await response.json();
      console.log("Backend response:", data);

      if (data.token) {
        localStorage.setItem("token", data.token);
        navigate("/");
      } else {
        setError(data.message || "Google login failed");
      }
    } catch (err) {
      setError(err.message || "An error occurred during Google login");
    }
  };

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

  return (
<GoogleOAuthProvider clientId={clientId}>
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-md p-8 bg-white rounded shadow">
<img src={logo} alt="Logo" className="w-24 mx-auto mb-6" />
<h2 className="mb-4 text-2xl text-center">Login</h2>
<div className="mb-4">
<GoogleLogin
              onSuccess={handleGoogleSuccess}
              onError={handleGoogleFailure}
            />
</div>
          {error && <p className="mb-4 text-sm text-red-500">{error}</p>}
<div className="mt-6">
<button
              onClick={facebookLogin}
              className="flex items-center justify-center w-full p-2 mb-2 text-white bg-blue-700 rounded hover:bg-blue-800"
>
<FaFacebook className="mr-2" /> Sign in with Facebook
</button>
<button
              onClick={linkedinLogin}
              className="flex items-center justify-center w-full p-2 text-white bg-blue-600 rounded hover:bg-blue-700"
>
<FaLinkedin className="mr-2" /> Sign in with LinkedIn
</button>
</div>
<div className="mt-4 text-center">
<a
              href="/forgot-password"
              className="text-blue-500 hover:underline"
>
              Forgot Password?
</a>
</div>
<div className="mt-4 text-center">
<span>Dont have an account? </span>
<Link to="/register" className="text-blue-500 hover:underline">
              Create one
</Link>
</div>
</div>
</div>
</GoogleOAuthProvider>
  );
};

export default Login;
Hello Team,
Front End: React.js. Google OAuth Login
Backend: Express API Endpoint
Any Suggestion or feedback welcome. Thanks in advance.
Forem: Dhivya M

Google Login OAuth Error:401 in React Frontend
