How do I create a page that is password protected

Ask the community
1

Hi,
I would like to create a page that is only accessible through a password.
So I can send it to Press etc. and give them the password but no one else would be able to access it on my site.

Thanks in advance

2

I might need a little more context. Do your users have an account? If yes, you can add anything you want for just them to see behind a conditional filter. If I am completely off track please provide a little bit more context :slight_smile:

1 Like
3

Hi thanks for the response I just want it to be able to be accessed by anyone with just a generic password they don’t need to be able to log in or anything just enter a password. Ideally I would want it as a hidden page on my site so that as long as they have the URL they can access it but you cannot see it if you don’t have that URL is that possible?

4

The reason being is it’s to promote music and I only want Press Radio stations etc. to be able to download the music / press releases etc. for free not everyone that visits my site.

5

Hi!
You can perform it with custom code.
Though it is not really secure. It is just a basic password protection feature.

In your footer custom code, inside the page settings insert this:

<div id="overlay">
    <div id="access-box">
        <p>Enter the code to access the page:</p>
        <input type="text" id="access-code" placeholder="Enter access code">
        <button onclick="checkCode()">Submit</button>
    </div>
</div>

In your header custom code, inside the page settings, insert this:

<style>
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #182939;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#access-box {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#access-box input {
    padding: 10px;
    width: 80%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#access-box button {
    padding: 10px 20px;
    background-color: #182939;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#content {
    display: none;
}

</style>

<script>
function checkCode() {
    const enteredCode = document.getElementById('access-code').value;
    const correctCode = "access-1556-ky";

    if (enteredCode === correctCode) {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('content').style.display = 'block';
    } else {
        alert('Incorrect code. Please try again.');
    }
}
</script>

The code is static and you can find it (and change it obviously!) at line 4 in the scripting section of the code.

I tried to make everything more or less customizable in terms of design (in the style part of the code for the design and in the html/div part of the code for the copywriting.

Again: super basic password protection, the code to enter can be found by a tech savvy person that knows how to search in the developer console of the browser (as all of this is coded in the frontend).

A little more safe version would be to Base64 encode the code to enter
 But still something any tech savvy would know how to crack.

Hope this helps!

1 Like
6

Why not just creating a single user and protecting that page to specific user/group ?

1 Like
7

Excellent idea, and more secure :sweat_smile:!
This way the sign-in process can be made as a generic email+generic password protected setup.
Without exposing anything in the frontend.

Or just send the magic link of this fake/generic user to press, radio stations


1 Like
8

Sorry I’m very new to softr how would I go about creating what you suggested with a specific user / group and login?

9

Create a User Group, with a name like “Press” or similar that suits your terminology.

Then add a User (you need a dedicated email address for this) and generate a Magic Link.

Now design your page(s) and follow the section (link above): Set block and page visibility for your user group

Once you are happy that you have your pages/blocks ready for your users, send them all the same single Magic Link you have already generated.

1 Like
10

I’ve followed the steps above but the magic link doesn’t seem to log them in so the site is missing that page. I assume if it logged them in automatically then I would be able to see it as I’ve clicked the link. Do I understand that correctly or have I missed something important? Thanks again,

11

The Magic Link should take you to the page set as Home in Softr.

Check the Home page visibility settings are enabled for the user group that the Magic Link applies to, and check that any blocks on the Home page are visible to either All logged in users or include the specific User group that the Magic Link applies to.

12

I’m Hoping to have it take them to the ‘Press’ page is there a way for the magic link to do that?

13

Yes, I do that using an Airtable formula to take the user’s Magic Link (from my Airtable {Magic Link} field), and add the page address to the end of the link. The syntax is:

{Magic Link} & “&next-page=/DESTINATIONPAGE”

I’m assuming your DESTINATIONPAGE address would be “Press”:

{Magic Link} & “&next-page=/Press”

14

This can work but a page rule for the user group would also do the trick

Capture d’écran 2024-08-23 151123
Capture d’écran 2024-08-23 1511231316×777 73.4 KB



Capture d’écran 2024-08-23 151139
Capture d’écran 2024-08-23 1511391698×797 120 KB

1 Like
15

Fantastic thank you the page rules worked well for me thanks so much for all your help I’ve learned a lot about what Softr can do it’s really good.

1 Like