title: Frontend connecting to middleware protected by keycloak-nodejs-connect (intended usage)
body: <p>Need to share some context and setup before asking my question, so please excuse the wall of text. =)</p>
  
  <p>My app: </p>
  
  <ul>
  <li><p><code>frontend</code> is a SPA served as a static resource from NGINX (<code>http://frontend</code>)</p></li>
  <li><p><code>keycloak</code> server running on <code>http://keycloak</code></p></li>
  <li><p><code>middleware</code> is a NodeJS app that <code>frontend</code> communicates with as API endpoint (eg: <code>http://middleware</code>). Middleware is using keycloak-nodejs-connect (<a href="https://github.com/keycloak/keycloak-nodejs-connect" rel="nofollow noreferrer">https://github.com/keycloak/keycloak-nodejs-connect</a>) to protect the API endpoint</p></li>
  </ul>
  
  <p>setup code in middleware looks like this:</p>
  
  <pre><code>const session = require('express-session')
  const memoryStore = new session.MemoryStore()
  
  app.use(session({
    secret: 'mySecret',
    resave: false,
    saveUninitialized: true,
    store: memoryStore
  }))
  
  const keycloak = require('./auth/keycloak')
  app.use(keycloak.middleware({
    logout: '/logout'
  }))
  </code></pre>
  
  <p>The setup in <code>auth/keycloak.js</code> is:</p>
  
  <pre><code>const keycloakConfig = {
    'realm': 'realmName',
    'auth-server-url': `http://keycloak/auth`,
    'ssl-required': 'external',
    'resource': 'clientName',
    'credentials': {
      'secret': 'aaaaaaaa-bbbb-cccc-dddd-1a49c9dfbbef'
    }
  }
  
  module.exports = new Keycloak({store: memoryStore, responseType: 'code'}, keycloakConfig)
  </code></pre>
  
  <p>when a user clicks "/login" link from frontend, the <code>frontend</code> spawns a new tab and the new tab calls <code>http://middleware/login</code>. The motivation is for the existing state in UI to not be touched, all redirects etc happen in a new window. The code in <code>middleware</code> looks like this:</p>
  
  <pre><code>app.get('/login', keycloak.protect(), (req, res) =&gt; {
    const keycloakTokens = JSON.parse(req.session['keycloak-token'])
    const userInfo = JSON.stringify(decodeToken(keycloakTokens))
    res.status(200).send(`&lt;html&gt;&lt;head&gt;
          &lt;script type="text/javascript"&gt;
              window.opener.postMessage(${userInfo}, 'http://frontend')
              window.close()
          &lt;/script&gt;
      &lt;/head&gt;&lt;/html&gt;`)
  })
  
  const decodeToken = ({id_token}) =&gt; {
    const payload = JSON.parse(atob(id_token.split('.')[1]))
    return payload
  }
  </code></pre>
  
  <p>So the idea is that after the OIDC dance, the middleware will respond asking the new tab to <code>postMessage</code> to the <code>opener</code> (parent) with the contents of the <code>id_token</code> JWT. </p>
  
  <p>Assumption 1: the session in the cookie <code>connect.sid</code> is what the middleware uses to ensure the user is still authenticated. Is this assumption accurate?</p>
  
  <p>there is a event listener in <code>frontend</code> that watches for the <code>postMessage</code> and saves the information sent (id_token) to localStorage. </p>
  
  <p>Question 1: is this a correct way of doing login given the setup described above?</p>
  
  <p>I think i'm definitely missing something because another protected route in <code>middleware</code> causes redirect to <code>keycloak</code> again telling me that middleware does not know the <code>frontend</code> is authenticated. </p>
  
  <p>Question 2: how would logout work in this case? just clear the browser cookies?</p>
  
  <p>I tried the example app (<a href="https://github.com/keycloak/keycloak-nodejs-connect/tree/master/example" rel="nofollow noreferrer">https://github.com/keycloak/keycloak-nodejs-connect/tree/master/example</a>) but that has a different architecture, the browser points to the middleware domain.</p>
  
  <p>please let me know if you are looking for more code snippets or details. Happy to provide.</p>