Create custom authentication components

Table of Contents

Custom Sign In Component reCAPTCHA Support

Custom Sign In Component

The ember-cli-gatekeeper addon provides a default component for to sign in a user into their account. This default sign in component uses Material Design. If you have an application that does not use Material Design, then the default sign in component cannot be used as is in your application. Instead, you must customize the sign in component for your application.

It is better to customize the sign in component and not implement one from scratch because you lose out on reusing the implementation from the default sign in component.

Create the custom component

Let's assume our project is named Solid. First, create a new sign in component.

ember g component solid-sign-in

This will create a new component (including handlebars template) with code similar to the following:

// app/components/solid-sign-in.js

import Component from "@ember/component";

export default Component.extend ({

});

Extend sign in component

Next, replace extending the Component class with the SignInComponent from ember-cli-gatekeeper.

// app/components/solid-sign-in.js

import SignInComponent from "ember-cli-gatekeeper/components/gatekeeper-sign-in";

export default SignInComponent.extend ({
  classNames: ['solid-sign-in']
});

Notice that we added add a class name to the classNames attribute. By default, the SignInComponent includes the gatekeeper-sign-in class name. We want our component to include the its own class name as well, which we can reference when styling this component. If we did not provide the custom class name, then we can just rely on the gatekeeper-sign-in class name for styling purposes.

All the attributes available on the [SignInComponent](https://github.com/onehilltech/ember-cli-gatekeeper/blob/master/addon/components/gatekeeper-sign-in.js) are available to the solid-sign-in component.

Implement the sign in template

The last step is to implement the sign in component's handlebars template. When implementing the template, we want to make sure we bind attribute variables and actions in our template the following attributes and actions the SignInComponent from ember-cli-gatekeeper expects.

Identifier	Type	Description
username	Attribute	The variable bound to the username input
password	Attribute	The variable bound to the password input
signIn	Action	The action to submit username and password for sign in

Here is an example template for the solid-sign-in component that uses native input controls.

{{!-- app/templates/components/solid-sign-in.js --}}

{{#mdc-form submit=(action "signIn") as |form|}}
  {{input type="text" value=username required=true}}
  {{input type="password" value=password required=true}}

  <button type="submit" disabled={{form.isInvalid}}>Sign In</button>
{{/mdc-form}}

As shown in the example above, we have two native input controls. One control is bound to the username variable and the other is bound to the password variable. We then use the {{mdc-form}} component, included with ember-cli-gatekeeper, to bind the submit property to the signIn. This means that whenever the user clicks a button with type="submit", it will fire submit action bound to the {{mdc-form}} component. You should also notice that we are enabling/disabling the sign in button based on the form's validity.

To use our custom sign in component, we just replace the gatekeeper-sign-in component with the solid-sign-in component in the sign in route template.

{{solid-sign-in complete=(action "complete")}}

Now, just style the solid-sign-in component as desired in CSS/SASS, and we have our custom sign in component for the application.

Example Files

Route & Controller Files

• app/templates/sign-in/custom.hbs
• app/controllers/sign-in/custom.js

Component Files

• app/components/solid-sign-in.js
• app/templates/components/solid-sign-in.hbs

reCAPTCHA Support