import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
ReactDOM.render(
<Auth0Provider
domain="********************************"
clientId="********************************"
redirectUri={window.location.origin}
useRefreshTokens={true}
cacheLocation="localstorage"
>
<App />
</Auth0Provider>,
document.getElementById("root")
);
This is the index.js.
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
login button component.
import React, { useEffect } from "react";
import { useAuth0 } from "@auth0/auth0-react";
const Profile = () => {
const {
user,
isAuthenticated,
isLoading,
getAccessTokenSilently,
} = useAuth0();
useEffect(() => {
(async () => {
if (isAuthenticated) {
await getAccessTokenSilently();
}
})();
}, [getAccessTokenSilently, isAuthenticated]);
if (isLoading) {
return <div>Loading ...</div>;
}
if (!isAuthenticated) {
return <div>yet to authenticate</div>;
}
return user ? (
<div>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
) : null;
};
export default Profile;
Profile component always return “yet to authenticate” , even after successful login.
what am i doing wrong here?
callback-Url is set as http://localhost:3000/, http://localhost:3000