title: How to use context with hooks for authentication?
body: <p>I'm trying to use <code>context</code> for handling pieces of authentication in my app. I was running into issues because I was trying to call <code>useContext</code> outside of my <code>Context.Provider</code>, so I moved the logic to a child component of the provider. </p>
  
  <p>Now I'm getting an error message <code>TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))</code> where I'm calling <code>useContext</code> in the child component. Is the issue really with getting the values from the context or something else?</p>
  
  <p>In <code>app.js</code></p>
  
  <pre><code>import AuthContextProvider from "./components/context/authContext";
  import RegisterRoutes from "./components/routing/registerRoutes";
  
  function App() {
     return (
        &lt;AuthContextProvider&gt;
            &lt;Route
              exact
              path="/register"
              render={(props) =&gt; (
                &lt;RegisterRoutes {...props} /&gt;
              )}
            /&gt;
        &lt;/AuthContextProvider&gt;
     )
  }
  </code></pre>
  
  <p>In my <code>authContext.js</code></p>
  
  <pre><code>import React, { useState, useEffect, createContext } from "react";
  
  export const AuthContext = createContext();
  
  const AuthContextProvider = (props) =&gt; {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const setAuth = (boolean) =&gt; {
      setIsAuthenticated(boolean);
    };
  
  //Auth API logic here//
    const apiOptions = {
      url: "users/is-verified",
      method: "GET",
      headers: {
        token: localStorage.token,
      },
    };
  
    async function isAuth() {
      axios(apiOptions)
        .then((response) =&gt; {
          const resData = response.data;
          resData === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
        })
        .catch((error) =&gt; {
          console.log(error.response);
        });
    }
  
    useEffect(() =&gt; {
      isAuth();
    }, []);
  
    return (
      &lt;AuthContext.Provider
        value={[isAuthenticated, setIsAuthenticated, setAuth]}
      &gt;
        {props.children}
      &lt;/AuthContext.Provider&gt;
    );
  };
  
  export default AuthContextProvider;
  </code></pre>
  
  <p>In my <code>registerRoutes.js</code></p>
  
  <pre><code>import React, { useContext } from "react";
  import { Redirect } from "react-router-dom";
  import Register from "../pages/register";
  import AuthContext from "../context/authContext";
  
  function RegisterRoutes(props) {
    const [isAuthenticated, setAuth] = useContext(AuthContext);
  
    return !isAuthenticated ? (
      &lt;Register {...props} setAuth={setAuth} /&gt;
    ) : (
      &lt;Redirect to="/login" /&gt;
    );
  }
  
  export default RegisterRoutes;
  </code></pre>