0

I'm making a side project building a web page levaring only on vanilla javascript. I pretent to have a login page and all the other pages require authentication. I already have a login page which obtains an authentication token upon a sucessfull login. However, I'm having problems in understanding/fiding what to do next. My questions are the following:

  1. How to keep the token across multiple pages? Save it where temporaly? I saw some people arguing that saving tokens is bad becase they are prone to be stolen.

  2. How to redirect the browser to the main page after the login with the token? From what I've seen, there are two ways to obtain a page: let the browser do it (e.g. by changing location) or use ajax. The first approach does not alloow to attach the token and the second obtains the html yet I'm unable to find a way to "update" the page accrodigy to that html. What I've been doing is document.write(new_html) but the DOM in the development window disapears after that and the windows.onload handler set whithin that html is not triggered. So, what is the correct way to use a token to implement a web site with authentication.

André Rosa
  • 121
  • 1
  • 11
  • Read this artile about authentication. Part II should answer your question. https://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication – Silvan Bregy Jun 29 '20 at 21:49
  • @silvan-bregy altough being a very usefull article, it does not answer what I asked. – André Rosa Jun 30 '20 at 13:22

1 Answers1

0

There are 2 ways to presist data in your browser:

  1. local storage
  2. cookies

Personally, the best approach I've came across so far is setting cookies by the server, which prevents user from messing with it, if you set appropriate flag.

As far as the front end is concerned:

  1. localStorage.setItem('token', 'my-token'); localStorage.getItem('token');
  2. document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";; document.cookie /* retrieves cookies */
Dmitriy Godlevski
  • 590
  • 1
  • 9
  • This only answers the first part of my question and does not address when local storage is better than cookies and vice-versa. – André Rosa Jun 30 '20 at 13:24
  • `1) How to keep the token across multiple pages? Save it where temporaly? I saw some people arguing that saving tokens is bad becase they are prone to be stolen.` : 1.1. use cookies or local storage. preferably set cookies via server, if you have access to servers source code. 1.2. see 1.3. do those people offer alternative or just argue for the sake of it? – Dmitriy Godlevski Jun 30 '20 at 15:19
  • `2) How to redirect the browser to the main page after the login with the token? From what I've seen, there are two ways to obtain a page: let the browser do it (e.g. by changing location) or use ajax. ...` 2.1 Once you store token in localStorage or cookies you are safe to close the browser and expect to see your stored token data once you relaunch it, therefore you may chose to redirect however you feel appropriate for your particular project with your particular code in your particular setting. – Dmitriy Godlevski Jun 30 '20 at 15:24
  • 1) OK. 2) after saving the token, I want to redirect the browser to the initial page. How is this redirection performed? Saying " however you feel appropriate for your particular project" is the same as saying nothing because I still do not now how to correctly redirect the browser with an authentication token. If I was developing a rest client, the that is easy (just send the token as an header). However, in a browser there are challenges that I do not know how to address (presented in the question). Can you further elaborate on that part? – André Rosa Jun 30 '20 at 16:39
  • 1
    Sure. Assuming we have received a token on a login page on a ajax response I would then `localStorage.setItem('token', my-token-var); window.location = '/'`, so redirect to a home (or any other) page via vanilla javascript. On the home (and every other) page I would run some sort of `function isLogedIn(){ const token = localStorage.getItem('token'); return token ? true : false }; const logedIn = isLogedIn(); if(logedIn){ console.log('I can now comment as there is a token to pass back to the server with my ajax request, for server to verify my authenticity') }` – Dmitriy Godlevski Jun 30 '20 at 17:08
  • if you are aiming to protect some pages from being previewed unless logged in, you would then have to obtain that content on the go via ajax request and make sure to verify the token on the server side before granting such ajax a response, as its not really protected otherwise. – Dmitriy Godlevski Jun 30 '20 at 17:17
  • Thank you for your answers. "if you are aiming to protect some pages from being previewed unless logged in" -> yes, it is what I'm after: full page and not just some information to fill templates that can be seen. Can I load js and css files with ajax in that way? the body is easy to fill with ajax however the head seems tricky. I don't want to expose the js of the pages. – André Rosa Jun 30 '20 at 17:35
  • You can create script and style elements with vanilla on the go, however I don't see why would you not want to show javascript without the auth, nevertheless to make it truly secure — you would once again have to involve the server to authenticate token before serving javascript and style you want to protect. If you have access to the server, why wouldn't you just set protected cookie on successful authorization and read of this cookie on every other request to make decision to wether or not serve the page. If you don't have access to the server — how is all of this 'protection' of any use? – Dmitriy Godlevski Jun 30 '20 at 17:53