DEV Community: Ian Kamau

Building a multi-step form in Ruby on Rails

Ian Kamau — Wed, 14 May 2025 21:52:30 +0000

Many web applications require you to build a multi step form especially for things like user registration or checkout flow.
In this blog, we will walk through how to create a multi-step form in Ruby on Rails.

🧩 Why Use a Multi-Step Form?

Let’s quickly look at why you might want a multi-step form:

Increases completion rates as users are more likely to finish shorter steps than one long form.
Improves UX: Long forms can overwhelm users. Breaking them into steps makes the process feel lighter.

🛠️ What We’re Building

We’ll build a multi-step form for creating a user profile with the following steps:

Personal Info (name, email)
Address Info (street, city, state)

We’ll implement this using only core Rails features — leveraging Turbo Frames and Turbo Streams from the Hotwire stack — to create dynamic, multi-step forms without full page reloads or third-party gems.

📦 Prerequisites

Basic knowledge of Rails controllers, views, models, and forms
Basic knowledge of turbo_frame_tag and turbo_stream

🚀 Step-by-Step Implementation

Create a new app

rails new multistep_form_app
cd multistep_form_app
rails db:create

Scaffold User

This will create the controller, views, model, migration and also update the routes file

rails generate scaffold User name:string email:string street:string city:string state:string
rails db:migrate

Update root route to root "users#index"

And your page should look like this

Multi step logic

Now we want the new.html.erb view file on app/views/users/ to be a multi form.

Step 1 - Split the form partial

In the form partial, update the route and wrap both the name and email fields in a turbo_frame_tag "step1"

It should be like this

Step 2 - Create step2 partial

In app/views/users create a new partial file and name it _step2.html.erb. This is where we will have Address information and submit button.

Add the following code to it

Step 3 - Create collection route on user resource

Add a collection to the users resource route.
This route will be used when submitting each step of the form.

resources :users do
    collection do
      post "next_step"
    end
  end

Step 4 - Create next_step method on users_controller.rb

Add this method to users_controller.rb

def next_step
    @name, @email, @next_step = params.values_at(:name, :email, :step)
    respond_to do |format|
      format.html
      format.turbo_stream
    end
  end

On the next_step method, we will grab and save both name and email and also the current step.
We will be using turbo_stream to replace step1 contents with step2 contents

Final step

On app/views/users create a file next_step.turbo_stream.erb and add the following code to it

<%= turbo_stream.replace "step#{@next_step.to_i}" do %>
  <%= render partial: "step#{@next_step.to_i + 1}", locals: { name: @name, email: @email } %>
<% end %>

The code above basically replaces anything with turbo frame tag "step#{@next_step.to_i}" which in our case is step1with the partial file we created earlier step2.

It also passes the 2 variable (name & email) to the partial.

Now with that, you can create a new user.

Your final form should look like this

✅ Optional Enhancements

Add validation logic before proceeding to the next step
Allow users to go back to previous steps
Style the form with Tailwind or Bootstrap
Add a progress indicator

Access Source Code here https://github.com/Iank-code/multi_step_form_rails

How to define and use Rails Concerns

Ian Kamau — Wed, 09 Oct 2024 06:40:03 +0000

A Concern is a module that you extract to split the implementation of a class or module instead of having a big class body.
A Rails concern is just a plain Ruby module that extends the ActiveSupport::Concern module provided by Rails.

Key Characteristics of Concerns:

Modularity: Concerns break down complex classes into similar, more focused units, improving code readability and understanding.
Reusability: A concern can be reused across multiple classes, reducing code duplication and promoting DRY principle.
Maintainability: Concerns can be easily extended or customized to fit specific use cases, offering flexibility and adaptability.
Testing: Concerns can be tested independently, ensuring their correctness and reliability.

Creating a concern:

Create a new Ruby module file in your app/controllers/concerns
Extend the ActiveSupport::Concern module to make it a Rails concern.
Define methods or class methods that encapsulates the desired functionality
Use the included block to automatically include the concern's methods in classes that include it.

Example

# app/controllers/concerns/searchable.rb
module Searchable
  extend ActiveSupport::Concern

  included do
    scope :search, ->(query) { where("name ILIKE ?", "%#{query}%") }
  end
end

Example using a Concern:

class Product < ApplicationRecord
  include Searchable
end

Mastering Next-Auth: Your Comprehensive Guide to Next.js Authentication

Ian Kamau — Fri, 31 May 2024 15:16:14 +0000

NextAuth.js is a complete open-source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless

NextAuth has authentication providers that allow your users to sign in with their favorite preexisting logins. You can use any of our many predefined providers, or write your own custom OAuth configuration.

In this blog, we will use NextAuth to authenticate using Google

To begin, you need to have already set up a Nextjs application.
First thing to do is to install next-auth using this command

