How to set up authorization using js-SSR and SPA?

Question

HTTP Cookies

Hello!
I want to develop my own single page web application to deal with the modern and very volatile world of web development. In this case, I would like to use the page rendering technology along with the data on the server. However, there is an authorization problem.

Assuming the user is already logged in before, this is how I envision reopening the site:
1. First request: the client makes a request to the frontend server along with identification and authorization data (say, user id and token; the only option is to store them in a cookie ), the frontend server makes a request to the api server, passing this data, then the api server gives information about the user and the content of the current page (in the same json), the frontend server renders this into a ready page and delivers it to the client.
2. Subsequent requests: the client directly accesses the api server, passing the same (or updated after the first request) authorization data, receives json and processes it independently.

Actually, I want to go to the question. Am I understanding this interaction correctly? Can it be done differently/better? Are there tools that allow, for example, to use components of the frontend framework as MVC components of the backend framework, so that one server does the rendering without unnecessary requests? Or a unified tool that includes the same coding for the frontend and backend to solve these problems? I will say right away that I would not want to write a backend in JS.
I can roughly imagine how you can get by with one request when using AngularJS (with a module for single-page applications) and any backend MVC framework; although there will be no full-fledged rendering, search robots will not have to wait for my fetch, since the data will be delivered initially, for example, through the same data attribute. But in this case, I plan to choose Svelte (Sapper) and Ruby on Rails as a stack, although I think this is not important.
Thank you for your attention!

Answer 1

Basically, he did just that. The api server sets cookies that are not available from the web application by responding to an Ajax request (the most banal case is when logging into an account), and the next time the site is opened (with SSR), the frontend server simply forwards the necessary headers, including the header with cookies. As an api - rails (plus, perhaps something else will be added), as a frontend server - sapper.