Issue with connecting GoogleOauth and React

215 views Asked by At

So I'm using react-google-login, (and idk if it helps, but following a social media app course by javascript mastery), to build an app that uses Google Oauth.

Here's the GoogleLogin snippet of the code-

<GoogleLogin
  clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
  render={(renderProps) => (
    <button
      type="button"
      className="bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none"
      onClick={renderProps.onClick}
      disabled={renderProps.disabled}
    >
      <FcGoogle className="mr-4" /> Sign in with google
    </button>
  )}
  onSuccess={responseGoogle}
  onFailure={responseGoogle}
  onError={responseGoogle}
  cookiePolicy={'single_host_origin'}
/>

The response Google function is a simple one that does console.log(response). There are a couple of errors that pop up. The first error occurs even before the login button is clicked. The Remaining COOP errors show up when the login window is open, but the google login still appears and you are able to log in / choose users. The last error shows up when you continue logging in and choose the user in the pop-up window. The pop-up automatically closes but shows that the user had closed it for some reason.

Console Log

For context, the React end is not showing any error, and shows that the webpack was compiled successfully.

I have tried to change things like switching between {GoogleLogin} and regular GoogleLogin while importing. I have also changed the {'single_host_origin'} to "single_host_origin" - even tried with just the single quotes, also changed the clientid to include just the text process.env, without the brackets/quotes or $. I don't wanna use a context provider in react, so that I can get through the project video, and not have to research on every step that's different in that video. I could take that as worst case scenario, though. I've also. Thought of trying the @react-oauth/google library instead, but that again, requires the use of the context provider logic.

0

There are 0 answers