Even After successful login/signin the isAuthenticated is false

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;

Screenshot (395)

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

Solved the problem , Followed the following steps.

  • Go to https://manage.auth0.com/#/clients
  • Select your client
  • Go to Settings
  • Click on Show Advanced Settings
  • Click on the OAuth tab in Advanced Settings
  • Change the JsonWebToken Signature Algorithm to RS256