I understand that the first diagram indicates that I should use Id Tokens for a traditional old fashioned web app, and the second indicates that I should use Access Tokens for APIs.
Just to point out, the first diagram indicates that you should use Id Tokens for a traditional old-fashioned web app to get user information after authentication.
The second diagram indicates that you should use Access Tokens for being authorized to access APIs.
Two different goals!
The choice of a traditional web application in the first diagram is just for simplicity, to focus on a specific architecture avoiding discussing the different OIDC flows in the presence of different application types. The focus of this article is on the ID and access tokens, not the OIDC/OAuth2 flows.
That said, I hope I’ve caught the confusing point now and will try to clarify in the following.
What I don’t understand is why. What is the nature of a traditional web app that makes Id Tokens suitable for it, while APIs do not have that nature? If I refactor my web app so that is now API-centric, why is an identity token now unsuitable?
Before answering your question, I have to make a small digression.
OAuth2 is for delegated authorization, i.e., authorizing a third-party application to access a resource on behalf of a user. In the context of delegated authorization, you have three actors:
Actor 1: the user, the entity that wants to perform an action on an object.
Actor 2: the resource, the object that a user wants to use.
Actor 3: the application or client, the software that mediates the interaction between the user and the resource.
In this context, the API in the second diagram represents a resource (or a resource wrapper), i.e., Actor 2.
Both the web application in the first diagram and the client app in the second diagram represent the client, i.e., Actor 3.
So, in a delegated authorization scenario, the web application and the API depicted in those diagrams have different roles.
If you refactor a traditional web application into a SPA and an API, your SPA+API bundle doesn’t automatically generate a delegated authorization scenario. You can still consider your SPA+API application like a single application.
This scenario is known as a first-party authorization scenario. In this scenario, you can decide to use the ID token to call your own API, as the article explicitly tells:
“In a first-party scenario, i.e. in a scenario where the client and the API are both controlled by you, you may decide that your ID token is good to make authorization decisions: maybe all you need to know is the user identity.”
There are still some potential issues, but you can do it until you open your API to third-party clients.
Sorry for the length of the reply. Does it answer your question?