I would like to understand how to implement authorization on a single page application. I’m going to explain my current understanding of SPA authorization below and please point out where I’m incorrect or where my understanding needs clarity or improvements.
1 - Never use Client-Side Authentication as it is not reliable
2 - Always use Server-Side Authentication using Server-Side framework
3 - Use SSL/TLS Encryption
4 - Users can see page contents only after they are authenticated
I am not planning to use Angular, React, or Node.js to create my SPA. Instead I would like to use plain vanilla Javascript for the client side as it will give me a chance to truly learn and understand how the authorization works. I’m planning to use ASP.net Web API for authentication purposes. I don’t yet know how I’m going to implement point number 4 and prevent users from seeing page contents if they are not logged in.
One idea I had was to store page contents on the database. The user has to login by entering his username and password then send a request to the Web API which queries the user database table. If the user exists in the database and everything checks out, then the page contents are sent to the web page to be displayed. But I felt that is not how a single page app is supposed to work; a SPA is supposed to have all of its contents loaded all at once upon initial page load except most of the contents are hidden. Then when the user successfully logs in the page contents are displayed.
Please explain how to implement SPA authorization using token but without using Node.js, Angular, React, or Vue or point to a reputable site that talks about this. Thanks in advance.