How to develop a login and registration system in CodeIgniter 4

Let us develop a registration and login system in CodeIgniter 4 and MySQL database for the customers. There will be a simple home page with options for registration and login. Customers can submit a registration form. Once registration is successful, customer can login into the application. You will also learn form validation in CodeIgniter 4.

If you want to know how to install and configure CodeIgniter 4, you can read the topic How to Install and Test CodeIgniter4 in Your Local Computer

CodeIgniter Database Login FormFolders and Files

I have created a folder named 'projects' in D:\ drive and installed CodeIgniter 4 in customer folder under projects directory. So, the root directory is D:/projects/customer.

create login and registration page in CodeIgniter 4

You can see, we have Controller - Customer.php, Model - ModelCustomer.php and three views - home.php, login.php and signup.php under Views folder. The folder 'assets' is created under public to keep the stylesheets, JavaScripts and image files. Here I have style.css which is kept in public/assets/css folder and a JavaScript file scripts.js under public/assets/js folder. Just make sure you give correct path for css file in the views.

If you are using XAMPP and want to use Apache Web Server instead of PHP built-in server, then you can install CodeIgniter 4 under xampp/htdocs/<your folder name>. In our case this folder name is customer. I will show necessary configuration changes and testing the application for both the web servers.

Step 1 - Create a MySQL table to store customer details

Let us create the table named 'customer' in MySQL database. Table structures is given below:

Table: customer

This table stores details of all customers who successfully completed the signup.

codeigniter login and registration source code free download

Below are the columns in this table.

  1. id - It is the primary key and auto incremented id of the customer
  2. name - Name of the customer
  3. email - Email Id of the customer
  4. password - Password for login
Create table script for this table is given below; you can use this code to create the table.

customer.sql

After you create the table, verify if table structure is same as above.

Step 2 - Write Model code (ModelCustomer.php)

We will simply select all rows from customer table. So, our model will be very simple with the table name as 'customer' and the allowed fields from the table. Below is the model code, keep ModelCustomer.php in app/Models folder.

app/Models/ModelCustomer.php

$table is used to indicate that the model will primarily use this table. However, you can use other tables also in the query.

Database setup and other configuration changes are discussed in step 5.

Step 3 - Write Controller code (Customer.php)

Our controller function will have an index() method to display the home page, signup() method for displaying signup page and process submitted data, login() method for customer login and logout() method. See the code below at the beginning of the controller:

In the constructor method, form and url helper are loaded. Then an instance of the model is created. Home page screen is given below:

codeigniter 4 login and registration source code

You can see it loads the view for home page which has links for Signup and Login .

Let us now add the methods for Signup, Login and Logout in the controller.

Controller Method signup()

codeigniter 4 login and registration

When user clicks on Signup link in home page, this method is called. If the form is submitted, it does validation for the input fields using validation rules. If validation is unsuccessful, it reloads the view with error message displayed corresponding to the field for which validation was failed. But if all fields are validated successfully, this method inserts the data in the table using the model. Let's see the code for signup() method.

For validating input fields, rules are defined using $rules array. For detail how to do form validation in CodeIgniter 4, you can read the topic How to Do Form Validation With Custom Rule in CodeIgniter4.

$this->model->save() method will insert the row in database table.

Controller Method login()

Method login() is called when user clicks on Login link in Home page. On successful login, it redirects the user to the home page where it shows a welcome message and a logout option, otherwise it reloads login view with the error message. Let's see the code:

Controller Method logout()

Method logout() deletes the session and redirects the user to the home page. See below:

So, these were our controller methods, now let's see the Views in next step.

Step 4 - Write Views (home.php, signup.php, login.php)

There will be three views for home page, signup page and login page. Additionally, there will be a custom css file and a small piece of JavaScripts for showing/hiding password in login page. Let us take a look at them one by one.

View for Home Page

Our home page is simple, it just displays two links, one for signup and other for login if customer is not logged in. But when customer is logged in, he/she will be redirected to home page, this time it will display welcome message with the name of the customer and a logout link. Below are the screens for before login and after login:

