Ready to post? First, try searching for your answer.
I initialized the provider
<Auth0Provider
domain="domain"
clientId="id"
authorizationParams={{
redirect_uri: "http://localhost:3000/dashboard"
}}>
<App />
</Auth0Provider>
And log in with google
function App() {
const { loginWithRedirect } = useAuth0();
return (
<Router>
<Routes>
<Route path="/" element={
<button onClick={() => loginWithRedirect({
authorizationParams: {
connection: 'google-oauth2',
redirect_uri: 'http://localhost:3000/dashboard'
}
})}>
Login with Google
</button>
}/>
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Router>
);
}
However, the user is undefined after logging to dashboard component, what went wrong?
function Dashboard() {
const { user, logout, isAuthenticated } = useAuth0();
console.log(user);
return isAuthenticated ? (
<div>
<h1>Welcome, {user.name}!</h1>
<button onClick={() => logout({ returnTo: window.location.origin })}>
Logout
</button>
</div>
) : (
<div>Loading...</div>
);
}