DoneJS Feathers JWT Cookie

Has anyone gotten donejs to recognize and authenticate a Feathers JWT cookie? I am seeing donejs render the page as if the user was not logged in.

My app stache looks like this:

{{#if(activeComponentProps)}}
    {{#if(session.userPromise.isPending)}}
        <div class="loading loading-lg" />
    {{else}}
        {{#if(session.user)}}
            {{#hasRole(session.user, activeComponentProps.roles)}}
                {{pageComponent(scope)}}
            {{else}}
                <div class="empty" style="margin: auto; auto; height:400px; width: 600px;">
                    <div class="empty-icon"><i class="fa fa-3x fa-key"></i></div>
                    <p class="empty-title h5">Oops! You need permissions to visit this page.</p>
                </div>
            {{/hasRole}}
        {{else}}
            <div class="empty" style="margin: auto; auto; height:400px; width: 600px;">
                <div class="empty-icon"><i class="fa fa-3x fa-sign-in"></i></div>
                <p class="empty-title h5">Oops! You need to log in before you can access this page.</p>
            </div>
        {{/if}}
    {{/if}}
{{/if}}

and my app.js view model looks like this:


const AppViewModel = DefineMap.extend('AppViewModel', {seal: false}, {
  /**
   * Make it so viewModel attributes will not be serialized automatically into
   * the URL as route attributes.
   */
  '*': {
    serialize: false
  },
  /**
   * npm version for cache buster rendering
   */
  version: {
    default: get(steal, 'System.npm.public.version') ||
            get(steal, 'npm.public.version') || 1
  },
  adminRole: {
    default: ['admin']
  },
  /**
   * Session.current is provided by the can-connect-feathers session behavior.
   * It will automatically populate when `new Session().save()` occurs in the app
   * or on refresh after login.
   */
  session: {
    get (val, set) {
      return Session.current;
    }
  },
//....

And the initial render of the page always looks like this: “Oops You need to log in before you can access this page.” Any tips for troubleshooting this?

My session object looks like this:

const Session = DefineMap.extend('Session', {seal: false}, {
  strategy: {default: 'local'},
  userId: '*',
  userPromise: {
    get () {
      if (this.userId) {
        return User.get(this.userId);
      }
      return Promise.resolve({});
    }
  },
  // Automatically populate the `user` when a `userId` is set.
  user: {
    Type: User,
    serialize (val) {
      if (val) {
        return val.serialize();
      }
    },
    get (val, set) {
      this.userPromise.then(set);
      return val;
    }
  },
  isValid () {
    return this.exp && this.exp * 1000 > new Date().getTime();
  }
});

Is bitcentive doing this? https://github.com/donejs/bitcentive

I know it uses JWT.

I’m not sure, is this a donejs app? It doesnt look like its using ssr at all, this is what’s getting rendered:

<!DOCTYPE html>
<html>
<head>
  <title>bitcentive</title>
</head>
<body>
  <script src="node_modules/steal/steal.production.js" main="bitcentive/index.stache!done-autorender"></script>
</body>
</html>

Its almost like there needs to be a pre-ssr render method. Something that looks at the current request (cookie) and then fetches the authentication info to verify the user is actually logged in and the token is valid, before the rendering occurs.

Without that, done-ssr will never render my application as if I were logged in, right?

Well ssr does setup all XHR requests made during ssr with the same cookie that the browser made the initial page request with. This works in bitballs. I don’t know enough about feathers to know where things might be going wrong. I’ll see if I can find someone that does.