Auth0 with spa react app authenticate on load

I am trying to make a change in react-spa sample app in such a way that if the authentication is not done then redirect to Auth0 login page and then after that redirect back to localhost:3000.

Changes I made to the existing sample app are as below but my app is going in loop constantly asking credentials on login page. I doubt the isAuthenticated variable is not able to preserve the value after being redirected post login.

Any help is appreciated. I am new to Auth0 so trying this trial and error.

const App = () => {
const { isAuthenticated, loginWithRedirect, isLoading, error } = useAuth0();

if (error) {

Oops… {error.message}

if (!isAuthenticated) {
console.log(‘============================Redirecting to Login from App.js==================’)
setTimeout(function() {
// do something after 1000 milliseconds
}, 30000);
return loginWithRedirect()
if (isLoading) {
return ;

return isAuthenticated && (


I referred this thread How to have the login page as the default if a user is not logged in - #6 by konrad.sopala and it worked for me. Just the problem is its showing LoginButton for me on the page instead or automatically redirecting to login page if user is Nor Authenticated. I’ll appreciate any feedback.