Accessing Passport's req.user within React (ES6)? API call returns req.user as undefined
<p>I'm making an app using React Starter Kit that uses Passport for authentication. I'm at the stage now where I'm trying to access the req.user object in the front end, but I'm having trouble passing that <code>req.user</code> object into the React/ES6 environment.</p>

<p>I tried to pass the object as a <code>prop</code> and as <code>context</code>, to no avail.
At this point, I decided to make an API endpoint where I can return the value of req.user as JSON, however <code>req.user</code> is being returned as <code>undefined</code>, despite it working fine under <code>get('*')</code>.</p>

<p>This is the GET call I made, that is returning <code>undefined</code>: </p>

<pre><code>server.get('/user', (req, res) =&gt; {
  console.info('user: ', req.user);
});
</code></pre>

<p>While</p>

<pre><code>server.get('*', async (req, res, next) =&gt; {
  console.info('*: ', req.user);
  // ... the rest of the React Starter Kit rendering code
</code></pre>

<p>does return an object for <code>req.user</code> as it should, which leaves me confused. Is the passport session restricted to certain urls or something?</p>

<p>Middleware:</p>

<pre><code>    server.use(express.static(path.join(__dirname, 'public')));
    server.use(cookieParser());
    server.use(session({
      secret: 'keyboard cat',
      cookie: { httpOnly: false },
      resave: true,
      saveUninitialized: true,
    }));

    server.use(passport.initialize());
    server.use(passport.session());
</code></pre>

<p>And serialize/deserialize are as simple as they get:</p>

<pre><code>    passport.serializeUser((user, done) =&gt; {
      console.log('serializeUser');
      done(null, user);
    });

    passport.deserializeUser((obj, done) =&gt; {
      console.log('deserializeUser');
      done(null, obj);
    });
</code></pre>

<p>I know there are similar SO threads about <code>req.user</code> being undefined, but none seem to have my situation where it's only sometimes undefined based on where it's requested.
Thanks for reading and any suggestions you have. Cheers!</p>

<hr>

<p>EDIT:
Here's the auth flow</p>

<pre><code>    [initial app load with fresh server instance...]
    in (*) passport FALSE
    indexPage mounting...
    in (/user) passport FALSE
    [click login button and successfully login]
    serializeUser
    deserializeUser
    in (*) passport is TRUE
    indexPage mounting...
    in (/user) passport FALSE
</code></pre>

<p>I did some further testing, and noticed something interesting when triggering the API call with the Chrome console. I'm using <code>fetch</code> to do this by the way - I do <code>fetch('/user')</code> then log the response in <code>componentDidMount</code> method. Now, when I do this in the Chrome console: <code>fetch(/*)</code>, the terminal console logs <code>in (*) passport is false</code> again.</p>

<p>So the problem seems to be that passport is altogether disappearing after the initial render. An issue with cookies maybe? I'm going to investigate further and see what I can find.</p>