Before Login

login in codeigniter with database

After Login

login and registration form in codeigniter

app/Views/home.php

View for Signup Page

login and registration form in codeigniter

Signup page will display a form for the customer to fill and submit. It has name, email id, password and confirm password fields along with a submit button. See below view for signup:

app/Views/signup.php

Note that csrf_field() is added for CSRF protection and related error will be displayed using session()->getFlashdata('error'). To enable CSRF protection for post requests, update app/Config/Filters.php to add csrf for post in $methods property.

View for Login Page

codeigniter 4 login and registration

Login page will have email_id and password as input fields. See below code:

app/Views/login.php

Here, I have included a JavaScript file scripts.js. We will use JavaScript function for the option "Show Password" which is added as checkbox. When user clicks on it, it calls a JavaScript function togglePwd() written in scripts.js.

Below is the code for togglePwd() function:

scripts.js

This function changes the type of the password field in login page, from "password" to "text" and vice versa.

Let me give the stylesheet also I created for all these views.

style.css

I just added few simple styles here, you can always add better styles.

Note that, js and css files are in public/assets folder.

Step 5 - Update Configuration files and Test the Application

Let us now update few setup files before we run the application.

We will update below files in Config folder and also, we will have .env file updated in the root directory. See below:

Signup and Login in Codeigniter 4

Update config file (app/Config/App.php)

Below is a section of App.php, set $baseURL and $index Page as given below:

Update database setup file (app/Config/Database.php)

As I mentioned before, I am using a database named 'demo' in localhost with user 'root', so below is our database connection setup in Database.php. Update $default as below:

Update Routes file (app/Config/Routes.php)

In Routes.php change default controller as Customer. So below code is for Routes.php

Update .env to set the environment

We need to set the environment to development in the environment (.env) file. This file is in root directory.

codeigniter 4 login page

If you have not already copied env file to .env file, make a copy of env to .env. Open .env file in notepad and go to the line containing "# CI_ENVIRONMENT = production". Now copy this line and paste it as next line, then update the environment from production to development and remove # from the beginning of the line. See below:

Test the Application

You can test the application using built-in PHP server or you can use Apache web server if you are using xampp.

Test using PHP built-in server

Open command prompt and go to your CodeIgniter 4 project root. In my case it is D:/projects/customer. Then type php spark serve and enter. This will start the server in port 8080.

codeigniter 4 login form

Now open the browser and run http://localhost:8080/. This will open the home page.

codeigniter 4 login  and register

Click on Signup and do a successful signup. Then using the email and password as given during signup, try to login. You should be able to login successfully and see the message displayed on the screen with the name and logout link.

Also test the validation for signup and login. Just try to submit incomplete signup form and see the error messages displayed. You should test all types of validations used in the controller methods.

Test using Apache web server

If you are using XAMPP make sure your root folder is xampp/htdocs/customer, i.e., you have to install CI4 in this folder. Open httpd-vhosts.conf file in notepad from xampp\apache\conf\extra folder.

codeigniter 4 register form

Open the file in notepad and add below line at the end of it.

DocumentRoot "D:/xampp/htdocs/customer/public"

codeigniter 4 user registration

Save it and restart the Apache service from xampp controller.

Now in app/Config/App.php, update base url as below:

Open the browser and run http://localhost. You will see the home page as displayed below:

codeigniter 4 authentication

Do the same testing described above.

That's it! Our development and testing are done for this CodeIgniter 4 application. Hope you could successfully develop and test it.

download source code for registration and login in Codeigniter 4Download Source Code

I have put the code for controller, model and view in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can use the code as is or you can modify them as per your requirements.

Signup and Login in Codeigniter 4Conclusion

Developing Registration and Login forms can help you understand CodeIgniter 4 if you have just started working with it. You are using form validation, session library, database select/insert; quite a few areas. This gives you a better understanding of how CodeIgniter 4 works. Hope this was useful for you.