modernising quick start

Author: mansona

guides/implement-login/configure-app.md

@@ -1,73 +1,56 @@
----
-title: Configure your app
----
+After successfully creating your Authmaker instance, it is time to create your
+app and configure it to use your new Authmaker Instance.
 
-After successfully creating your Authmaker instance, configure your existing Ember application to work with Authmaker.
+## Create your app
 
-#### Install addons
-
-Authmaker works with [ember-simple-auth](https://ember-simple-auth.com/) to allow easy implementation of authentication and authorization in your app. From your Ember application directory, install ember-simple-auth and then authmaker-simple-auth:
+The quickest way to create your new application is to use the following npm init command:
 
 ```bash
-$ ember install ember-simple-auth
-$ ember install authmaker-ember-simple-auth
+npm init ember-app your-amazing-app
 ```
 
-#### Add Authmaker config
+This will create a new application for you in the folder `your-amazing-app`. You can make sure that it has initialised correctly by navigating to that app and starting it:
 
-Open `config/environment.js` and include the configuration details provided by Authmaker when you created your instance. These will be unique to your project. (Make sure to use the  _local_ configuration while in development.)
+```bash
+cd your-amazing-app
+npm start
+```
 
-```javascript {data-filename=config/environment.js}
+You should be prompted to visit http://localhost:4200 which should look something like this when you visit it:
 
-...
+![Ember Dummy App](/images/dummy-app.png)
 
- if (environment === 'development') {
-      // this object will be *UNIQUE* for your instance
-      ENV.authmaker = {
-      domainUrl: "https://my-app-name.authmaker.com",
-      redirectUri: "http://localhost:4200/login",
-      clientId: "yourClientId"
-      };
-  }
+Next we need to install the Authmaker addon.
 
-...
-```
+## Installing Authmaker Simple Auth
 
-#### Add ApplicationRouteMixin
+To get you started as quickly as possible we provide an Ember Addon that provides a lot of the functionality you would need. It is built to extend [ember-simple-auth](https://ember-simple-auth.com/) to allow easy implementation of authentication and authorization in your app.
 
-Generate an application route if you do not already have one:
+From your Ember application directory, install [authmaker-ember-simple-auth](https://github.com/Authmaker/authmaker-ember-simple-auth) as follows:
 
 ```bash
-$ ember g route application
+ember install authmaker-ember-simple-auth
 ```
 
-Include the `ApplicationRouteMixin` that ember-simple-auth provides, as shown below:
-
-```javascript {data-filename=app/routes/application.js}
+This will create a bunch of files in your application for you and update your environment config with example config that you will need to update before the Addon will start working.
 
-import Ember from 'ember';
-import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
+### Update Authmaker config
 
-export default Ember.Route.extend(ApplicationRouteMixin, {
-});
-```
-
-#### Add DataAdapterMixin
+If you open `config/environment.js` you will see that there are sections that will look something like this:
 
-Next, generate an application adapter if you do not already have one:
 
-```bash
-$ ember g adapter application
+```javascript {data-filename=config/environment.js}
+if (environment === 'development') {
+  ENV.authmaker = {
+    domainUrl: 'REPLACE_ME',
+    redirectUri: 'REPLACE_ME',
+    clientId: 'REPLACE_ME'
+  };
+}
 ```
 
-In order to automatically include authorization headers on all outgoing requests to the server, we need to include the `DataAdapterMixin` provided by ember-simple-auth in our application adapter. Add the following to `app/adapters/application.js`:
-
-```javascript {data-filename=app/adapters/application.js}
+You will need to replace these example configurations with the real config for your Authmaker application. To get the real configuration you should [login to your Authmaker dashboard](https://app.authmaker.com/instances) and click the button marked "Local Ember Config":
 
-import DS from 'ember-data';
-import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
+![Example Authmaker Instance](/images/instance.png)
 
-export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
-    authorizer: 'authorizer:application',
-});
-```
+When you click the button there will be a pop up with your specific config for your Authmaker app and you should replace the example config in the `development` section of your `environment.js` file to reflect this specific config.

guides/implement-login/login.md

@@ -1,31 +1,6 @@
----
-title: Create login route
----
+Now that we have our application created and the Authmaker addon installed we can create a login button
 
-Authmaker uses a dedicated login route to redirect users to a secure login and signup page for your app.
-
-#### Add AuthmakerLoginRoute
-
-Generate a route called **'login'** and add the `AuthmakerLoginRoute` mixin and our Authmaker configuration from `config/environment.js`.
-
-```bash
-$ ember g route login
-```
-
-```javascript {data-filename=app/routes/login.js}
-
-import Ember from 'ember';
-import AuthmakerLoginRoute from 'authmaker-ember-simple-auth/mixins/login-route';
-import Config from 'my-blog/config/environment';
-
-export default Ember.Route.extend(AuthmakerLoginRoute, {
-    config: Config.authmaker,
-});
-```
-
-This route is used solely by Authmaker to connect your application with Authmaker's login and signup tools. You will not need to add any template, controller, or route logic aside from the configuration shown above.
-
-#### Add login/logout actions
+## Add login/logout actions
 
 Next, generate a controller for the application route:
 
@@ -36,34 +11,32 @@ $ ember g controller application
 In this controller, add the actions **'login'** and **'logout'** as shown below:
 
 ```javascript {data-filename=app/controllers/application.js}
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
 
-import Ember from 'ember';
-import Config from 'my-blog/config/environment';
-
-const { inject: { service } } = Ember;
-
-export default Ember.Controller.extend({
+export default Controller.extend({
   session: service(),
 
   actions: {
-      login() {
-        return this.get('session').authenticate('authenticator:authmaker', Config.authmaker);
-      },
-      logout() {
-        return this.get('session').invalidate();
-      }
+    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.
 
 ```javascript {data-filename=app/templates/application.hbs}
 <header>
   {{#if session.isAuthenticated}}
-    <button {{action 'logout'}}>Logout</button>
+    <button {{action "logout"}}>Logout</button>
   {{else}}
-    <button {{action 'login'}}>Login</button>
+    <button {{action "login"}}>Login</button>
   {{/if}}
 </header>
 

guides/pages.yml

@@ -20,9 +20,9 @@
       url: "create-database"
     - title: "Create an Authmaker instance"
       url: "authmaker-instance"
-    - title: "Configure your app"
+    - title: "Create your app"
       url: "configure-app"
-    - title: "Create login route"
+    - title: "Create login button"
       url: "login"
 
 - title: "Building a Backend"