How to redirect to another page after successful Google Sign In in React18?

Question

I am having an issue when trying to redirect to a different page after signing in with Google with my React 18 project. After logging in with google no redirects happen and I have no clue why not. Here is my Login.jsx file. After clicking the Google Login button on my react page and successfully logging in with Google nothing changes.

import React from 'react';
import { GoogleLogin } from 'react-google-login';
import { GoogleLogout } from 'react-google-login';
import { createRoot } from 'react-dom/client';
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import shareVideo from '../assets/share.mp4';
import logo from '../assets/logowhite.png';

import { client } from '../client';

const Login = () => {

  const navigate = useNavigate();

  const responseGoogle= (response) => {
    localStorage.setItem('user', JSON.stringify(response.profile.Obj));

    const { name, googleId, imageUrl } = response.profileObj;

    const doc = {
      _id: googleId,
      _type: 'user',
      userName: name,
      image: imageUrl,
    }

    client.createIfNotExists(doc)
      .then(() => {
        navigate('/', { replace: true })
      })
  }
  return (
    <div className='flex justify-start items-center flex-col h-screen'>
      <div className='relative w-full h-full'>
          <video 
            src={shareVideo}
            type='video/mp4'
            loop
            controls={false}
            muted
            autoPlay
            className='w-full h-full object-cover'
          />
          <div className='absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay'>
              <div className='p-5'>
                  <img src={logo} width='130px' alt='Ack! This WAS a logo :/' />
              </div>

              <div className='shadow-2xl'>
                    <GoogleLogin 
                      clientId="380323139927-1809a59ll0fp29rfo40jmubp01c2ife8.apps.googleusercontent.com"
                      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}
                          onSuccess={responseGoogle}
                          onFailure={responseGoogle}
                          cookiepolicy='single-host-origin'
                        >
                          <FcGoogle className='mr-4' /> Sign in with Google
                        </button>
                      )}  
                      
                    />
              </div>
          </div>
      </div>
    </div>
  )
}

export default Login

Here is my index.js file if needed:

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';

import App from './App';
import './index.css'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);


root.render(
    <Router>
    <App />
    </Router>, 
    document.getElementById('root')
    );

If anyone knows anyway to sort this out I would appreciate it hugely. Thanks in advance.

Answer 1

localStorage.setItem('user', JSON.stringify(response.profile.Obj));

shouldn't it be:

localStorage.setItem('user', JSON.stringify(response.profileObj));

there is no "." between profile and Obj