Separate backend (Symfony2) and frontend (AngularJS) REST - How to authenticate

Question

I really can't find a clear answer / approach to the following problems / questions:

I'd like to have a Symfony2 backend, probably with FOSRestBundle, which only returns JSON. The frontend will be written in AngularJS.

The user should either be able to register / login an account only for my website (option #1) or login via an existing OAuth account, like Google or Xing (option #2). Of course the authentication should / needs be stateless.

Since most of the examples of how to authenticate RESTFul in symfony are completely in php (so even backend and frontend are seperated, the frontend is still PHP) I'm really having a hard time to figure out how I can achieve the two options above. My current thoughts for the backend are:

• FOSRestBundle for handling requests / responses
• FOSUserBundle for register, login, password reset, etc. for new users

My questions are:

1. How can I authenticate a normal user (FOSUserBundle) stateless (option #1)? I couldn't find anything in the documentation about how to use the FOSUserBundle with a separate frontend. Or is there a better bundle for this scenario?
2. If the user wants to authenticate via OAuth2 Provider (option #2) which part of the app (frontend or backend) authenticates against the OAuthProvider (e.g. Google)? I though about authenticate in AngularJS (e.g. via oauth-ng module), getting the AuthToken and send it to the backend, where I match the user with his id I (hopefully) get from the OAuthProvider.

Besides the question, if this approach is correct in the first place, I really need some hints about how to achieve this in symfony. I know, that one can customize almost anything in symfony (CustomUserProvicer, CustomAuthentication, etc.) but before reading into those details, maybe there is already a simple way to solve my problems. I mean, I can't be the only one who wants this...

If anything is unclear, just ask!

Answer 1

I made a similar API, here is how I did it :

I used FOSUserBundle to create the "native" users (those only on your website). To power stateless authentication I used FOSOauthServerBundle, which can use FOSUserBundle's user provider.

Then I added two fields to my user model :

• one integer field name "origin", whose value indicated where the user is from (0 for native, 1 for Facebook,...)
• one "externalId" string field containing the ID of the user on the external account if the user is not native, NULL else

To enable users to log in with external accounts, I used a custom grant type, asking as a parameter an access token for an external account (e.g. FaceBook) which was retrieved on the client side, that used this access token to access account information and did the following :

• if this is the first time the user authenticates, creates a new user in the database, sets the origin and externalId fields as explained before, and adds account information as first name, last name, in the database. Then it gives an access token for the API
• if not, it updated the account information and gives an access token for the API

That way once the user is logged in it does not matter if where it comes from, but can still be known user origin field.

If you want more details or have trouble configuring, do not hesitate to comment here I'd be glad to help.