Allow user to password protect a page

Is there a secure way to allow a user to password protect a page? In my app, users create a profile page of sorts that is publicly accessible (doesn’t require login or a user account to access). I would like to add the option for users to password protect the page so it can only be accessed by those with whom the user has shared the passcode, but not require the visitor to create an account.

I’m doing this currently by allowing the user to set a passcode in their settings. Then, on the profile page, I have the content hidden on page load, a pop up appears asking for the passcode, and if the passcode matches the one set on the backend by the user, the pop up is hidden, and the content is displayed.

This all works well functionally, but it’s not very secure. When looking at the source code of the page, you can easily find the passcode that was set by the user and the content that’s on the page.

In the privacy settings, I can make the passcode not visible for general visitors, but this breaks the process of entering the passcode (since the passcode isn’t accessible, it can’t tell if the passcode entered matches the one set by the user).

Is there any way to make this work in a relatively secure way?

Trap it on Workflow “Page Load” area

Thanks for the response @melon, but would you mind elaborating a little more on what you mean?