title: Why a state is not resolved as a variable in nextjs
body: <p>I am using passportjs middleware for authentication and it works, but when I'm trying to use the user object in components the property is undefined, although is passed in _app.js. </p>
  
  <p>The app is nextjs based with an express server. I know the user is authenticated because I can trace it in the server, but not in any component.</p>
  
  <pre class="lang-js prettyprint-override"><code>// _app.js
  import React from 'react';
  import App, { Container } from 'next/app';
  import { ThemeProvider } from '@material-ui/styles';
  import theme from '../theme/theme';
  
  class MyApp extends App {
      static async getInitialProps({ Component, ctx }) {
          let pageProps = {};
          if (Component.getInitialProps) {
              pageProps = await Component.getInitialProps(ctx);
          }
          if (ctx.req &amp;&amp; ctx.req.session &amp;&amp; ctx.req.session.passport) {
              pageProps.user = ctx.req.session.passport.user;
          }
          return { pageProps };
      }
  
      constructor(props) {
          super(props);
          this.state = {
              user: props.pageProps.user
          };
      }
  
      render() {
          const { Component, pageProps } = this.props;
  
          const props = {
              ...pageProps,
              user: this.state.user,
          };
  
          return (
              &lt;Container&gt;
                  &lt;ThemeProvider theme={theme}&gt;
                      &lt;Component {...props} /&gt;
                  &lt;/ThemeProvider&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  export default MyApp;
  </code></pre>
  
  <p>Webstorm is pointing at <code>user: this.state.user</code> line, complaining unresolved variable <code>user</code> but I do not understand why is not resolved as a variable, it is defined in the constructor.</p>
  
  <p>Edit: and this is the server.js</p>
  
  <pre class="lang-js prettyprint-override"><code>const express = require("express");
  const http = require("http");
  const next = require("next");
  const session = require("express-session");
  const passport = require("passport");
  const uid = require('uid-safe');
  const authRoutes = require("./auth-routes");
  const oAuth2Strategy = require("./lib/passport-oauth2-userinfo");
  
  const dev = process.env.NODE_ENV !== "production";
  const app = next({
      dev,
  });
  const handle = app.getRequestHandler();
  
  app.prepare().then(() =&gt; {
      const server = express();
  
      const sessionConfig = {
          secret: uid.sync(18),
          cookie: {
              maxAge: 86400 * 1000 // 24 hours in milliseconds
          },
          resave: false,
          saveUninitialized: true
      };
      server.use(session(sessionConfig));
  
      passport.use(new oAuth2Strategy(
          {
              authorizationURL: process.env.REACT_APP_AUTH_URL,
              tokenURL: process.env.REACT_APP_AUTH_TOKEN,
              clientID: process.env.REACT_APP_CLIENT_ID,
              clientSecret: process.env.REACT_APP_SECRET,
              callbackURL: process.env.REACT_APP_CALLBACK,
              userProfileURL: process.env.REACT_APP_OPENID
          },
          function(accessToken, refreshToken, extraParams, profile, done) {
              console.log(profile);
              return done(null, profile);
          }
  
      ));
      passport.serializeUser((user, done) =&gt; done(null, user));
      passport.deserializeUser((user, done) =&gt; done(null, user));
  
      server.use(passport.initialize());
      server.use(passport.session());
      server.use(authRoutes);
  
      const restrictAccess = (req, res, next) =&gt; {
          if (!req.isAuthenticated()) return res.redirect("/login");
          next();
      };
  
      server.use("/", restrictAccess);
      server.use("/profile", restrictAccess);
  
      server.get("*", handle);
  
      http.createServer(server).listen(process.env.PORT, () =&gt; {
          console.log(`listening on port ${process.env.PORT}`);
      });
  });
  </code></pre>
  
  <p>Edit 2: thanks to @SimplyComplexable I troubleshooted a little bit. In my index.js I can access the user prop like this e.g. <code>this.props.user.displayName</code> with no problem. </p>
  
  <p>This works:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Landing from "./Landing"
  import React from "react";
  
  class Home extends React.Component {
  
      render() {
          return (
              &lt;div&gt;
                  {this.props.user.displayName}
                  &lt;Landing /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Home;
  </code></pre>
  
  <p>But, for example, in <code>Landing</code> component the prop.user is undefined. Maybe I am not accessing correctly or passing the prop somehow?</p>
  
  <pre class="lang-js prettyprint-override"><code>class Landing extends React.Component {
      const {user} = this.props;
      return (
          &lt;div&gt;
              ...
      )
  }
  export default withStyles(useStyles)(Landing);
  </code></pre>