npm install next-auth

Add API route

To add NextAuth.js to a project create a file called route.ts in /app/api/auth/[...nextauth]/

/app/api/auth/[...nextauth]/route.ts

We want all routes pointing to app/api/auth/ to be caught that is why we use [...nextauth]

In /app/api/auth/[...nextauth]/route.ts, add the following code

// src/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// Define your NextAuth options
const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_API_SECRET!,
      authorization: {
        params: {
          prompt: "consent",
          access_type: "offline",
          response_type: "code",
        },
      },
    }),
  ],
  // ...add more providers here
};

// Create the NextAuth handler
const handler = NextAuth(authOptions);

// Export the handler for both GET and POST requests
export const GET = handler;
export const POST = handler;

Create .env.local

You can get both GOOGLE_CLIENT_ID and GOOGLE_API_SECRET in https://console.cloud.google.com/apis/dashboard

GOOGLE_CLIENT_ID="<YOUR GOOGLE CLIENT ID>"
GOOGLE_API_SECRET="<YOUR GOOGLE API SECRET>"

Configure Shared session state

You will need your children in app/layout.tsx with

It should look like this

"use client"
import { Inter } from "next/font/google";
import "./globals.css";
import { SessionProvider } from "next-auth/react";

const inter = Inter({ subsets: ["latin"] });
import "./globals.css";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
          <SessionProvider refetchInterval={5 * 60}>
            {children}
          </SessionProvider>
      </body>
    </html>
  );
}

By using refetchinterval you ensure that the session data is refetched every 5 minutes, which helps in maintaining the accuracy and security of the session state in your Next.js application

Frontend - Add React Hook

We have done with all the configurations, the only thing remaining is to add the sign up and sign out buttons

We use the useSession() React Hook in the NextAuth.js client to sign in, check if someone is signed in and sign out.

In components/navbar.tsx import useSession() and add the following code

import { useSession, signIn, signOut } from "next-auth/react"

export default function Navbar() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut({callbackUrl: "/"})}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn("google")}>Sign in</button>
    </>
  )
}

we can get current user's information from the data provided here const { data: session } = useSession()

With that, you users can successfully login using their google accounts

Creating a custom logger in Node JS using Winston

Ian Kamau — Thu, 11 Apr 2024 14:02:57 +0000

Hello fellow developers,

I am excited to share with you how you can use winston to develop a custom logger for your node js application. This is beginner friendly and anyone can follow.

Let's get started:
Create an empty directory:

mkdir node-logger
cd node-logger
code .

Open the terminal inside the VS code
Initialize package.json:

npm init -y

Install express, dotenv, winston and nodemon:

npm install --save-dev express dotenv winston nodemon

create the index.js file:

touch index.js

After creating index.js go to package.json and add the start script inside scripts:

"scripts": {
    "start": "nodemon index.js",
  },

In index.js lets set up the basic server configuration using Express.

const express = require("express");
const dotenv = require("dotenv");
dotenv.config();

const PORT = process.env.PORT || 8000;
const app = express();

app.listen(PORT, ()=>{
  console.log(`listening on http://localhost:${PORT}`)
});

Let us now create the .env file:
touch .env
Now add your environment variables inside your .env file:

PORT=8000
NODE_ENV=development

With that done, in the terminal inside your VS code, create a folder utils and inside utils create a file called logger.js:

mkdir utils
cd utils
touch logger.js

In logger.js, lets write the logging logic. First let us import winston and configure dotenv:

const winston = require("winston");
const dotenv = require("dotenv");
dotenv.config();

Then we will define our security levels:

const levels = {
  error: 0,
  warn: 1,
  info: 2,
  http: 3,
  debug: 4,

}

const level = () => {
  const isDevelopment = process.env.NODE_ENV || "development";
  return isDevelopment ? "debug" : "warn";
};

We will define different colors for each level and tell winston to use those colors:

const colors = {
  error: "red",
  warn: "yellow",
  info: "green",
  http: "magenta",
  debug: "white",
};

winston.addColors(colors);

After that, select the aspect of our logging process to customize the log format:

const format = winston.format.combine(
  winston.format.timestamp({
    format: "YYYY-MM-DDTHH:mm:ss",
  }),

  winston.format.colorize({ all: true }),

  winston.format.printf(
    (info) => `${info.timestamp} ${info.level}: ${info.message}`
  )
);

Let's define the transports that the logger must use for printing out messages:

const transports = [
  // Allow the user to console/print the message
  new winston.transports.Console(),
  // Allow to print all error level messages inside the all.log file
  new winston.transports.File({
    filename: "logs/error.log",
    level: "error",
  }),

  // Allow to print all messages inside the all.log file
  new winston.transports.File({
    filename: "logs/all.log",
  }),
];

Configure the transports that the logger needs to employ for displaying messages:

