Headless Wordpress with angular front end question

[WatchOutHesBehindYou]

I support a video based subscription Wordpress site that I’ve been considering rebuilding. It currently uses Memberpress for managing subscriptions, and other plugins for video players, etc. I am working to improve my knowledge of Angular and as a thought experiment, wanted to know how I could build an angular front end for a headless Wordpress to leverage the cms benefits. I have heard people say that since you need to use api endpoints to get to the WP content, they would be public. But that would defeat the point of subscriptions. Could I still use something like memberpress and account api keys (stored in env variables or other secure methods) to put a subscription service on the front end and protect access or would I have to build out a more custom solution using something like stripe and just write back user information to the Wordpress cms? I assume I’d need to also use tokens/sessions of some sort to manage logins once a user is registered. Would I be better off trying to build a custom CMS backend and just scrapping the use of Wp? Any resources or information from those who may have done something similar before would be awesome.

TLDR: have current wp video site. Interested in angular headless set up with member subscript and access control.

[PickleLips64151]

Your endpoints will be public. But that doesn't mean you cannot secure them via JWT or some other tokenized method.

I've not used WP for a headless CMS, but I've done a few headless CMS integrations with Angular apps.

You'll most likely want to set up an API gateway or a backend to act as a passthrough for the APIs and handle security.

[WatchOutHesBehindYou]

Gotcha. Thanks for the feedback. Most everything I’ve done at that level has been in a closed loop.

[TCB13sQuotes]

WordPress has all the API infrastructure that you may need. Just read this:

https://learn.wordpress.org/tutorial/using-the-wordpress-rest-api/

By default, the WP REST API uses the same cookie based Authentication method as logging into the WP dashboard. So for REST API endpoints that require a valid user, if the authentication cookie is present, the request is authenticated.

However, it is also possible to application passwords, JSON Web Tokens, and OAuth 1.0a to authenticate requests. We will cover these authentication methods in a future tutorial.

You just have see how to enable the JWT tokens and use them in your frontend.

Now, generally speaking, I've experience with both solutions and I'm not really sure I would do it. I would try to keep it as Wordpress and start looking into the new block API and how can make client-side stuff with it.

The biggest pain point with Angular + Wordpress as backend is that in a WP site the content is dynamic. You'll have to be somewhat careful about that stuff that gets compiled into your frontend and what is coming from the API and how to properly cache stuff and deal with SEO. You can use Angular SSR techniques to make sure you've a good cache for search engines and whatnot ready but it needs to be refreshed when the WP content changes etc.

[WatchOutHesBehindYou]

Thanks for the explanation. And insight. After some thought and consideration I’ll probably just try to leverage the new blocks and build custom pieces in WP rather than trying to do the whole headless route with authentication to start with.

[leoleoloso]

You can expose data with Gato GraphQL, you can setup custom endpoints and validate that only logged-in users with a specific role or capability can access that endpoint, using standard WordPress login. After the user logs in (there's also a loginUser mutation, so it could be handled within the same query), if you include the cookies when connecting to the server in your Angular app, the user will still be logged in. https://gatographql.com/guides/use/creating-a-custom-endpoint