<p dir="auto">I'm creating API on server.js that uses user authentication via passport.</p>
<p dir="auto">I already add code to use passport and it works fine. If the user is not authorized, then redirect to login page for page, or return 403 Forbedden for APIs.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const isAuthenticatedAPI = (req, res, next) =&gt; {
    if (req.isAuthenticated()) {
        return next();
    } else {
        res.sendStatus(403);
    }
};

server.get(&quot;/api/item/:id&quot;, isAuthenticatedAPI, (req, res) =&gt; {
    // API implementation
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">isAuthenticatedAPI</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s1">next</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-en">isAuthenticated</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
        <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">sendStatus</span><span class="pl-kos">(</span><span class="pl-c1">403</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">"/api/item/:id"</span><span class="pl-kos">,</span> <span class="pl-en">isAuthenticatedAPI</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-c">// API implementation</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">But it is too strong. The code reject API calls during SSR. I hope to omit authentication check during SSR. I thought two solutions, but they were fragile:</p>
<ul dir="auto">
<li>Checking user-agent is <code class="notranslate">node-fetch/1.0 (+https://github.com/bitinn/node-fetch)</code> or not.</li>
<li>Checking req.ip is local or not (via <a href="https://www.npmjs.com/package/is-local-ip" rel="nofollow">is-local-ip</a>)</li>
</ul>
<p dir="auto">Is there any cool solution to identify the API client is for SSR or CSR?</p>
<p dir="auto">thanks,</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">We will get any good solution to decide authentication check should be omitted or not.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">I couldn't identify API call is for SSR/CSR in Express.js's handler.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Add passport to next's server.js</li>
<li>Call the API during SSR (it's ok on CSR)</li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I am creating the website that has uses user authentication via passport.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome M63</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I have see the example  with-external-scoped-css , but it compile the scss or sass to static , then import in html head ?  so  all page css will be imported ! and the static asset dont add hash with name ?  how to force the cdn update ?</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>