Allowing logins with username or e-mail

By default the Auth component will use the given username posted in the login form to check for a valid user account. However, some applications have two separate fields: one to define the username, and another one to define the user's e-mail. This recipe shows how to allow logins using either a username or an e-mail.

Getting ready

We should have a fully working authentication system, so follow the entire recipe, Setting up a basic authentication system.

We also need the field to hold the user's e-mail address. Add a field named email to your users table with the following SQL statement:

ALTER TABLE `users`
ADD COLUMN `email` VARCHAR(255) NOT NULL;

We need to modify the signup page so users can specify their e-mail address. Edit your app/views/users/add.ctp file and make the following changes:

<?php
echo $this->Form->create();
echo $this->Form->inputs(array(
'legend' => 'Signup',
'email',
'username',
'password'
));
echo $this->Form->end('Submit');
?>

How to do it...

1. 1. Edit your app/views/users/login.ctp file and make the following changes to it:

   <?php
   echo $this->Form->create(array('action'=>'login'));
   echo $this->Form->inputs(array(
   'legend' => 'Login',
   'username' => array('label'=>'Username / Email'),
   'password'
   ));
   echo $this->Form->end('Login');
   ?>
   

2. 2. Edit your UsersController class and make sure the login action looks like the following:

   public function login() {
   if (
   !empty($this->data) &&
   !empty($this->Auth->data['User']['username']) &&
   !empty($this->Auth->data['User']['password'])
   ) {
   $user = $this->User->find('first', array(
   'conditions' => array(
   'User.email' => $this->Auth->data['User']['username'],
   'User.password' => $this->Auth->data['User']['password']
   ),
   'recursive' => -1
   ));
   if (!empty($user) && $this->Auth->login($user)) {
   if ($this->Auth->autoRedirect) {
   $this->redirect($this->Auth->redirect());
   }
   } else {
   $this->Session->setFlash($this->Auth->loginError, $this->Auth->flashElement, array(), 'auth');
   }
   }
   }
   

   If you now browse to http://localhost/users/login and you can enter the user's e-mail and password to log in, as shown in the following screenshot:

How it works...

When the Auth component is unable to find a valid user account using the username and password fields, it gives the control back to the login action. Therefore, in the login action we can check if there is any submitted data. If that is the case, we know that the Auth component was not able to find a valid account.

With this in mind, we can try to find a user account with an e-mail that matches the given username. If there is one, we log the user in and redirect the browser to the default action, similar to what the component would do on a successful attempt.

If we cannot find a valid user account, we simply set the flash message to the default error message specified in the Auth component.

There's more...

You may have noticed that when looking for the user record, we used $this->Auth->data rather than $this->data to use the actual posted values. The reason for this is because the Auth component will not only automatically hash the password field, but also remove its value from the controller's data property, so if you need to show the login form again, the password field will not be pre-filled for the user.

See also

• Getting the current user's information