EBADCSRFTOKEN: Invalid CSRF token


#1

When i create a form like

  <form method="POST" action="{{ route('AuthController.Login') }}">

          {{ csrfField }}
          <div>
            <input type="text" name="email" />
          </div>

          <div>

            <input type="text" name="password" />
          </div>

          <button type="submit"> Submit </button>
     </form>

I get EBADCSRFTOKEN: Invalid CSRF token error message after clicking the submit button.

{{ csrfField }} outputs function () { return this.safe(<input type="hidden" name="_csrf" value="${csrfToken}">) } in the View instead.

anyone to help please?


#2

Can u the version of shield package in your package.json file


#3

@adonisjs/shield”: “^1.0.2”,


#4

This is a function and not a variable, you need to call it.

{{ csrfField() }}

#5

Thanks so much. you are right, it has worked I didn’t realize this.


#6

I get the following error when trying this:

Cannot call function csrfField from home.edge view

Any idea why is this?

This is the html in my home.edge file:

@layout('layouts.app')

@section('content')
  <h2>New Todo</h2>

  <div class="row">
    <div class="col-md-6">
        <form action="/todos" method="POST">
            {{ csrfField() }}
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" class="form-control" name="title" required>
            </div>
            <div class="form-group">
                <label for="body">Body</label>
                <input type="text" class="form-control" name="body" required>
            </div>
            <div class="form-group">
                <button class="btn btn-primary">Add Todo</button>
            </div>
        </form>
    </div>
    <div class="col-md-6">

    </div>
  </div>
@endsection

#7

Make sure you have setup shield before using it http://adonisjs.com/docs/4.0/csrf#_setup


#8

It’s setup correctly. I thought of that at first too. Seems very strange.


#10

Can u please share the code from following files.

  1. start/app.js
  2. start/kernel.js

#11
//app.js
'use strict'

/*
|--------------------------------------------------------------------------
| Providers
|--------------------------------------------------------------------------
|
| Providers are building blocks for your Adonis app. Anytime you install
| a new Adonis specific package, chances are you will register the
| provider here.
|
*/
const providers = [
  '@adonisjs/framework/providers/AppProvider',
  '@adonisjs/framework/providers/ViewProvider',
  '@adonisjs/lucid/providers/LucidProvider',
  '@adonisjs/bodyparser/providers/BodyParserProvider',
  '@adonisjs/cors/providers/CorsProvider',
  '@adonisjs/shield/providers/ShieldProvider',
  '@adonisjs/session/providers/SessionProvider',
  '@adonisjs/auth/providers/AuthProvider'
]

/*
|--------------------------------------------------------------------------
| Ace Providers
|--------------------------------------------------------------------------
|
| Ace providers are required only when running ace commands. For example
| Providers for migrations, tests etc.
|
*/
const aceProviders = [
  '@adonisjs/lucid/providers/MigrationsProvider'
]

/*
|--------------------------------------------------------------------------
| Aliases
|--------------------------------------------------------------------------
|
| Aliases are short unique names for IoC container bindings. You are free
| to create your own aliases.
|
| For example:
|   { Route: 'Adonis/Src/Route' }
|
*/
const aliases = {}

/*
|--------------------------------------------------------------------------
| Commands
|--------------------------------------------------------------------------
|
| Here you store ace commands for your package
|
*/
const commands = []

module.exports = { providers, aceProviders, aliases, commands }


// kernel.js
'use strict'

const Server = use('Server')

/*
|--------------------------------------------------------------------------
| Global Middleware
|--------------------------------------------------------------------------
|
| Global middleware are executed on each http request only when the routes
| match.
|
*/
const globalMiddleware = [
  'Adonis/Middleware/BodyParser',
  'Adonis/Middleware/Session',
  'Adonis/Middleware/Shield',
  'Adonis/Middleware/AuthInit'
]

/*
|--------------------------------------------------------------------------
| Named Middleware
|--------------------------------------------------------------------------
|
| Named middleware is key/value object to conditionally add middleware on
| specific routes or group of routes.
|
| // define
| {
|   auth: 'Adonis/Middleware/Auth'
| }
|
| // use
| Route.get().middleware('auth')
|
*/
const namedMiddleware = {
  auth: 'Adonis/Middleware/Auth'
}

/*
|--------------------------------------------------------------------------
| Server Middleware
|--------------------------------------------------------------------------
|
| Server levl middleware are executed even when route for a given URL is
| not registered. Features like `static assets` and `cors` needs better
| control over request lifecycle.
|
*/
const serverMiddleware = [
  'Adonis/Middleware/Static',
  'Adonis/Middleware/Cors'
]

Server
  .registerGlobal(globalMiddleware)
  .registerNamed(namedMiddleware)
  .use(serverMiddleware)


#12

This is one of the weird things I have encountered. Both files looks fine to me.

Finally you can share how do you render the home view?


#13

I also received this error

‘Cannot call function csrfField from home.edge view’

This seems to happen when using edge.render, however view.render worked for me


#14

You shouldn’t use edge.render.


#15

Difference is explained here https://adonisjs.com/docs/4.0/http-context#_views