Search code examples
reactjsgoogle-cloud-platformgoogle-oauth

Google OAuth 2.0 authentication not working in React app: what am I doing wrong?

I want to make a simple application in which I would need authentication through a Google account, and since I have never done this, I decided to start with it.

For this, I use @react-oauth/google and also registered and configured https://console.cloud.google.com/

import './index.css';
import App from './App';
import { GoogleOAuthProvider } from '@react-oauth/google';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID_TOKEN as string}>
    <App />
  </GoogleOAuthProvider>
);

This is index.tsx, here I wrap the application in a provider and add property clientId

REACT_APP_GOOGLE_CLIENT_ID_TOKEN I take it from the .env file, which is in the root folder of the project

import { GoogleLogin } from '@react-oauth/google';
import './App.css';

function App() {
  return (
    <GoogleLogin
      onSuccess={credentialResponse => {
        console.log(credentialResponse);
      }}
      onError={() => {
        console.log('Login Failed');
      }}
    />
  );
}

export default App;

This app.tsx here I just add a login button via Google, and I want to see the credentials in the console

these are my settings

this is the console content

in the window that opens nothing is displayed, but it is clear that the application sees the clientId

address bar

This is what the address bar of the window that opens looks like

I still have to add registration and login through firebase, and then connect them with Google login, but at this stage I don’t understand what I’m doing wrong now

Most likely there is something that I don’t know about, can you tell me?

Solution

  • Add both http://localhost:3000 and http://localhost to the authorized js origins

    js origins