Getting the JWT Token in Angular2 from an authenticated user (HWIOAuth) in Symfony3

1
votes

I'm using Symfony3 as a back-end framework with FOSUserBundle, FOSRestBundle and HWIOauthBundle. I'm using also Angular2 with NodeJS as a front-end framework.

The front-end framework get the data from the back-end framework using LexikJWTAuthenticationBundle. The purpose is to authenticate users using the master class "AbstractUser" which has child classes :

  • FacebookUser, GoogleUser, ... (for OAuth authentication)
  • NativeUser (for a User/password authentication)

I successfully setup a part of the authentication mechanism:

  • User/password authentication: I should authenticate a user from Angular2 framework to the Symfony3 framework. So Symfony3 will send back the token that will be used in the header.

But when I try to authenticate an OAuth user from Angular2 framework, I will be redirected to the symfony3 framework and after the authentication process, Symfony3 will authenticate the user and it return the user to the Angular2 framework's pages. This seems logic.

But the problem is that Angular2 framework doesn't recognize the authenticated user. In fact, the user has been authenticated through the OAuth provider using Symfony3 framework (not Angular2). So in Angular2, when I try to call a page http://symfony_framework/get_token which should return the JWT token of the authenticated user in symfony3, I find that this line of code:

$this->get('security.token_storage')->getToken();

returns this result:

app.INFO: AnonymousToken(user="anon.", authenticated=true, roles="")

And when I thought about it, I found that when I call this page http://symfony_framework/get_token manually, it will print the JWT token because I'm authenticated directy through this page (using my cookies) but with Angular2 there is no cookies (using XHR request).

Is there any solution that can may help ? If possible I need a secured solution. I thought about this idea:

  • After authentication from Angular2 to the OAuth provider using Symfony3, when Symfony is going to redirect the user to the Angular2 pages, it will also send the JWT Token to the Angular2 framework (using Get or Post method) that will use it next time to get REST data. But I don't know if is this secure because any user can also send a malicious or a fake JWT Token to the angular2 framework. But, I can verify this token with a Symfony3 Controller when I try to get the user information. But is all of this secure ? I'm new with all this things and I should not do any mistakes especially with users accounts (Facebook, Google, ...).
  • Share the token in the cache (https://stackoverflow.com/a/39467076/8239292). But is this possible between two websites (Angular2 and Symfony3) ? And is this also secure ? The cache is not used to save sensitive data like tokens. And it will generate many problems because of the date of expiration (when it's greater than the token validity).

If there is another solution please tell me what is the best solution.

Thanks

1
angularsymfonyauthenticationoauthjwt

1 Answers

0
votes

I don't really know if the logic of ' I try to authenticate an OAuth user from Angular2 framework, I will be redirected to the symfony3 framework and after the authentication process, Symfony3 will authenticate the user and it return the user to the Angular2 framework's pages' is entirely working or correct.

It seems that you have a Symfony3 site which handles authentication, and another Angular site handles the frontend views. I think the problem might be that you have logged in on Symfony3 and the user is stored in the session. But Angular is pure client framework. It could not get this 'session' from Symfony3. Therefore in Angular, you are not authenticated.

What I would do is using RESTful API to do the authentication. As you said, Symfony3 would be a backend framework, it handles Angular's POST API request(http://symfony_api/authentication) and authenticate the user. The FOSUserBundle and LexikJWTAuthenticationBundle will generate a JWT token which could be sent as response to Angular. Then, on Angular site, you could store this token in different storages based on your security strategy. Now you are 'logged in' on Angular as well. Later on when you want to get any user information, you need to include the token in HTTP request headers(http://symfony_api/get_user, {Authorization: Bearer MY_ACCESS_TOKEN}). On Symfony3, you need to check if the token is valid.