Home>
Vue.js + laravel I'm having trouble with user authentication registration

I would like to ask the following about the method of successful user authentication.

  1. Is there no RegistersUsers file due to the Laravel version?
  2. Regarding how to install the RegistersUsers file.
  3. Is the solution i am currently thinking about irrelevant?

Let's make a photo sharing application of Hypertext Candy (6) Authentication function and VuexI am trying to register as a user by communicating with laravel via axios.
An error occurred when the user registration button was pressed after entering the user information in "Operation check" of the next item of "Component implementation".
I'm having trouble with user registration.

// The following error occurs when I press the user registration button
POST http://localhost:3000/api/register 500 (Internal Server Error)
[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 500"
found in
---><Login>at resources/js/pages/Login.vue
        at resources/js/App.vue
       <Root>Error: Request failed with status code 500
    at createError (app.js?id=c15cd054408653e22804:711)
    at settle (app.js?id=c15cd054408653e22804:972)
    at XMLHttpRequest.handleLoad (app.js?id=c15cd054408653e22804:180)
Applicable source code
//resources\js\auth.js
import Axios from "axios"
const state = {
  user: null
}
const getters = {}
const mutations = {
  setUser(state, user) {
    state.user = user
  }
}
const actions = {
  async register(context, data) {
    const response = await axios.post('/api/register', data)
    context.commit('setUser', response.data)
  }
}
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
//resources\js\pages\Login.vue<template>  <ul>  <li
       
        :class="{'tab__item--active': tab === 1 }"
        @click="tab = 1"
      >Login</li>  <li
       
        :class="{'tab__item--active': tab === 2 }"
        @click="tab = 2"
      >Register</li></ul>      <form @submit.prevent="login">    <label for="login-email">Email</label>    <input type="text" v-model="loginForm.email">    <label for="login-password">Password</label>    <input type="password" v-model="loginForm.password">              <button type="submit">login</button>          </form>          <form @submit.prevent="register">    <label for="username">Name</label>    <input type="text" v-model="registerForm.name">    <label for="email">Email</label>    <input type="text" v-model="registerForm.email">    <label for="password">Password</label>    <input type="password" v-model="registerForm.password">    <label for="password-confirmation">Password (confirm)</label>    <input type="password" v-model="registerForm.password_confirmation">    <button type="submit">register</button>          </form>  </template><script>export default {
  data () {
    return {
      tab: 1,
      loginForm: {
        email: ``,
        password:''
      },


      registerForm: {
        name: ``,
        email: ``,
        password: ``,
        password_confirmation:''
      }
    }
  },


  methods: {
    login () {
      console.log(this.loginForm)
    },


    async register () {
      await this.$store.dispatch('auth/register', this.registerForm)
      this.$router.push('/')
    }
  }
}</script>
//resouces\js\index.js
import Vue from'vue'
import Vuex from'vuex'
import auth from'./auth'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    auth
  }
})
export default store
//routes\api.php<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
// Member registration
Route::post('/register','Auth\[email protected]')->name('register');
// login
Route::post('/login','Auth\[email protected]')->name('login');
// logout
Route::post('/logout','Auth\[email protected]')->name('logout');
//app\Http\Controllers\Auth\RegisterController.php<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Request;
class RegisterController extends Controller
{
    /*
    |------------------------------------------------- -------------------------
    | Register Controller
    |------------------------------------------------- -------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation.By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */
    use RegistersUsers;/**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }
    /**
     * Get a validator for an incoming registration request.
     *
     * @param array $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' =>['required','string','max:255'],


            'email' =>['required','string','email','max:255','unique:users'],


            'password' =>['required','string','min:8','confirmed'],


        ]);
    }
    /**
     * Create a new user instance after a valid registration.
     *
     * @param array $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' =>$data['name'],


            'email' =>$data['email'],


            'password' =>Hash::make($data['password']),
        ]);
    }
    protected function registered(Request $request, $user)
    {
        return $user;
    }
}
What I tried

I checked if there is any mistake in the description of the part related to the authentication process of registration (Login.vue, auth.js, api.php).
At that time, it inherits from RegisterController.phpIlluminate\Foundation\Auth\RegistersUsersTo
I understand that the registration process is written.

But,vendor\laravel\framwork\src\Illuminate\Foundation\AuthI confirmed that
RegistersUsersThere was no
(The Auth directory was the Access directory (Authorizable.php, AuthorizesRequest.php)
And was Users.php)

By installing RegistersUsers as a solution that I am currently thinking about, it is possible to execute the register action of Auth\RegisterController.
We believe that we will succeed.
The RegistersUsers file is not available even after composer update.

I would like to ask about the following.

  1. Is there no RegistersUsers file due to the Laravel version?
  2. Regarding how to install the RegistersUsers file.
  3. Is the solution i am currently thinking about irrelevant?

I am sorry if the explanation is difficult to understand. We apologize for the inconvenience, but we would appreciate it if you could answer.

Supplemental information (FW/tool ​​version, etc.)

Laravel ver7
Vue.js ver2.5.17
Vuex ver3.5.1
composer 1.10.9
php 7.4.1-fpm

  • Answer # 1

    Regarding the introduction of Laravel standard authentication, v7

    composer require laravel/ui


    Is it done?

    https://laravel.com/docs/7.x/frontend#introduction

  • Answer # 2

    Try the tutorial again from the beginning,
    I was able to confirm normal operation.

    The reason why the user authentication could not be registered
    It seems that I was registered correctly, I am registering a user in the login state
    It was found that the status was the cause of the error.
    I made a noise. Thank you very much for answering m1102.