I am curious of the correct authentication/authorization setup for using Okta. My requirement is I want to use the Okta sign on widget so I can host the sign on experience on my web page. I do not want my frontend or anyone to be able to access my web api controllers unless they have been authenticated via my frontend SPA. My frontend is a VueJS SPA and this is hosted using azure static web app under my primary domain. Then this frontend pulls data from my backend API via axios/fetch calls which is a ASP.NET Core Web API hosted on Azure app services under a separate domain. This API does call other APIs (MS Graph API) but only as a service account so there is nothing being done on behalf of the signed in user. Despite my frontend and my backend being separate domains and hosted separately, they do work together in a sense to make a complete web application. So should i be choosing OIDC - OpenID Connect and then Web application for type?

Or should I need to create two separate applications in Okta one for service API for my web api and then the other OIDC and the type being set to SPA?

Any other settings I should check to meet the requirements above?