I am developing a webpage using HTML, CSS & JS. In a section with a list of links, when a user clicks on any of the items in the list I want the user to first have to sign in before they continue on the path of the item they selected and I want to do this without having to duplicate a sign-in page for each stage. I want the link to first go to the login page(login.html) then continue or go back to the path it was on
the problem now is I don't know how exactly I can achieve this without creating multiple copies of the login page
You must persist user state somewhere, either in browser (not safe at all) or on server.
On every protected page visit check if user has been authorized by checking previously set flag. If it's not authorized, then redirect to login page. After successful authorization redirect back to requested protected page.