How to make a very simple password protected screen

Code Help HTML/CSS/JS
1

I want to make a page password protected, and when you get it correct, you go to another page.

2

@BluebayStudios Sorry, I’m not an expert on HTML and its corresponding languages but in Python, you can use a Replit feature called Secrets that allows you to create things like passwords. For web pages I believe there’s also a feature called Authentication that allows you to do things like that.

1 Like
3

You can use a normal login system, then, check an if statement with a Secret (like what @CCodes said).
If you’re using Flask then I can help you.

2 Likes
4

I’m using vanilla JS. I’m not able to find anything online that works.

5

It doesn’t really need to be very hidden, I don’t really care if anyone gets it, because it’s for a game’s “lore” I guess. It’s meant to be solved.

6

You can’t do this without a backend, like Node.js Express or Python Flask.

7

Isn’t it just a simple script to have a text box that checks if you have the right code, and if you do it redirects you to another page? I didn’t know you needed a backend just for one password.

8

You only need a backend to prevent people from viewing the password. If you don’t care if people can find the password via page inspect, you can totally put it in the frontend JS and use a static repl.

3 Likes
9

If you really want a protected page in the frontend, have a hash function, a hashed value, and some encrypted url. It might be better to have a second backend though.

2 Likes
10

Yeah. How can I go about doing that?

11

So, then, what’s the point…?

You could make a form and when it’s submitted you can check if the password is correct

1 Like
12

I mean, it’s just for a game’s lore, and finding the code isn’t that difficult, so if players want to go into the source code and get it, they can go ahead.

That would be manual work, so I don’t really want to do that. :laughing:

13

Make an input of type text (ie. <input type="text">). Detect when the user clicks a button. When they do, make this code happen:

if (document.querySelector("input[type=text]").value=="myPassword") {
  location.href="/yourSecretPage.html"
}

Lmk if I need to be more specific.

1 Like
14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.