const Logger = winston.createLogger({
  level: level(),
  levels: levels,
  format: format,
  transports: transports,
  exitOnError: false,
});

module.exports = Logger;

In your index.js import logger from logger.js:

const Logger = require("./utils/logger");

replace console.log with Logger.http
Finally, start the server:

npm start

Enhancing API Security: Best Practices for Developers

Ian Kamau — Tue, 09 Apr 2024 14:07:12 +0000

APIs (Application Programming Interfaces) have become a cornerstone of modern software development, enabling seamless communication and integration between different systems and services. However, with this increased connectivity comes the need for robust security measures to protect sensitive data and prevent unauthorized access. In this blog post, we'll explore various strategies and best practices for enhancing API security to ensure the integrity, confidentiality, and availability of your applications.

Understand the Risks

Begin by identifying potential security threats and vulnerabilities specific to your API. Common risks include injection attacks, authentication flaws, insufficient encryption, and improper error handling.
Conduct a thorough risk assessment to evaluate the potential impact of these threats and prioritize security measures accordingly.

Implement Authentication and Authorization

Require strong authentication mechanisms such as API keys, OAuth tokens, or JWT (JSON Web Tokens) to verify the identity of clients accessing your API.
Implement fine-grained authorization controls to restrict access to authorized users and limit privileges based on roles and permissions.

Use HTTPS for Secure Communication

Encrypt data transmitted between clients and the API server using HTTPS (HTTP Secure) protocol.
Utilize SSL/TLS certificates to establish a secure connection and prevent eavesdropping, man-in-the-middle attacks, and data tampering.

Apply Input Validation and Sanitization

Validate and sanitize all input received from clients to prevent injection attacks such as SQL injection, XSS (Cross-Site Scripting), and command injection.
Use parameterized queries, input validation libraries, and output encoding techniques to mitigate these vulnerabilities effectively.

Employ Rate Limiting and Throttling

Implement rate limiting and throttling mechanisms to prevent abuse, DDoS (Distributed Denial of Service) attacks, and ensure the availability of your API.
Set appropriate limits on the number of requests per time interval and enforce usage quotas for individual clients or IP addresses.

Secure Data Storage and Transmission

Encrypt sensitive data at rest using strong encryption algorithms and secure key management practices.
Implement secure transmission protocols and avoid transmitting sensitive information, such as credentials or personal data, in plaintext.

Monitor and Log Activity

Implement comprehensive logging mechanisms to record API activity, including requests, responses, errors, and security-related events.
Monitor logs regularly for suspicious or anomalous behavior, such as unusual traffic patterns, unauthorized access attempts, or error responses.

Stay Updated and Patch Vulnerabilities

Keep your API dependencies, frameworks, and libraries up-to-date to address known security vulnerabilities and mitigate emerging threats.
Subscribe to security advisories, follow best practices for secure coding, and proactively patch any identified vulnerabilities in a timely manner.

Unveiling the Power of React.js: A Comprehensive Guide

Ian Kamau — Mon, 15 Jan 2024 16:21:50 +0000

In the ever-evolving landscape of web development, React.js has emerged as a game-changer. Developed and maintained by Facebook, React.js, or simply React, is a JavaScript library for building user interfaces. Whether you're a seasoned developer or just starting your journey in the world of web development, understanding React.js is a valuable asset. In this comprehensive guide, we will explore the key concepts, advantages, and best practices that make React.js a top choice for building dynamic and responsive web applications.

Getting Started with React.js

What is React.js?

At its core, React.js is a declarative, efficient, and flexible JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of an application efficiently. React's component-based architecture promotes a modular and maintainable codebase, making it easier to build and scale complex applications.

The Virtual DOM

One of the standout features of React.js is the Virtual DOM. Instead of updating the entire DOM when changes occur, React uses a virtual representation of the DOM to identify the minimal changes required. This results in improved performance and a smoother user experience.

Core Concepts

Components

In React, everything is a component. Components are the building blocks of a React application, representing different parts of the user interface. Whether it's a button, form, or an entire page, each can be encapsulated within a reusable component.

JSX - JavaScript Syntax Extension

React utilizes JSX, a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. JSX makes it more intuitive to describe what the UI should look like.

const MyComponent = () => {
  return <div>Hello, React!</div>;
};

State and Props

State and props are fundamental concepts in React. State represents the internal data of a component, while props are external inputs passed to a component. Understanding how to manage state and props is crucial for building dynamic and interactive applications.

Advantages of React.js

Reusability

With React, you can create reusable components, making it easier to maintain and scale your application. This reusability not only improves development speed but also ensures consistency across your project.

Virtual DOM for Performance

React's use of the Virtual DOM significantly improves performance by reducing the need for direct manipulation of the actual DOM. This results in faster rendering and a smoother user experience, particularly in complex applications.

