Back to Blog
Core Components

Autologin using Cookie / Remember Me in Dotkernel

TL;DR

This feature automatically logs in a user who checks the "remember me" box at login. It has been implemented in Dotkernel Frontend starting from Release 3.3.0, and requires changes across the login form, a new entity/migration, a new middleware, config, and the user service/repository/controller.

Add remember me button to user interface

Navigate to src/User/templates/user/login.html.twig and, under the password element, add:

<div class="checkbox remember-me-checkbox">
     {% set rememberMe = form.get('rememberMe') %}
     {{ formElement(rememberMe) }}
     <p>Remember me</p>
</div>

Then navigate to src/User/src/Form/LoginForm.php and add the following element to your form:

$this->add([
    'name' => 'rememberMe',
    'type' => 'checkbox',
    'attributes' => [
        'class' => 'tooltips',
        'data-toggle' => 'tooltip',
        'title' => 'Remember me',
    ],
]);

Then navigate to src/User/src/InputFilter/LoginInputFilter.php and add a filter for the new element:

$this->add([
            'name' => 'rememberMe',
            'filters' => [
                ['name' => 'StringTrim']
            ],
            'validators' => [
                [
                    'name' => 'NotEmpty',
                    'break_chain_on_failure' => true,
                ]
            ]
        ]);

To style the button, navigate to src/App/assets/scss/components/_profile.scss and add:

.remember-me-checkbox {
  input {
    display: block;
    float: left;
    margin: 4px 6px 10px 0;
    width: auto;
    height: auto;
  }
}

After making the changes, compile the CSS so the button styling takes effect:

npm run prod

Add functionality to remember me button

  1. Navigate to src/User/src/Entity, create a new entity named UserRememberMe.php, modeled on UserRememberMe.
  2. Create a migration file for the new table:
    vendor/bin/phinx create --configuration=config/migrations.php  RememberUserSchema
    
  3. Modify the generated migration file as in user_remember_schema, then run it against the database:
    vendor/bin/phinx migrate --configuration=config/migrations.php
    
    The table generated by the migration is used to store data from the cookie, which helps log the user in automatically.
  4. Create a new middleware at src/App/src/Middleware/RememberMeMiddleware.php, modeled on RememberMeMiddleware.
  5. Register the middleware in config/pipeline.php as shown in pipeline.
  6. To generate the cookie, add a new key to config/autoload/local.php:
    'rememberMe' => [
             'cookie' => [
                 'name' => 'rememberMe',
                 'lifetime' => 3600 * 24 * 30,
                 'samesite' => 'Lax',
                 'secure' => false,
                 'httponly' => true
             ]
         ],
    
  7. Edit src/User/src/Service/UserService.php: add two new properties, $defaultSessionManager (to get config) and $repository (to get repository), then add the methods getRepository(), addRememberMeToken(), deleteRememberMeCookie() as in UserService (and add the new methods to the interface if needed).
  8. Edit src/User/src/Repository/UserRepository.php and add the methods saveRememberUser(), getRememberUser(), findRememberMeUser(), deleteExpiredCookies(), removeRememberUser() as in UserRepository.
  9. Edit src/User/src/Controller/UserController.php: add a new property called $config, and edit loginAction() and logoutAction() as in UserController.

Frequently Asked Questions

Since which release is Remember Me implemented in Dotkernel? +

It's implemented in Dotkernel Frontend starting from Release 3.3.0.

How do you add the Remember Me checkbox to the login UI? +

In src/User/templates/user/login.html.twig, under the password element, render the rememberMe element retrieved via form.get('rememberMe') with formElement().

What form and validation changes are needed? +

A 'rememberMe' checkbox element must be added to src/User/src/Form/LoginForm.php, and a StringTrim filter plus a NotEmpty validator must be added for it in src/User/src/InputFilter/LoginInputFilter.php.

What backend pieces implement the actual remember-me functionality? +

A new UserRememberMe entity, a database migration (created and run with phinx) for its table, a new RememberMeMiddleware registered in config/pipeline.php, a rememberMe cookie configuration block added to config/autoload/local.php, and new methods added to UserService, UserRepository, and UserController (including loginAction() and logoutAction()).

What does the UserRememberMe table store? +

It's used to store data from the cookie, which helps log the user in automatically.

How do you apply the new remember-me button styles? +

Add the CSS to src/App/assets/scss/components/_profile.scss, then run npm run prod to compile the CSS so the button styling takes effect.