Merge pull request #2909 from mainmatter/fix-2907-reactivity

fix(ember-simple-auth): setting non 'content' fields with #set on ObjectProxy is not reactive.

packages/ember-simple-auth/src/services/session.ts

@@ -11,7 +11,7 @@ import {
   handleSessionInvalidated,
 } from '../-internals/routing';
 import type Transition from '@ember/routing/transition';
-import { alias } from '@ember/object/computed';
+import { alias, readOnly } from '@ember/object/computed';
 
 const SESSION_DATA_KEY_PREFIX = /^data\./;
 
@@ -90,9 +90,7 @@ export default class SessionService<Data = DefaultDataShape> extends Service {
     @default false
     @public
   */
-  get isAuthenticated() {
-    return this.session.isAuthenticated;
-  }
+  @readOnly('session.isAuthenticated') declare isAuthenticated: boolean;
 
   /**
     The current session data as a plain object. The
@@ -109,9 +107,7 @@ export default class SessionService<Data = DefaultDataShape> extends Service {
     @default { authenticated: {} }
     @public
   */
-  get data() {
-    return this.session.content;
-  }
+  @readOnly('session.content') declare data: Data;
 
   /**
     The session store.
@@ -123,9 +119,7 @@ export default class SessionService<Data = DefaultDataShape> extends Service {
     @default null
     @public
   */
-  get store() {
-    return this.session.store;
-  }
+  @readOnly('session.store') declare store: unknown;
 
   /**
     A previously attempted but intercepted transition (e.g. by the

packages/test-app/app/controllers/application.js

@@ -4,6 +4,7 @@ import { action } from '@ember/object';
 
 export default class ApplicationController extends Controller {
   @service router;
+  @service session;
 
   @action
   transitionToLoginRoute() {

packages/test-app/app/templates/application.hbs

@@ -1,4 +1,9 @@
 <MainNavigation @onLogin={{this.transitionToLoginRoute}} />
-<div class="container mt-4">
+<div class='container mt-4'>
   {{outlet}}
+</div>
+
+<div data-test-reactivity hidden>
+  <!-- test SessionService reactivity -->
+  <span data-is-authenticated={{this.session.isAuthenticated}}> </span>
 </div>

packages/test-app/tests/acceptance/authentication-test.js

@@ -35,10 +35,16 @@ module('Acceptance: Authentication', function (hooks) {
 
     await invalidateSession();
     await visit('/login');
+    assert
+      .dom('[data-test-reactivity] [data-is-authenticated]')
+      .doesNotExist('not authenticated yet.');
     await fillIn('[data-test-identification]', 'identification');
     await fillIn('[data-test-password]', 'password');
     await click('button[type="submit"]');
 
+    assert
+      .dom('[data-test-reactivity] [data-is-authenticated]')
+      .exists('session.isAuthenticated is reactive');
     assert.equal(currentURL(), '/');
   });