Javascript Auto Logout in CodeIgniter 4

Share this Article
Reading Time: 4 minutes
18 Views

When we are planning to create an application and also consider to make it as more secure. So in that case we should enable a auto logout system.

Auto logout means when we are operating a system which is inactive for some time period then after that time we exit the system or make it logged out automatically.

Here, inside this article we will see that how can we add the feature of javascript auto logout in codeigniter 4.

Note*: For this article, CodeIgniter v4.1 setup has been installed. May be when you are seeing, version will be updated. CodeIgniter 4.x still is in development mode.

Let’s get started.


Download & Install CodeIgniter 4 Setup

We need to download & install CodeIgniter 4 application setup to system. To set application we have multiple options to proceed. Here are the following ways to download and install CodeIgniter 4 –

  • Manual Download
  • Composer Installation
  • Clone Github repository of CodeIgniter 4

Complete introduction of CodeIgniter 4 basics – Click here to go. After going through this article you can easily download & install setup.

Here is the command to install via composer –

$ composer create-project codeigniter4/appstarter codeigniter-4

Assuming you have successfully installed application into your local system.


Settings Environment Variables

When we install CodeIgniter 4, we have env file at root. To use the environment variables means using variables at global scope we need to do env to .env

Open project in terminal

$ cp env .env

Above command will create a copy of env file to .env file. Now we are ready to use environment variables.

CodeIgniter starts up in production mode by default. Let’s do it in development mode. So that while working if we get any error then error will show up.

# CI_ENVIRONMENT = production

// Do it to 

CI_ENVIRONMENT = development

Now application is in development mode.


Settings Route – Logout URL

As we are developing a system which logs out automatically after a specific time period, then we need to make a logout url. This URL will be automatically triggers and auto logs out. For route configuration go to /app/Config/Routes.php

//.. Other routes

$routes->get('/', 'User::index');

// logged out user when we hit
$routes->get('logout', 'User::doLogout');

Controller Settings

Controllers will created at /app/Controllers/User.php

<?php 
namespace App\Controllers;

class User extends BaseController
{
    public function index()
    {
      // other site code stuff
    }
  
	public function doLogout()
	{
		$session =  session();
        $session->destroy(); // destroy session variables and values
        return redirect()->to(base_url("/"));
	}
}

Here, inside this User controller we have two methods i.e index() and doLogout().

index() which contains general code for site and doLogout() is for destroying all session variables and values for a specific user.


Adding Javascript Methods

Inside this section we will add javascript functions which will be triggered by javascript event.

<head>
  <script type="text/javascript">
    // Set timeout variables.
    var timoutNow = 1800000; // Timeout of 30 mins - time in ms
    var logoutUrl = "<?php echo base_url('logout') ?>"; // URL to logout page.

    var timeoutTimer;

    // Start timer
    function StartTimers() {
      timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
    }

    // Reset timer
    function ResetTimers() {
      clearTimeout(timeoutTimer);
      StartTimers();
    }

    // Logout user
    function IdleTimeout() {
      window.location = logoutUrl;
    }
 </script>
</head>

<body onload="StartTimers();" onmousemove="ResetTimers();">
  
</body>  

Above code is the complete code of javascript which detects activity of inputs on screen.

  • onload=”StartTimers();” onmousemove=”ResetTimers();” Here is the onload javascript StartTimers(); function will be called. This function setup the timeout. Whereas ResetTimers(); function resets the timer when we move mouse or anything into screen.
  • var timoutNow = 1800000; This is in milliseconds. This is of 30 mins. In ms it will be 30*60*1000 = 1800000
  • var logoutUrl = “” this variable contains the url, when we hit it runs the logout method and destroy all session values.

When we do not do any activity upto 30 mins what we have specified above, system will call logout URL and do logout. If suppose we do any activity within that, onmousemove event will reset timer again.

This is conceptual logic behind inactivity logout.

We hope this article helped you to Javascript Auto logout in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on CodeIgniter 4 here

Leave a Comment