[5.x]: Headless sign in

[mariuswestgaard]

What happened?

Description

I'm trying to set up authentication with Craft Users within a Nextjs frontend using next-auth, but unable to do so. Whenever a user fills in the login form, a request goes to an api-route in Next (using the Next-auth credentials provider), which from there I'll send a request to Crafts' login action: process.env.NEXT_PUBLIC_API_URL + '/actions/users/login'

Whenever I try to do this fetch from the API route I get an CSRF issue (the unable to verify error). When I test this request from the frontend directly (instead of going through the API route) I get a proper response from /actions/users/login (f.ex. invalid_credentials if wrong username/pw).

That made me think, is the CRAFT_CSRF_TOKEN cookie not present in the request to Craft from the API route or what's going on. Turns out the cookie was not sent to the api route, but after changing the defaultCookieDomain to include subdomains I could see the CRAFT_CSRF_TOKEN cookie in the request data in the API route.

I get the CRAFT_CSRF_TOKEN from the actions/users/session-info action, and it's setting the cookie and adding the csrfTokenValue field in the form which I send in the X-CSRF-Token in the API-route.

The current code looks like this:

const res = await fetch(
          process.env.NEXT_PUBLIC_API_URL + '/actions/users/login',
          {
            method: 'POST',
            body: data,
            credentials: 'include',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
              'X-CSRF-Token': form.csrfTokenValue
            },
          }
        );

But this is not working with the unable to verify error.

I also setting the cookie key in the headers object manually to request.headers.cookie like so cookie: request.headers.cookie to see if I could forward the cookies to Craft since it seems it's not included.

Is there something I'm missing here, or is it not possible to users/login action from another server on another subdomain?

The craft url is: https://craft.lndo.site
The nextjs site domain is: https://internal.craft.lndo.site

This is the response I get from the query:

 {
  name: 'Bad Request',
  message: 'Kunne ikke verifisere innsendt data.',
  code: 0,
  status: 400,
  exception: 'yii\\web\\BadRequestHttpException',
  file: '/app/backend/vendor/yiisoft/yii2/web/Controller.php',
  line: 221,
  trace: [
    {
      file: '/app/backend/vendor/craftcms/cms/src/web/Controller.php',
      line: 176,
      function: 'beforeAction',
      class: 'yii\\web\\Controller',
      type: '->'
    },
    {
      file: '/app/backend/vendor/craftcms/cms/src/controllers/UsersController.php',
      line: 192,
      function: 'beforeAction',
      class: 'craft\\web\\Controller',
      type: '->'
    },
    {
      file: '/app/backend/vendor/yiisoft/yii2/base/Controller.php',
      line: 176,
      function: 'beforeAction',
      class: 'craft\\controllers\\UsersController',
      type: '->'
    },
    {
      file: '/app/backend/vendor/yiisoft/yii2/base/Module.php',
      line: 552,
      function: 'runAction',
      class: 'yii\\base\\Controller',
      type: '->'
    },
    {
      file: '/app/backend/vendor/craftcms/cms/src/web/Application.php',
      line: 350,
      function: 'runAction',
      class: 'yii\\base\\Module',
      type: '->'
    },
    {
      file: '/app/backend/vendor/craftcms/cms/src/web/Application.php',
      line: 649,
      function: 'runAction',
      class: 'craft\\web\\Application',
      type: '->'
    },
    {
      file: '/app/backend/vendor/craftcms/cms/src/web/Application.php',
      line: 312,
      function: '_processActionRequest',
      class: 'craft\\web\\Application',
      type: '->'
    },
    {
      file: '/app/backend/vendor/yiisoft/yii2/base/Application.php',
      line: 384,
      function: 'handleRequest',
      class: 'craft\\web\\Application',
      type: '->'
    },
    {
      file: '/app/backend/web/index.php',
      line: 12,
      function: 'run',
      class: 'yii\\base\\Application',
      type: '->'
    }
  ]
}

Steps to reproduce

1. Run Craft in headless and run the request from an api-endpoint in another subdomain

Expected behavior

I'd expect the csrf header token and cookie token to match, and let my request through.

Actual behavior

I'm stopped by csrf.

Craft CMS version

5.5.3

PHP version

8.2

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[brandonkelly]

You would need to set defaultCookieDomain to .lndo.site (beginning with .), which gives the browser the green light to pass them across different subdomains.

[mariuswestgaard]

@brandonkelly Thanks for the quick reply. I get the same result when having .lndo.site and .craft.lndo.site in defaultCookieDomain. I see now that when I log out from the cms on the https://craft.lndo.site domain I get the same error when I run the login action from the browser, just like I get when running the login action from the API route.

Here's some more context:
I try to sign in to my Next.js frontend, using next-auth, and craft is just where the users are stored. The users should not be logged in to craft.lndo.site, they will only be using the internal.craft.lndo.site domain (which is the Next.js server), and when they log in with next-auth I'm firing the users/login action to see it the users credentials is valid or not. After this point the user stays signed in without checking with craft (though we should at some point verify that the user is still in craft or not).

[brandonkelly]

and when they log in with next-auth I'm firing the users/login action to see it the users credentials is valid or not

Not sure if this is the problem or not, but if the user is already logged in, you should be using the users/session-info action to see what their login status is.