SPA JWT stateless authorization

Hello,

I've been recently learning different ways to secure SPA's.

The first one which took my attention was the Oauth 2.0 extension called PKCSE. I liked it, but it has some disadvantages: where to securely store the access_token and long lived refresh_token ...(local storage in memory etc. is not a case because of XSS)

The second approach was to use a back-end for front-end server under the same domain (same nginx with routing all /api/* calls into my backend server). In this case the Oauth client will be my back-end server which can just implement the authorization flow.
At the end of it it will redirect browser to the SPA home page with the following COOKIE:

• ACCESS_TOKEN=API_ACCESS_TOKEN
• secure: true
• httpOnly: true
• SameSite: secure
• expire: API_ACCESS_TOKEN_EXPIRE

The cookie from the above will be included into the all AJAX requests from SPA to my back-end api (via nginx - same domain). Also it will mitigate the risk of XSS and CSRF attacks.

What do you think about this approach, do you have any better ideas of securing SPA ? Please share your thoughts.

Links:
https://www.pingidentity.com/en/company/blog/posts/2021/refresh-token-rotation-spa.html
https://stackoverflow.com/questions/20963273/spa-best-practices-for-authentication-and-session-management
https://curity.io/resources/learn/spa-best-practices/