Create login button
Now that we have our application created and the Authmaker addon installed we can create a login button
Add login/logout actions
Next, generate a controller for the application route:
$ ember g controller application
In this controller, add the actions 'login' and 'logout' as shown below:
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default Controller.extend({
session: service(),
actions: {
login() {
return this.get('session').authenticate('authenticator:authmaker');
},
logout() {
return this.get('session').invalidate();
}
}
});
These actions are placed in the application controller so we can call them from our application template. In the example below, buttons for login/logout are placed in our header above the application outlet, so they will be visible and functional on all pages of our application.
<header>
{{#if session.isAuthenticated}}
<button {{action "logout"}}>Logout</button>
{{else}}
<button {{action "login"}}>Login</button>
{{/if}}
</header>
<main>
{{outlet}}
</main>
Now upon starting your local application server, users will be able to signup and login to your application in order to view any content that requires an authenticated session.