I think I may be missing some context, so please forgive me if I don’t properly address your question.
The point of the SPA in this architecture is to act as a user interface with the API. It allows a user to log in, and based on that users permissions or roles, regulates what kind of access (or scopes) the user has with regards to the API.
I am not sure I understand where the other M2M is created after creating the API. The API should be acting as the M2M in this instance. The applications (SPA and API) will connect to each other via http requests that are authorized with an access token.
I am not seeing where the part mentioning the inputting of client id is, but it should be the client ID for the app that is making the request. If the request is coming from the SPA, then the respective client id should be used. Same goes for the API/M2M app.
The diagram on this doc does a great job of illustrating the configuration.
Please let me know if this makes sense, and if I can clarify further.
Thanks,
Dan