using redux-token-auth to authenticate POST/UPDATE requests to the backend server

[DonGiulio]

Hello,

Probably there's something I'm missing, I think this package should provide a way to authenticate requests to the backend in order to use the stored tokens also for any backend calls, other than just user registration/authorization purposes.

My backend has several API calls that require authentication to protect private user data, or to limit updates to the legitimate users.

I believe the client should allow to:

• send token and auth headers with any of such requests.
• update stored auth data with the codes provided by the server each time.

I'm not seeing code for doing anything like this in here.

How would you make sure that only authenticated users can perform certain actions on the backend?

Thanks

[joshudev]

This does work out of the box if you use axiom for your HTTP requests, as it sets auth headers in the axiom default headers.

[DonGiulio]

Thanks for the response, how would you achieve that?

Seems odd that I have full support for authentication, but I cannot use the tokens for custom requests.

In my app I'm using react-fine-uploader to let users add images to their items, but I need them to be authenticated in order to avoid anyone to spoof user_id and add images indiscriminately.

  const uploader = new FineUploaderTraditional({
    options: {
      multiple: false,
      validation: {
        itemLimit: 1
      },
      request: {
        endpoint: backend.createImage,
        params: [props.userId],
      },
      session: {
        endpoint: backend.loadImages(props.itemId)
      },
      deleteFile: {
        enabled: true,
        endpoint: backend.deleteImage(props.itemId)
      },
      cors: {
        expected: true
      }
    }
  });

I would need to use the authentication token in the options.request.params option. It's just not sufficient to have the userId in there, the same goes for the deleteFile option.

Has anyone solved this? How would you do that?

Thanks,

Giulio

[DonGiulio]

I found that the signIn and validateToken actions actually save all the headers in the local storage.

devise-token-auth returns several login headers when signing in, like: access-token, client, token-type, uid.

I'm using these as customHeaders in my images uploader:

 request: {
    endpoint: backend.createImage,
    customHeaders: {
      "access-token": localStorage.getItem("access-token"),
      client: localStorage.getItem("client"),
      "token-type": localStorage.getItem("token-type"),
      uid: localStorage.getItem("uid")
    }
  },

I don't like too much accessing directly the localStorage to read data that was written there by redux-token-auth, so I'd really prefer if redux-token-auth could provide me a mechanism to retrieve such headers.

Triggering authenticate_user! in the backend triggers a new access-token to be created, thus logging out my user if I don't save the new access-token in the localStorage again.

I could try to do that manually in a callback, but it's rapidly becoming an ugly monkey patch.

any ideas on how to clean that up?

[AmitJoki]

+1 the axios docs provides a way to assign the access token by default. But the access tokens are changed every request and have to be reconfigured everytime. I'd love if it provides a wrapper around axios API whereby we could make secure authorizable requests...some thing like..

axios.withToken('/api?data=data');

If there's a workaround, it would be helpful if a small working snippet is provided as to how to go about this.

[waclock]

Hey @AmitJoki @DonGiulio how did you end up solving this? Modifying the localStorage manually doesn't seem right to me.

[Gooner91]

I may have a very similar issue here, using redux-token-auth and devise-token-auth sign up, sign in and sign out work as they should. But when it comes to making HTTP requests to the protected routes of my rails API I always get 401 response. Sending the same request via postman and auth headers results in a successful response.
I have gone through the the gem readme, any issues that look relevant but I am confused if we are to set auth headers for every request sent to a protected route of api in axios or if this package takes care of it which was my initial assumption. Any help or suggestion would be great.
For now I am looking into middlewares that may help me manage the auth headers for all such requests.