title: protecting routes with nextjs and express
body: <p>So I'm developing an app using NextJS, Firebase Authentication and Express and when a user sign up or sign in Firebase sends me a token that I can verify the user with and protect my routes.</p>
  
  <pre><code>  componentDidMount() {
      const { setCurrentUser } = this.props;
  
      this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth =&gt; {
        if (userAuth) {
          const userRef = await createUserProfileDocument(userAuth);
          this.setState({
            currentUser: {
              ...userRef
            }
          });
  
          const token = await auth.currentUser.getIdToken();
          axios.defaults.headers.common['Authorization'] = token;
        }
  
        this.setState({ currentUser: userAuth });
      });
    }
  </code></pre>
  
  <p>now every time I get that token I try to add it to the defaults of Axios so I can access these routes but I can't seem to do it because at this point the componentDidMount method didn't even run yet.</p>
  
  <p>and I'm stuck in a loop and can't seem to find a good way to pass the token down I tried stuff like redux and even then I couldn't do it</p>
  
  <pre><code>Post.getInitialProps = async ({ store }) =&gt; {
    // axios.defaults.headers.common['Authorization'] = token;
    // const res = await axios.get('http://localhost:5000/api/posts/2');
    // return { data: res.data };
  };
  </code></pre>
  
  <p>how do people who use next with api backend do it? I'd love a good reference to that.</p>