React to authentication in a component via modifier about ember-simple-auth HOT 2 CLOSED

I'm not sure this is a correct way to use modifiers, they are meant to provide functionality to a given element or based on it's lifecycle.

If you just need to do some conditional work based on your authentication status, then you should be able to just inject session service and use it's isAuthenticated property inside a template.

If you need to run some code when authentication succeeded, the session service exposes authenticationSucceeded and invalidationSucceeded events.

See the docs for the reference
https://ember-simple-auth.com/api/classes/SessionService.html

// some-component.js
import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class SomeComponent extends Component {
    @service session;
}

// some-component.hbs

{{#if this.session.isAuthenticated}}
  Status OK
  
{{else}}
  
  Status Not OK
{{/if}}

Otherwise, if you'd like to have modifier semantics I'd recommend did-update from https://github.com/emberjs/ember-render-modifiers

Then in the template you'd be able to do this:

<div {{did-update this.updateStatus isAuthenticated=this.session.isAuthenticated}}>
</div>

from ember-simple-auth.

Ok thanks, I ended up realizing I could use isAuthenticated and had overthought the issue! Appreciate the feedback

from ember-simple-auth.