We are going to use Ory Hydra as OAuth server but we have to implement our own UI part of it (login page). Here is example implementation from Ory Hydra docs https://www.ory.sh/hydra/docs/guides/login#implementing-the-login-html-form. However it's very inconvenient for us to use server-side rendered HTML for login page. Instead we would prefer to implement it as SPA + API. So on auth.mycompany.com/login there would be SPA that would call (ajax) POST auth.mycompany.com/api/login (instead of making top-level navigation POST). This API woudl call hydra admin API. Then in case of success SPA would receive redirect URL in response (returned from Ory Hydra admin API) to which it would redirect user (frontend redirect instead of HHTP redirect).
From security perspective are there any downsides of implementing OAuth login page as SPA/API instead of server-side rendered HTML? I am thinking about CSRF (server side rendered HTML can be returned with CSRF token injected into the form) but as far as I know it can be also done securely with SPA + API?
I am thinking specifically about SPA served from CloudFront, while /api/* requests would be configured on CloudFront to be reverse-proxied to API server.
Every OAuth login page I saw (like id.heroku.com, login with github, login with google) are rendered on server side and make top-level navigation not ajax requests. But I am not sure this is because it's recommended or it's just that they use server-side rendered HTML technologies.