Strong Community Support

React has a vast and active community, providing an abundance of resources, tutorials, and third-party libraries. Whether you're a beginner or an experienced developer, the React community is a valuable asset for learning and problem-solving.

Best Practices

Component Lifecycle Methods

Understanding the component lifecycle is crucial for managing side effects, fetching data, and optimizing performance. Familiarize yourself with methods like componentDidMount and componentWillUnmount to handle various stages of a component's life.

State Management with Hooks

Introduced in React 16.8, hooks revolutionized state management in functional components. Embrace hooks like useState and useEffect to simplify state management and side effect handling.

Component Organization

Keep your components organized and modular. Follow a clear folder structure and naming conventions to enhance readability and maintainability.

Conclusion

React.js has become a cornerstone in modern web development, empowering developers to build dynamic and efficient user interfaces. Whether you're creating a small project or a large-scale application, React's declarative syntax, component-based architecture, and vibrant community make it a powerful tool in your development arsenal.

This guide has provided a glimpse into the world of React.js, but there's always more to explore. Dive into the official documentation, experiment with building projects, and leverage the wealth of resources available in the React community to enhance your skills. Happy coding!

Understanding React Routing Using React Router

Ian Kamau — Fri, 05 Jan 2024 22:55:10 +0000

React Router: React Router is a library for handling navigation in a React application. It enables the navigation of different components in a React application, making it possible to create a Single Page Application (SPA) where the page doesn't reload when navigating between different views.

Exploring Page Navigation with React Router: A Practical Guide

In this blog post, I'll guide you through the process of seamlessly navigating between pages using React Router.

Getting Started: Setting up a React Application with Vite JS

To begin your journey, let's create a new React application using Vite JS. Open your terminal and enter the following command:

npm create vite@latest

You will be prompted to choose a few things, make sure that you choose react and javascript.

The React Router Experience

Once your React application is up and running, we'll dive into the world of React Router. Learn how to efficiently move between pages, enhancing the user experience of your application.

Ready to embark on this journey? Let's get started!

After the project has been created, install the dependencies and open it on the vs code or the code editor of your choice.

cd react-navigation
npm install
code .

When the project is opened on your code editor, install react-router using the following command

npm install react-router-dom

When its completed, navigate to App.jsx and write the code in this image.

Here we are importing Link from react-router-dom. Link is similar to an a tag and is used in navigation.
Then open the src directory and create a folder and name it as pages.

Inside src/pages create a file name it About.jsx and write the code in this image.

Navigate to main.jsx. This is where we will set up our navigation.
To start, we will have to

import About from ./pages/About.jsx.

import About from "./pages/About.jsx";

import createBrowserRouter and RouterProvider from react-router-dom.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "./pages/About.jsx";

Create our router

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

We use createBrowserRouter to create our routes which accepts an array of objects each having a path and an element

Replace <App /> inside the <React.StrictMode></React.StrictMode> with RouterProvider and placing the router inside it.

<React.StrictMode>
    <RouterProvider router={router} />
</React.StrictMode>

Ruby on Rails Pagination

Ian Kamau — Fri, 24 Nov 2023 21:48:45 +0000

Hey Rubyist!

I'm excited to share with you a streamlined approach to implementing pagination in your Ruby on Rails blog application. Pagination can be a bit tricky, but fear not! The Ruby community has gifted us with a gem that simplifies the process.

Let's get started:

Create a new Ruby on Rails application:

   rails new <name_of_your_project>
   cd <name_of_your_project>

Generate a scaffold for your blog posts:

rails generate scaffold Post title:string content:text

Using a scaffold is convenient as it creates everything from controllers to views to models, saving you time.

Perform migrations:

rails db:migrate

This ensures your database is set up with the new Post model.

Open application_controller.rb and include the following code:

include Pagy::Backend

In application_helper.rb, add:

include Pagy::Frontend

Create a file named pagy.rb in the config/initializers folder, and insert:

Pagy::DEFAULT[:items] = 5

Here, we specify that we want 5 items/posts per page.

Update the index method in posts_controller.rb:

def index
  @pagy, @posts = pagy(Post.order(created_at: :desc))
end

This code fetches a paginated list of posts ordered by creation date in descending order, storing pagination information (@pagy) and the posts (@posts) in instance variables.

In views/posts/index.html.erb, add:

<div>
    <% @posts.each do |post| %>
        <h2>
            <%= link_to post.title, post %>
        </h2>
    <% end %>

    <div>
        <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
    </div>
</div>

This template iterates through the collection of posts, displaying each post's title as a link. If pagination is necessary (more than one page), it displays the pagination navigation at the bottom.

Now you have a robust pagination setup for your Ruby on Rails blog application! Remember to test thoroughly, consider alternative gems like kaminari if needed, and keep an eye on gem updates for any improvements or changes.