Locking Web Pages in Nextjs: App-Lock Style Security

3 min readOct 19, 2024

In this blog post, we will explore how to implement a web page lock that functions similarly to an app lock.

The feature of unlocking the app using a password will be the same for a Next.js web page — you must input the password to access the page.

The Flow of unlocking a page will be:
After you visit the locked route, you will see a button. Once you click it, a modal will pop up with an input field where you can enter your password. After entering the password, click “Verify.” If the password is correct, your private content will be fetched.

Prerequisites:

Basics of Nextjs Components.
Basics of Tailwind CSS.
Shadcn Library.

Let’s begin.

Step 1: Install React-hot-toast, the Shadcn library, and some components, such as Dialogue, Button, and Input.

npm install react-hot-toast
npx shadcn@latest init

After running this command you will be asked some questions like:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

Select your preference or press enter. This is inconsequential for learning purposes.

After this, paste some commands to install the components

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add input

Now add the react-hot-toast in your main “layout.jsx” to use it over the application.

import { Toaster } from "react-hot-toast";

<body>
  <Toaster />
  <Header />
  {children}
  <Footer />
</body>

Finally, you are ready to move forward.

Step 2: Create a route named “private” or any other name and place the code below inside.

import Content from "@/components/private/Content";
import PasswordProtected from "@/components/private/PasswordProtected";

export const metadata = {
  title: "Private",
  description: "You are accessing the private page",
};
export default function Private() {
  return (
    <PasswordProtected>
      <Content />
    </PasswordProtected>
  );
}

Step 3: Inside your “components” folder create a new folder “private”.
This is just a name for our reference you can name this as you want.

Place the below codes on the particular components.

components/private/Content.jsx

export default function Content() {
  return (
    <>
      <div>This is a Private Content</div>
    </>
  );
}

components/private/PasswordDialog.jsx

"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import toast from "react-hot-toast";
export default function PasswordDialog({ setShowContent }) {
  const realPassword = "your-password";
  function verifyPassword(e) {
    toast.error("Incorrect Password");
    e.preventDefault();
  }
  function inputPassword(e) {
    if (e.value == realPassword) {
      setShowContent(true);
      toast.success("Unlocked");
    }
  }
  return (
    <>
      <Dialog>
        <DialogTrigger asChild>
          <Button className="w-full" variant="outline">
            This Content Is Private! Click if you know password
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Locked</DialogTitle>
            <DialogDescription>Enter the password to unlock</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <form className="w-full" onSubmit={verifyPassword}>
              <div className="grid grid-cols-4 items-center gap-4">
                <Input
                  onKeyUp={(e) => inputPassword(e.target)}
                  id="password"
                  type="password"
                  className="col-span-3"
                />
                <Button type="submit">Verify</Button>
              </div>
            </form>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}

components/private/PasswordProtected.jsx

"use client";

import { useState } from "react";
import PasswordDialog from "@/components/private/PasswordDialog";
export default function PasswordProtected({ children }) {
  const [showContent, setShowContent] = useState(false);
  if (!showContent) {
    return <PasswordDialog setShowContent={setShowContent} />;
  }
  return <>{children}</>;
}

After pasting the above codes and following the proper steps, you should have a lock functionality on your web.

This is how we can have this app lock-type feature in our Nextjs application.

Feel free to comment if you have any recommendations.

Keep coding and exploring ❤️

Locking Web Pages in Nextjs: App-Lock Style Security

Written by Raiyan Memon

No responses yet