You should integrate both and in slightly different ways.
You should treat your API as an OAuth2 resource server (API’s section in Auth0) that authorizes access based on the availability of a valid access token included in each request. These access tokens would be included in the Authorization HTTP header, using the Bearer scheme and the API would perform validation on these tokens; more on this later.
The SPA would be treated as an OpenID Connect (OIDC) and OAuth2 client application (Clients section in Auth0). You could then use Auth0.js v8 library (using the authorize method) to perform an authentication and authorization request that would accomplish the following:
- redirect the end-user from your SPA to the Auth0 hosted login page associated with your account and that you can customize in accordance to your requirements;
- authenticate the end-user through the hosted login page;
- redirect the end-user back to your SPA with a response that includes both an ID token and an access token.
The received ID token would be validated by Auth0.js to ensure that the end-user did in fact authenticate and proved their identity. By customizing the original request you can request that certain information about the end-user be included in the ID token so that the SPA can reflect that on the UI (for example, show the email of the authenticated user).
The received access token would then be used in each request to your Rails API as a way for the SPA to perform authorized requests to the API on behalf of the authenticated user. In order to have an access token suitable to call your own API you would have included the audience parameter associated with that API in the original request.
When an access token is issued to your own API, it’s currently issued in the JWT format which allows the receiving API to both validate the token by itself, but to also at the same time receive as part of the JWT claims information about who the token is associated with. For example, it would include the end-user identifier in the subclaim.
Given access tokens expire, you could then use the renewAuth method in Auth0.js to renew the access token without forcing the user to input credentials again. This works as long as the end-user still has an active authenticated session at the identity provider. For this case, it would have because authenticating through the hosted login page ensures that session.
Reference documentation: