Laravel + ReactJS page expired even when csrf_token in meta is set

Question

I'm building a web application using Laravel 5.6 and ReactJS 16.4.1.

I have set the csrf_token on my master.blade.php on the <head> as follows:

<meta name="csrf-token" content="{{csrf_token()}}">

Then on my reactJs, I loaded my registration component like so:

export default class RegistrationForm extends Component {
    render() {
        return (
            <React.Fragment>
                <form method="post" action={this.props.actionUrl}>
                    <div className="form-group">
                      <label htmlFor="txtEmail">Email</label>
                      <input type="email" name="txtEmail" id="txtEmail" className="form-control" placeholder="Email" />
                    </div>
                    <div className="form-group">
                      <label htmlFor="exampleInputPassword1">Password</label>
                      <input type="password" name="txtPassword" id="txtPassword" className="form-control" placeholder="Password" />
                    </div>
                    <div className="text-right">
                        <button type="submit" name="btnRegister" id="btnRegister" className="btn btn-primary">Register</button>
                    </div>
                </form>
            </React.Fragment>
        );
    }
}

Then when I hit the register button, I am being redirected to a The page has expired due to inactivity. Please refresh and try again. page.

I'm not sure why this is still happening even I have the csrf-token meta already.

I have tried this already but still does not work.

But when I remove the VerifyCsrfToken on the Kernel.php, it works. \App\Http\Modules\Common\Middleware\VerifyCsrfToken::class

Is it safe to remove this class? Though I still want to have the csrf validation as to why I do not want to just remove it on the middleware.

As far as I know, there is no need to add a `{{ csrf_field() }}` on the form if you have added `{{csrf_token()}}` on the . Or do I still need to? — basagabi, Jun 29 '18 at 05:50
Meta is so you can acces it anywhere. I think laravel automatically adds it to the request when you use vue, but not when using react — Thijs Steel, Jun 29 '18 at 13:58
Yes, I was able to verify this by manually adding a hidden field with the `{{csrf_token()}}` value and it now works. Looks like this field should be added on every form aside from the meta. Marking this as resolved. — basagabi, Jul 02 '18 at 02:58

score 0 · Accepted Answer · answered Jul 02 '18 at 03:00

0

I've manually added a hidden field with the {{csrf_token()}} as the value and it now works. It seems that on reactjs, this field should be added manually aside from the meta csrf token.

answered Jul 02 '18 at 03:00

basagabi

4,900
6
38
84

so yes, it should be added in the form. But instead of adding it to the form each time through laravel, you can just access the meta from react and add it to the form there. – Thijs Steel Jul 02 '18 at 06:56
1

yeah.. i created a reactjs component that creates a hidden field that gets the meta csrf value and place it on that hidden field component. Just need to added the component on every form like so: `` – basagabi Jul 03 '18 at 03:35
@basagabi How did you add the csrf_token to the react component? Via a global javascript variable set in the blade template head var csrfToken='{{csrf_token}}'? – NULL pointer Nov 21 '18 at 00:55
I have a meta tag that sets the csrf then on every form, I have a hidden input. The react then gets the value of the meta tag then sets the value on the hidden csrf input. – basagabi Nov 21 '18 at 03:08

Laravel + ReactJS page expired even when csrf_token in meta is set

1 Answers1