CODEWITHSUNDEEP
phplaravelauthenticationnext.jslaravel-sanctum
Frank
Frank

Reputation: 610

Can't log in to Laravel API on staging server (Laravel Forge) via NextJs or Postman

I have developed an API project on Laravel with Sanctum (Token) and NextJs for the frontend. I have setup things up correctly and everything is working fine on Localhost.

I deployed the project on Laravel Forge with one custom subdomain (eg. api.example.com). I run php artisan storage:link and php artisan migrate:fresh --seed (with env as staging) as per their guide (cd /to the path && artisan command) and this works. FRONTEND_URL in env has also been updated to the live frontend url (eg. nextjs.example.com).

I tried logging in to the backend from nextjs after deploying Backend on Laravel Forge and NextJs on Vercel. https://api.example.com/sanctum/csrf-cookie is working correctly as it responds to the browser with the XSRF-TOKEN. But it fails on login with csrf-token mismatch.

Then I tried logging into it with Postman and the same thing happens. I can request the csrf-cookie separately but can not log in to the api backend with responded token. However, it is working fine on the localhost.

This is a piece of my working codes on localhost (NextJs)

const csrf = () => axios.get('/sanctum/csrf-cookie');

const login = async (loginDetails, setErrors) => {
    setErrors('');

    await csrf();

    await axios
      .post('/login', loginDetails, {
        headers: {
          'X-XSRF-TOKEN': getCookie('XSRF-TOKEN'),
        },
      })
      .then(async (res) => {
        if (res.data.status === 401) {
          setErrors(res.data.message);
        } else {
          localStorage.setItem('user_token', res.data.data.token);
          setCookie('user_token', res.data.data.token);

          await axios
            .get('/api/authenticated-user', {
              headers: {
                Authorization: `Bearer ${localStorage.getItem('user_token')}`,
              },
            })
            .then((res) => {
              localStorage.setItem(
                'user_data',
                JSON.stringify(res.data.data)
              );
            });

          router.push('/dashboard/);
        }
      })
      .catch((err) => {
        setErrors(err.response.data.message);
      });
  };

Upvotes: 1

Views: 503

Answers (1)

Frank
Frank

Reputation: 610

I got the solution for this.

The reason it is not working on Postman is that X-Requested-With: XMLHttpRequest & X-XSRF-TOKEN: {{csrf-token}} were missing on the headers after duplicating the one that works on localhost for the live version. If you are experiencing the same issue, please double-check whether those headers are present on the request's headers. Then, it started working on Postman but not on the live NextJs project with the subdomain.

To make it work perfectly on the subdomain, please check this thread since I created a different question at the same time with the purpose of making it clear for the ones who wanted to answer.

Upvotes: 0

Related Questions