react-oauth/google using GoogleOauthProvide but still getting "Missing required parameter client_id."

39 Views Asked by At

I am trying to implement google oauth to my react app but I keep getting "Missing required parameter client_id." no matter what I try.

Here is my index.js code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { GoogleOAuthProvider } from "@react-oauth/google";
import {BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </GoogleOAuthProvider>
  </React.StrictMode>
);

And here is my implementation of the button:

import React from "react";
import { useNavigate } from "react-router";
import Cookies from "universal-cookie";
import { useGoogleLogin } from "@react-oauth/google";
import google from "../../../assets/google.svg";
import SignUpButton from "../../../components/SignUpButton/SignUpButton";



const GoogleAuth = () => {
  const googleLogin = useGoogleLogin({
    flow: 'auth-code',
    onSuccess: async (codeResponse) => {
      console.log(codeResponse);
      const response = await fetch('http://localhost:3001/auth/google', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          code: codeResponse.code
        })
      });
      const tokens = await response.json();
      console.log(tokens);
    },
    onError: errorResponse => console.log(errorResponse),
  });


  return (
    <SignUpButton
      text="Sign up with Google"
      image={google}
      bgColor="bg-gray-800"
      onClick={() => googleLogin}
    />
  );

};

export default GoogleAuth;
  • I have the correct Google client ID in my environment.

  • I have tried pasting in my client ID directly instead of using the environment variable.

  • My Google console is correctly configured to work on localhost

EDIT: It seems like GoogleAuthProvider was used incorrectly in other parts of my project. Removing those fixed the issue.

0

There are 0 best solutions below