User register in vue.js + October

[Incremental92]

Thanks for this fine plugin, but I'm getting a strange pb when registering a user with my Vue.js app. With this app developped with MDB framework, all is fine. Switching to Quasar with same code, I get the following error from October (nothing change from server side)

HTTP/1.1 500 Internal Server Error Undefined index: password C:\Dev\WinNMP\WWW\Meteo\plugins\rluders\jwtauth\http\requests\RegisterRequest.php line 21

public function data()  {
          $data = $this->all();
          // Password confirmation is optional
          if (!array_key_exists('password_confirmation', $data)) {
               $data['password_confirmation'] = $data['password'];
          }
          return $data;
}

Based on : https://watch-learn.com/creating-rent-car-app-vue-and-october/login-and-register-with-jwt from the Vue.js side the data collected from my form is prepared for Axios this way :

const user = new URLSearchParams(); // Déclaration pour éviter pbs avec AXIOS
user.append("name", this.name);
user.append("surname", this.surname);
user.append("email", this.email);
user.append("password", this.password);
user.append("password_confirmation", this.password_confirmation);

The URLSearchParams() user has the form : name=toto&surname=toto&email=toto%40toto.com&password=totototo&password_confirmation=totototo

Why with a Vue framework it's working and with the other, passed data seems to be wrong ? It seems that the string is not exactly sent the same way and disturb JWT which misunderstand the parameters... Could it be a control on reception which wrongly parse the received parameters ?

In addition, with a password length error, I get also a HTTP/1.1 500 Internal Server Error.

We're sorry, but an unhandled error occurred. Please see the details below.
The password must be between 8 and 255 characters.
C:\Dev\WinNMP\WWW\Meteo\vendor\october\rain\src\Database\Traits\Validation.php line 340

Thanks

[rluders]

Hello, @Incremental92.

Did you already try to test the request using the Postman collection that I provided?

It could give you some idea. Can you share all the axios request?

[Incremental92]

Hello, do you mean that the data should be like : rawModeData | "{\n\t\"username\": \"demo\",\n\t\"email\": \"demo@domain.tld\",\n\t\"password\": \"secret\",\n\t\"password_confirmation\": \"secret\"\n}"

Well I read many tutos and I think I'm doing it correctly. Here is my post in Quasar framework : https://forum.quasar-framework.org/topic/7227/axios-jwt-auth-october-error/5?_=1605858676777

[Incremental92]

I can share my code, but mainly the problem is that October errors are returned with a HTTP 500 and I can see the October error page in Firefox debug POST Response / Preview. Errors are :

• Undefined index: password (maybe pb sending the credential ?)
• The password must be between 8 and 255 characters. (always returned if length <)

[rluders]

So, the issue doesn't seem to be in the plugin. Your request is probably wrong. That was why I told u to check the Postman collection, there you will find the request, and can test it.

The data that you need to send should be in the following format:

{
    "username": "demo",
    "email": "demo@domain.tld",
    "password": "secret",
    "password_confirmation": "secret"
}

And it seems that you are sending something like:

{
    user: {
    "username": "demo",
    "email": "demo@domain.tld",
    "password": "secret",
    "password_confirmation": "secret"
    }
}

So, when the plugin get all the params sent with $data = $this->all() it is being converted to $data['user']['password'] I do not have any experience with Quasar, so, hard to say how does it can affect the request.

My advice would be for u to:

• Check the Postman collection, and try to understand it;
• Check your code again to make sure that you are posting the raw data to the endpoint;
• Check the request that your code is creating, and if necessary, put some dd($data) in the plugin, right after the $data => $this->all() just to check if you are sending the data in the correct format and how the backend is getting it. (Don't forget to revert the change in the plugin's code removing the dd($data) that you added for debugging purpose)

Just let me know the results.

[rluders]

BTW, the errors that you are getting with password validation are normal. If you sent an empty password, or the plugin can't get it as an index of $data, we must agree that null (what also means empty) value doesn't have the min required of 8 characters.

And the fact that is throwing a 500 error, well, I guess that I need to improve the error handling. :+1: I don't think that the plugin should return 500 errors without handling it.

[Incremental92]

Thanks a lot for your support and patience. I modified the code (differently from all the tutos ie : Ivan Doric) My forms directly fills the object credentials: { name: 'toto', surname: 'toto', email: "toto@toto.com", password: 'toto', password_confirmation: "toto" }, and on submit, I directly do : this.$store.dispatch('server/registerUser', { user: this.credentials });

All is fine now, my user is created... ... but if password length is 4, I get an HTTP 500 Request payload : {"name":"toto","surname":"toto","email":"toto@toto.com","password":"toto","password_confirmation":"toto"} Response preview : an october page saying "The password must be between 8 and 255 characters."

If I register an existing user, I get a HTTP 422 which is correct.

If you need, I can provide more details for the HTTP 500, but tell me how ? Regards

[rluders]

I see. I didn't understand the real issue, sorry about it.

So, what I can say is that it could be related to this #38, and unfortunately, right now, we are getting some invalid response type from the API, for some errors. So, you need to handle it in your frontend.

I didn't have time to look into this and fixed but planning to do it as soon as possible. So, yes, it is a known bug, and what I can suggest is to not send passwords that have less than 4 characters, since the validation requires at least 8 characters.

[Incremental92]

At least, you can notice that HTTP/1.1 422 Unprocessable Entity is OK under October : Array [ "The email has already been taken." ]

Thanks, I will control the password in the frontend. ... and manage the HTTP 500 like a "wrong password"

[rluders]

Great. I'll update the status for this issue as soon I have it patched. If you notice anything else, feel free to report the issue.

[rluders]

Fix on the way.

[rluders]

It should be fixed right now.

[Incremental92]

Thank a lot, I'll test it ;-)