Home>

I want to realize the transition between jwt of Laravel and AuthModeule of nuxt.
I deployed Laravel on heroku and Nuxt on netlify, and an error occurred during the login process.
If i enter the correct email and password on the login screen, you will be taken to the top page, but that is the same.
On the other hand, it has been confirmed that if you log in incorrectly, an error message due to validation from the back end will be returned, so it is possible that the token after login has not been processed properly.
Also, the developer tools output undefind.

Backend (laravel, heroku) logs
2020-11-21T01: 23: 53.686116 + 00: 00 "OPTIONS /api/login HTTP/1.1" 204-"https://◯◯.netlify.app/" "Mozilla/5.0
2020-11-21T01: 23: 53.784655 + 00: 00 "GET/api/posts HTTP/1.1" 200 25 "-" "axios/0.20.0"
2020-11-21T01: 23: 53.790208 + 00: 00 [21/Nov/2020: 01: 23: 53 +0000] "GET/api/users HTTP/1.1" 200 357 "-" "axios/0.20.0
2020-11-21T01: 23: 53.788625 + 00: 00 heroku [router]: at = info method = GET path = "/ api/posts" host = ◯◯ .herokuapp.com request_id = ◯◯ status = 200


Both 200s have been returned.

Corresponding source code
  public function login (UserLoginRequest $request) {
        if (! $token = auth ()->attempt ($request->only (['email','password']))) {
            return response ()->json ([[
                'errors' =>[
                    'email' =>['The email address and password did not match. ']
                ]
            ], 422);
        }
        return (new UserResource ($request->user ()))->additional ([
            'meta' =>[
                'token' =>$token,
            ]
        ]);
    }
<? php
return [
    'paths' =>['api/*'],
    'allowed_origins' =>['https: /〇〇◯.netlify.app'],
    'allowed_origins_patterns' =>[],
    'allowed_headers' =>['Content-Type','application/json','Authorization','Accept'],
    'exposed_headers' =>[],
    'max_age' =>0,
    'supports_credentials' =>true,
];;
methods: {
      async asyncData ({$auth}) {
              try {
                const {response} = await this. $Auth.loginWith ("local", {
                data: {
                  email: this.form.email,
                  password: this.form.password,
                }
              });
                console.log (response)
                this. $Router.replace ({path:'/'});
              } catch (error) {
                console.log (error.status)
              }
        }
    },
axios: {
    baseURL: "https://◯.herokuapp.com/api",
    withCredentials: true,
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url:'login',
            method:'post',
            propertyName:'meta.token'
          },
          user: {
            url:'user',
            method:'get',
            propertyName:'data'
          },
          logout: {
            url:'logout',
            method:'post',
          }
        }
      }
    }
  },
What I tried

We have set up allowed_headers and allowed_origins of laravel. Before deployment, the cors error did not occur when developing on localhost (3000,8000), but when deploying, it was installed because it was affected by another domain or a Cors error (error 500) occurred. Before the installation, other processing and routing were also error, but by installing it, the 200 series is now returned. (Confirmed in heroku log)

Postman has confirmed that there is no problem with the backend.

Supplementary information (FW/tool version, etc.)

Laravel 6

  • Answer # 1

    An error occurred because the JWT authentication secret key was not added to heroku's .env file.