Devise: How to correctly implement work with JSON requests?

[afuno]

Environment

• Ruby 2.6.3
• Rails 5.2.3
• Devise 4.6.2

---

I needed to write authorization and registration forms on Vue. For this, I prepared the back-end as follows.

config/initializers/devise.rb:

config.navigational_formats = ['*/*', :html, :json]

config/routes.rb:

devise_for :users, controllers: {
  confirmations: 'users/confirmations',
  registrations: 'users/registrations',
  sessions: 'users/sessions'
}

app/controllers/users/registrations_controller.rb:

class Users::RegistrationsController < Devise::RegistrationsController
  respond_to :html, :json
  # ...

I also added respond_to to all other Devise controller files.

The standard registration form from devise (rails, not webpack, not vue) works successfully:

<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"/L6ohEEly+IKl/QSnhFQkN5x1ygzrHbjgK9LcgY13n7cxGcVCQYQfF7FJNfCUo6EpPY3ilfJz32n7rZSA==", "user"=>{"email"=>"[email protected]", "name"=>"Bob", "password"=>"111111", "password_confirmation"=>"111111"}, "button"=>"", "controller"=>"users/registrations", "action"=>"create"} permitted: false>

The create method in the Users::RegistrationsController controller gets all the parameters from the form and successfully works with them.

But if I submit data from a form written in Vue, then a problem appears. This is what comes to create:

<ActionController::Parameters {"user"=>{"email"=>"[email protected]", "name"=>"Bob", "password"=>"111111", "password_confirmation"=>"111111"}, "format"=>:json, "controller"=>"users/registrations", "action"=>"create", "registration"=>{"user"=>{"email"=>"[email protected]", "name"=>"Bob", "password"=>"111111", "password_confirmation"=>"111111"}}} permitted: false>

Almost the same. The main thing is that user exists and the data in it. But this data does not come for verification in the database:

<User id: nil, email: "", created_at: nil, updated_at: nil, name: nil>

{"errors":{"email":["This field must not be empty"],"password":["can't be blank"],"name":["This field must not be empty"]}}

---

Why is this happening? The controller is the only one. Parameters inside user are present.

[gurgelrenan]

This type of issue should be posted in Stack Overflow like the guide says:

• Do not use the issues tracker for help or support, try Stack Overflow.

[jonathan-rosa]

Try having the authenticity_form as an input field in your Vue template as that is the CRSF token, and other input fields that you are missing that may be affecting it such as utf8=✓, button, controller, and action.

[mracos]

Hi @afuno!

As @gurgelrenan said, these kinds of questions should be posted to the StackOverflow and the likes where a wider community will be able to help you. We reserve the issues tracker for issues only.

But maybe this guide (Configuring devise for APIs) from the Wiki of devise-jwt can help you.

Thanks!