We Keep Coding

navigating through a page with a login page in between

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.
In server: Save information to cookie/session
In browser: Save information to session/local storage
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.

Login page go directly to cache because of cookies

I have a login button that opens a new window to a third-party login page. If i. Logged in first time, any time i refresh the page or open the website in a new tab when i click on the button it redirects me to the cached login response data, and i have to clear both my website and the login website cookies completely(website+external ones(google cookies.. etc))..
So is there is a way to force clearing all website data from javascript? Or any way to avoid this caching issue?
I have already tried to delete document.cookie but it only delete only the domain cookie not the external ones.

Generally, an app with a third party authentication flow is like from your app, you check the credentials in your cookie to see whether they are valid.
If they are not valid or do not exist, open the third party authentication dialog then login. After a successful login, mostly, the 3rd party auth should saved something in the cookie with its domain. And you also need to save something about credentials in the cookie.
If there are valid credentials in your cookie, then you are simply authorised and the credentials in the cookie should be good to use.
Back to your 2 questions, So is there is a way to force clearing all website data from javascript? Or any way to avoid this caching issue?
Why do you need to clear those data for the sake of authentication?
For the second question, I think I answered it already with the general introduction.

how to Logout Current user from Main Login Page and close all related tabs to that User

I have Client's website where only one user can be logged in, if another user try to login from another login page , it shows access denied. Now my client requested to put button on login page , when click on it , it will automatically logout the logged in user and closes all the related tabs.
following things in tried
Used LocalStorage Event (refereed from following Answer from Stack overflow)
How user will Logout from all open tabs automatically when user logs out in one of them
Problem: Dont Work in IE at all (as my client use only IE)
Used Sessions
Problem :same IE dont Support Session and LocalStorage
Passing a Javascript window reference to the session
https://bytes.com/topic/javascript/answers/861472-passing-javascript-window-reference-session
Problem: blocked by Browser , seems like we cant store window object to session.
Any Suggestion or Advice , how can i do this?

How to pass user information from server to webpage for a chrome extension?

I am building a chrome extension that would insert a login button on a webpage. When users click on the button, they will be directed to a login page and then redirected back. I would like to pass information during redirection.
Here is the sequence:
say cnn.com (on login button click)
[my Backend] /authenticate is called
(supported service) login page is displayed
[my Backend] /callback is called
redirect to cnn.com on success
I don't know how to pass the "user" info to the page or the extension on redirect, during this step [my Backend] /callback > redirect to xyz.com
I am inserting the button using content script. I am trying to find ways to send user info to the extension during redirection and store it for later use.

You can store the state of the user, and whether or not they should be logged in on a cookie on your own domain.
Chrome extensions allow you to access cookies on any domain you'd like, as long as you specify the correct permissions on your manifest.
Then, you can use the chrome.cookies API in order to access cookies on your own domain, even if your Chrome extension is running on a different web page. Remember to use chrome.cookies.get() / getAll() instead of document.cookie to properly access cookie data across domains.

Is there a reason you can't use an existing authentication scheme, such as SAML?

Cookie staying around after I delete it and refresh

I'm trying to remove the user's authentication cookie by using $cookieStore.remove('.ASPXAUTH'), but if I refresh the page afterwards, the cookie still exists and the page is still available instead of the user being redirected to the login page as I would expect.
Why is the user still able to view the page after I delete the authentication cookie and refresh the page?

I'm afraid that there isn't much you can do to a http-only cookie with javascript. The backend has to remove it if it's http-only. you can trigger a logout by using ajax.
$http.get("/logout");
The other option is to use non http cookie so you can modify it with javascript. But that would make it vulnerable and unsafe for risk of an XSS flaw grabbing your cookie and allowing your session to be hijacked.
PS: try HEAD request method if you don't want to load the page that follows (might work like an "do-and-forget-about-it")
$http.head("/logout");