title: How to protect or authenticate React route using react-router-dom amplify
body: <p>I'm building an application using React and amplify. The authentication and authorizations stuff a working properly. But it need to restrict the user from moving to some particular React routes before login in to the application. The following code snippet is what i have tried and it works if <code>isAuthenticated()</code> returns false. But since im using Amplify im  using a method</p>
  
  <pre><code>const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest}
      render={async props =&gt;
        await isAuthenticated() ? (
          &lt;Navigation&gt;
            &lt;Component {...props} /&gt;
          &lt;/Navigation&gt;
        ) : (
          &lt;Redirect to="/login" /&gt;
        )
      }
    /&gt;
  );
  </code></pre>
  
  <p>here is my code for the isAuthenticated() function.</p>
  
  <pre><code>import Auth from "@aws-amplify/auth";
  export const isAuthenticated = async () =&gt; {
    try {
      return await Auth.currentSession().isValid();
    } catch (error) {
      return false;
    }
  };
  </code></pre>
  
  <p>but this throws an error like this.</p>
  
  <blockquote>
    <p>Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>
  
  <p>I know this is because it returns a promise but im awaiting for it but it is not working as i thought any reason why? .</p>