Skip to content

Create custom authentication components

Jump to bottom
James H. Hill edited this page Nov 29, 2018 · 18 revisions

Table of Contents

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 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

Component Files

reCAPTCHA Support

When signing into the application from a untrusted device, such as a web application, you need to add reCAPTCHA support to the sign in process as an extra layer of security. Fortunately, it is not hard to add reCATPCHA support to a custom sign in component.

Adding support for reCAPTCHA

First, let's update the solid-sign-in component's implementation to support reCAPTCHA. We do this by applying the SupportsRecaptcha mixin when extending the SignInComponent class.

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

import SignInComponent from "ember-cli-gatekeeper/components/gatekeeper-sign-in";
import SupportsRecaptcha from 'ember-cli-gatekeeper/mixins/supports-recaptcha';

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

In the example above, we changed the solid-sign-in class name to solid-sign-in-with-recaptcha for convenience. By applying the SupportsRecaptcha mixin to the sign in component, the sign in component will gain logic to apply reCAPTCHA at the most opportune time. You do not have to do anything else in the component's implementation to enable reCAPTCHA, or send its response to the server for verification.

Add reCAPTCHA to sign in component

Now that we added support for reCAPTCHA to the sign in component's implementation, we need to add a reCAPTCHA component to the sign in component's template. ember-cli-gatekeeper installs the ember-cli-google-recaptcha addon, which contains the g-recaptcha-* component we want to use.

We assume you have configured ember-cli-google-recaptcha per its documentation.

Select the variation of reCAPTCHA you want to use in your sign in component:

  • g-recaptcha-v2
  • g-recaptcha-invisible

and add it to the solid-sign-in.hbs template file.

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

  {{g-recaptcha-invisible verified=(action "verified")
                          reset=reset
                          execute=execute}}

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

After adding the component, we must bind the following attributes, which are defined in SupportsRecaptcha.

  • The verified attribute to the verified action.
  • The reset attribute to the reset variable.
  • The execute attribute to the execute variable.

Once you have bind the attributes above, the solid-sign-in component will now support reCAPTCHA as part of the sign in process. For invisible, you should see the notification tag in the bottom right hand corner (unless you configured the g-recaptcha-invisible component differently). For v2, you should see the I'm not a robot box.

Example Files

Route & Controller Files

Component Files

Clone this wiki locally