useAuth0 returns Undefined

Help
, , , ,
1

I am using the useAuth0 hook inside my React Application to retrieve User Information however My application crashes and I get A Type Error

import React, { useState } from "react";
import { useAuth0 } from "@auth0/auth0-react";
export const UserContext = React.createContext();

export const UserProvider = (props) => {
  const { user } = useAuth0();
  const { name, picture, email } = user;
  const [User, getUser] = useState({ email: email });

  return (
<UserContext.Provider value={email}>{props.children}</UserContext.Provider>
  );
};

image
image1038Ă—277 17.3 KB

2

Hi @umairrsyedd, Welcome to the Auth0 Community!

Are you calling this UserProvider component after the user have completed authenticating? What does printing the user object to the console look like?

Looking forward to hearing back from you!

1 Like
3

Hey @supun, Thank you for taking your time and helping me out in this.
I would like to add a little context to my issue which will help you in understanding my problem.
I am building an Expense tracker application and After the user logs in, I want to grab the email id of the user from the Auth0 user object and Following that I am making a request to an API that will fetch the User Id of the User when I provide the Email. After I fetch The ID, I plan to use this throughout my Application to fetch the various APIs by Storing the UserID in the global state with the help of the context API.

Here are a few screenshots which will help you in understanding the process.

This is the Fetch to the Database and Retrieval of the ID
import React, { useState, useEffect } from “react”;
import { useAuth0 } from “@auth0/auth0-react”;
export const UserContext = React.createContext();
export const UserProvider = (props) => {
const [UserId, SetId] = useState(“ID”);
const { user } = useAuth0();
const { email } = user;
useEffect(() => {
fetch(
http://localhost:6500/User/?Email=umairrsyedd@gmail.com
).then((res) => res.json().then((ID) => SetId(ID)));
console.log(“Ran Effect”);
});
return (
<UserContext.Provider value={UserId}>{props.children}</UserContext.Provider>
);
};
Here Is Where I Am Calling the Provider, In my App.js Component
import React from “react”;
import { Route } from “react-router-dom”;
import HomePage from “./Pages/HomePage”;
import AuthenticationButton from “./Pages/AuthenticationButton”;
import SignUpButton from “./Components/SignUp”;
import DashboardPage from “./Pages/DashboardPage”;
import ProtectedRoute from “./Auth/Protected_Route”;
import { UserProvider } from “./Auth/UserContext”;
function App() {
return (
<>




</>
);
}
export default App;
The Protected Route component above checks whether the User Has logged In using the Auth0 hook and if the User Is logged in the dashboard component is shown, Else login is redirected
And the App Component is Wrapped inside the index Component which has the Auth0 Provider
import ReactDOM from “react-dom”;
import App from “./App”;
import { BrowserRouter as Router } from “react-router-dom”;
import Auth0ProviderWithHistory from “./Auth/Auth0_Provider_History”;
ReactDOM.render(




,
document.getElementById(“root”)
);

I hope I have been clear about the Problem and If theirs any Details which are required, I can provide it. Thank you so much

1 Like