Randy_Johnson's avatar

ReactJS InertiaJS 403

Pretty sure it has something to do with the CSRF but am searching around and coming up with nothing.

403
This action is unauthorized.
import React from 'react'
import TextInput from '../TextInput.jsx'
import SelectBox from '../SelectBox.jsx'
import PrimaryButton from '../PrimaryButton.jsx'
import { Link, useForm } from '@inertiajs/inertia-react';

const AddKin = () => {

    const { data, setData, post, processing, errors, reset } = useForm({
        parent: '',
        name: '',
    });

    const onHandleChange = (event) => {
        setData(event.target.name, event.target.type === 'checkbox' ? event.target.checked : event.target.value);
    };

    const parents = [
        { id: 1, name: 'Josh', age: 35 },
        { id: 2, name: 'Jim', age: 23 },
        { id: 3, name: 'Sarah', age: 25 },
    ];

    const submit = (e) => {
        e.preventDefault();

        console.log(data.parent + ' ' + data.name)

        post(route('student.store'));
    };

    return (
        <form onSubmit={submit}>
            
            <div>
                <div className="bg-white overflow-hidden shadow-sm sm:rounded-t-lg bg-gradient-to-r from-cyan-200 to-blue-200">
                    <div className="p-4 text-lg text-left">Add Kin</div>
                </div>
                <div className="bg-white overflow-hidden shadow-sm sm:rounded-b-lg">
                    <div className="p-4 text-lg">
                        <p>Parent Account</p>
                        <SelectBox
                            name="parent"
                            id="parent"
                            className="w-full py-3 shadow"
                            objects={parents}
                            handleChange={onHandleChange}
                        />
                        <p>Name</p>
                        <TextInput
                            type="text"
                            name="name"
                            id="name"
                            className="w-full py-3 shadow"
                            handleChange={onHandleChange}
                        />
                        <PrimaryButton className="py-5 mt-8  w-full" processing={processing}>
                            Add
                        </PrimaryButton>
                    </div>
                </div>
            </div>
        </form>
    )
}

export default AddKin
0 likes
7 replies
Sinnbeck's avatar

Csrf is 419. Sounds like you are blocked by some middleware perhaps?

1 like
Randy_Johnson's avatar

@Sinnbeck

Taking a look I cannot find no middle ware.

Route::prefix('dashboard')->group(function () {
    Route::resource('student', StudentController::class);
});

But there was middle ware on the original dashboard

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

So I stuck it on like this

Route::prefix('dashboard')->group(function () {
    Route::resource('student', StudentController::class);
})->middleware(['auth', 'verified']);

I had the same results.

Randy_Johnson's avatar

@Sinnbeck I found it:

public function store(StoreStudentRequest $request)
{
    return 'Hello world';
}

It has something today with StoreStudentRequest. More investigation, but if anyone wants to give me a quick heads up am all ears!

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@Randy_Johnson maybe you have return false in the StoreStudentRequest::authorize()

Or something that equals false at least

Randy_Johnson's avatar

@Sinnbeck Thanks a lot buddy! I would of been messing around for hours if it wasn't for your advise!

StoreStudentRequest $request was the problem changing it to ->

    public function store(Request $request)
    {
        dd($request);
    }

fixed it.

Randy_Johnson's avatar

@Sinnbeck Yes, it was set to false! Thanks

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreStudentRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules()
    {
        return [
            //
        ];
    }
}

Please or to participate in this conversation.