Auth0-lock dependency with private mode login not working. keep on navigate to the login page always

Help
,
1

Ready to post? :mag: First, try searching for your answer.
I need help i’m using the blow code to login and getting the token.

import Auth0Lock from 'auth0-lock';

const Auth0LockOptions: Auth0LockConstructorOptions = {
    auth: {
        audience: process.env.REACT_APP_AUTH0_AUDIENCE,
        redirect: true,
        redirectUrl: window.location.origin,
        responseType: 'token id_token',
        sso: false,
        autoParseHash: true,
        params: {
            scope: "openid profile email name"
        },
    },
    popupOptions: { width: 400, height: 400, left: 200, top: 300 },
    loginAfterSignUp: true,
    additionalSignUpFields: [
        {
            name: "given_name",
            placeholder: "Enter your First Name",
            storage: "root",
            validator: function(first_name: string) {
                return {
                    valid: first_name.length > 0,
                    hint: "Must have 1 or more characters"
                };
            }
        },
        {
            name: "family_name",
            placeholder: "Enter your Last Name",
            storage: "root",
            validator: function(family_name: string) {
                return {
                    valid: family_name.length > 0,
                    hint: "Must have 1 or more characters"
                };
            }
        }
    ],
};

export const Auth0LockGraze = new Auth0Lock(
    process.env.REACT_APP_AUTH0_CLIENT_ID || '',
    process.env.REACT_APP_AUTH0_DOMAIN || '',
    Auth0LockOptions
);



const useGrazeAuth0Lock = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState<any>({});
  const [isLoading, setIsLoading] = useState(true);
  const [tokens, setTokens] = useState<any>(null);
  const [checkedForTokens, setCheckedForTokens] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
      const checkForTokens = async () => {
          setIsLoading(true);
          try {
              Auth0LockGraze.checkSession({}, (error, authResult) => {
                  if (error) {
                      console.error('Error checking session:', error);
                      setIsAuthenticated(false);
                  } else if (authResult) {
                      localStorage.setItem(keys.authAccessToken, authResult.idToken);
                      setIsAuthenticated(true);
                      setTokens(authResult);
                  }
                  setIsLoading(false);
                  setCheckedForTokens(true);
              });
          } catch (error:any) {
              console.error(`Error: check for tokens; ${error}`);
              if (error?.message?.includes("401")) {
                  localStorage.clear();
                  sessionStorage.clear();
                  setIsAuthenticated(false);
              }
              setIsLoading(false);
          }
      };

      const getUserDetails = async () => {
          if (tokens) {
              setIsLoading(true);
              try {
                  Auth0LockGraze.getUserInfo(tokens.accessToken, (error, profileResult) => {
                      if (error) {
                          console.error('Error getting user info:', error);
                      } else if (profileResult) {
                          dispatch(storeAuth0User(profileResult));
                          setIsAuthenticated(true);
                          setUser(profileResult);
                      }
                      setIsLoading(false);
                  });
              } catch (e:any) {
                  console.error(`Error: get user details; ${e}`);
                  if (e.message.includes("401")) {
                      localStorage.clear();
                      sessionStorage.clear();
                      setIsAuthenticated(false);
                  }
                  setIsLoading(false);
              }
          }
      };

      if (!checkedForTokens) {
          checkForTokens();
      } else if (isAuthenticated && tokens && !user.name) {
          getUserDetails();
      }
  }, [checkedForTokens, dispatch, isAuthenticated, tokens, user.name]);

  return { isAuthenticated, isLoading, user, tokens };
};

export default useGrazeAuth0Lock;


function Auth0Provider({ children }: {children: any}) {
    const {isAuthenticated, isLoading} =  useGrazeAuth0Lock();
    useEffect(()=>{
        if(!isAuthenticated && !isLoading){
            Auth0LockGraze.show();
        }
    }, [isAuthenticated, isLoading])
    return children;
}

Always shows the login page. pleae help me out