How to Build a Secure Password Manager with Next.js, Clerk, Tailwind CSS & Shadcn UI

With the increasing number of online accounts, having a password manager is essential to securely store and manage passwords. In this guide, we’ll walk through building a secure password manager using Next.js, Clerk, Tailwind CSS & Shadcn UI. These modern web development tools ensure security, scalability, and a sleek user interface.

By the end of this tutorial, you’ll have a working password manager that integrates Clerk for authentication, Next.js for the backend, Tailwind CSS for styling, and Shadcn UI for an elegant design.

Why Use Next.js, Clerk, Tailwind CSS & Shadcn UI?

Each technology plays a crucial role in building a secure and modern password manager:

• Next.js – A React framework with server-side rendering (SSR) and static site generation (SSG) for a fast and secure application.
• Clerk – Provides robust authentication and user management out-of-the-box.
• Tailwind CSS – A utility-first CSS framework that makes styling fast and efficient.
• Shadcn UI – A modern UI component library that blends well with Tailwind CSS.

Also Read: Top 10 Python Online Compilers with All Modules: Code Seamlessly Anywhere

Setting Up Your Next.js Project

First, let’s create a new Next.js project:

npx create-next-app@latest password-manager
cd password-manager

Next, install the necessary dependencies:

npm install @clerk/nextjs tailwindcss shadcn-ui

Initialize Tailwind CSS:

npx tailwindcss init -p

Configure tailwind.config.js by adding Shadcn UI support:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Also Read: 10 Best Resources to Learn SQL for Free: Master Database Skills Today

Setting Up Clerk for Authentication

To enable user authentication, sign up for Clerk at https://clerk.dev and create a new project.

Then, add Clerk to _app.js:

import { ClerkProvider } from "@clerk/nextjs";

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;

Create Sign-In & Sign-Up pages using Clerk components:

import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
  return <SignIn />;
}

Also Read: SQL vs MySQL vs NoSQL: Key Differences, Advantages, and When to Use Each

Creating the Password Manager UI with Shadcn UI & Tailwind CSS

Now, let’s design a simple password storage UI.

First, create a component for adding new passwords:

import { useState } from "react";

export default function AddPassword() {
  const [password, setPassword] = useState("");

  return (
    <div className="p-4 bg-gray-100 rounded-md shadow-md">
      <input
        type="text"
        placeholder="Enter password"
        className="border p-2 rounded w-full"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button className="mt-2 bg-blue-500 text-white p-2 rounded">
        Save Password
      </button>
    </div>
  );
}

Use Shadcn UI components for a modern look:

import { Button } from "shadcn-ui";

export default function SecureButton() {
  return <Button variant="outline">Secure Button</Button>;
}

Storing Passwords Securely with Next.js API Routes

To store passwords securely, create an API route in pages/api/storePassword.js:

import { hash } from "bcryptjs";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const { password } = req.body;
    const hashedPassword = await hash(password, 10);
    
    // Store hashedPassword in a secure database (MongoDB, PostgreSQL, etc.)
    
    res.status(200).json({ message: "Password stored securely!" });
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

Fetching Stored Passwords from the Database

Retrieve stored passwords in pages/api/getPasswords.js:

export default async function handler(req, res) {
  if (req.method === "GET") {
    const passwords = []; // Fetch passwords from your database

    res.status(200).json(passwords);
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

Encrypting & Decrypting Passwords

To enhance security, use crypto-js for encryption and decryption:

npm install crypto-js

Modify the API route to encrypt passwords before storage:

import CryptoJS from "crypto-js";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const { password } = req.body;
    const encryptedPassword = CryptoJS.AES.encrypt(password, "your_secret_key").toString();
    
    // Store encryptedPassword in the database
    
    res.status(200).json({ message: "Password encrypted & stored!" });
  }
}

For decryption:

const decryptPassword = (encryptedPassword) => {
  return CryptoJS.AES.decrypt(encryptedPassword, "your_secret_key").toString(CryptoJS.enc.Utf8);
};

Deploying the Password Manager

To deploy, use Vercel (recommended for Next.js apps):

npx vercel

Follow the setup instructions to host your password manager online.

FAQs

Conclusion

Building a secure password manager with Next.js, Clerk, Tailwind CSS & Shadcn UI is a great way to learn modern web development while ensuring password security. By following this guide, you can create a secure and visually appealing app that encrypts user passwords and stores them safely.

Ready to build your own password manager? Start coding today!