Reading Time: 5 minutes

8,226 Views

Inside this article we will see the concept i.e Work with Javascript Auto Logout in CodeIgniter 4 Tutorial. Article contains the classified information about How To Add Auto Logout for Users in CodeIgniter 4 Using Javascript.

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.

Learn More –

Let’s get started.

CodeIgniter 4 Installation

To create a CodeIgniter 4 setup run this given command into your shell or terminal. Please make sure composer should be installed.

composer create-project codeigniter4/appstarter codeigniter-4

Assuming you have successfully installed application into your local system.

Environment (.env) Setup

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

Either we can do via renaming file as simple as that. Also we can do by terminal command.

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.

Enable Development Mode

CodeIgniter starts up in production mode by default. You need to make it in development mode to see any error if you are working with application.

Open .env file from root.

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

Open Routes.php file from /app/Config folder. Add these routes into it.

//...

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

$routes->get('logout', 'User::doLogout');

//...

Controller Settings

Open any controller of your application. Say I am opening User.php from /app/Controllers folder.

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

Next, 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 learn about Work with Javascript Auto Logout in CodeIgniter 4 Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

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.