Why is my useContext not working in my app and my browser remains loading?

Question

Im trying to use useContext hook to pass variables and functions through different components without lifting them to the main App.js component. I was trying to do this and it seemed to compile correctly but when i go to my browser my app is stucked in a blank page and remains loading.

LoginContext.js: In this component i store the user data in an object using the useState hook and i use jwt_decode to decode the use token and get all the data i need to store.

import React, { createContext, useState } from "react";
import jwt_decode from 'jwt-decode';



const LoginContext = createContext();

export function LoginProvider({children}) {
    
    const [user, setUser] = useState({})

    function handleCallbackResponse(response){
        var userData = jwt_decode(response.credential); //Token with the login user Data
        setUser(userData); //Store user Data 
        /* console.log(userData) */
        document.getElementById('signInDiv').hidden = true;
        
      }

    function handleSignOut(event) {
        setUser({}) //Empy the user Data
        document.getElementById('signInDiv').hidden = false;
    }  

    return(
        <LoginProvider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginProvider>
    );
}

export default LoginContext

The i have my Login.js which uses LoginContext: Here i use the user to show the different data of the logged in use and the handleCallbackResponse to do my Login.

import React, { useContext, useEffect } from 'react'

import LoginContext from '../LoginContext';

const Login = () => {
  
  const {user, handleCallbackResponse, handleSignOut} = useContext(LoginContext)

      useEffect(()=>{
        /*global google*/
        google.accounts.id.initialize({
          client_id:"My client ID",
          callback: handleCallbackResponse
        })
    
        google.accounts.id.prompt();
    
    
        google.accounts.id.renderButton(
          document.getElementById('signInDiv'),
          {theme: 'outline', size: 'medium'}
        )
    
      }, []);

  return (
    <div>
        <div id="signInDiv"></div>
      {
        //If user objetc is not empty show sign out button
        Object.keys(user).length !== 0 &&
      <button onClick={(e)=>handleSignOut(e)}>Sign Out</button>
      }
      {user && 
        <div>
          <img src={user.picture} alt="" />
          <h3>{user.name}</h3>
        </div>
      }
    </div>
  )
}

export default Login

App.js:

import './App.css';
import Login from './atoms/Login';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import { LoginProvider } from './LoginContext';
import PrivateRoutes from './utils/PrivateRoutes';

function App() {
  return (
    <LoginProvider>
      <BrowserRouter>
      <Routes>
        {/* <Route element={<PrivateRoutes/>}>
        </Route> */}
        <Route exact path="/dashboard" element={<Dashboard/>}/>
        <Route  path="/" element={<Login/>} />    
      </Routes>
      </BrowserRouter>
    </LoginProvider>
  );
}

export default App;

For some reason my application runs with no error but in the browser it remains loading with a blank page and im not able to inspect the page.

Answer 1

Instead of:

<LoginProvider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginProvider>
);

Replace with

<LoginContext.Provider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginContext.Provider>