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.