Using Sanctum on multiple subdomains with XSRF-TOKEN cookie

Any way to prefix cookie for that domain. https://laravel.com/api/9.x/Illuminate/Cookie/CookieValuePrefix.html

Prefixing the cookie works for the session cookie, but not for the XSRF-TOKEN.

Sanctum is clever, but I don't think it can properly handle this kind of set up, which is why the documentation makes it clear that they the must share the same top-level domain. I thought using multiple sub-domains would work, and it does, except for this problem.

I guess I can live with just disabling the Sanctum CSRF verification middleware for the staging environment. Although, who knows what requirements will come along in the future where I'd want to have other Sanctum-powered apps on the same domain within production. I guess I could write my own CSRF middleware and go out of my way to make sure the client includes it. I just wish there was a better way, and I find it difficult to believe there isn't. I'm open to any other ideas.

It looks like Sanctum DOES set the XSRF-TOKEN cookie on the proper subdomain. The problem seems to be Axios's withCredentials default that reads from the TLD. If I set up a request interceptor that reads the proper subdomain cookie and overrides the X-XSRF-TOKEN header, it appears to work.

I need to do some further testing, but it does seem like Sanctum is capable of handling multiple apps on different subdomains.

Unless someone else provides a brilliant idea, I'll just leave my findings here in case it helps someone else in the future.

Turns out the problem is definitely the cookie name. The XSRF-TOKEN cookie does get saved to the proper subdomain. The problem is, with an app on the TLD, there will be multiple XSRF-TOKEN cookies: one for the TLD, and one for each subdomain. When accessing the cookies via javascript, there is no way to differentiate cookies by (sub)domain. So basically the client only sees multiple "XSRF-TOKEN" cookies and if it uses the wrong one, a CSRF mismatch exception will be thrown.

I ended up editing App\Http\Middleware\VerifyCsrfToken.php and overrode a couple methods from the parent class, where the 'XSRF-TOKEN' is hard-coded. I then have the client access the new cookie name and include that in the headers.

VertifyCsrfToken.php

    /**
     * Add the CSRF token to the response cookies.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Symfony\Component\HttpFoundation\Response  $response
     * @return \Symfony\Component\HttpFoundation\Response
     */
    protected function addCookieToResponse($request, $response)
    {
        $config = config('session');

        if ($response instanceof Responsable) {
            $response = $response->toResponse($request);
        }

        $response->headers->setCookie(
			// change hard-coded cookie name to XSRF-TOKEN-PORTAL
            new Cookie(
                'XSRF-TOKEN-PORTAL', $request->session()->token(), $this->availableAt(60 * $config['lifetime']),
                $config['path'], $config['domain'], $config['secure'], false, false, $config['same_site'] ?? null
            )
        );

        return $response;
    }


    /**
     * Get the CSRF token from the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return string
     */
    protected function getTokenFromRequest($request)
    {
        $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');

		// change hard-coded name to XSRF-TOKEN-PORTAL
        if (! $token && $header = $request->header('X-XSRF-TOKEN-PORTAL')) { 
            try {
                $token = CookieValuePrefix::remove($this->encrypter->decrypt($header, static::serialized()));
            } catch (DecryptException $e) {
                $token = '';
            }
        }

        return $token;
    }

And then within Axios, I'll end up doing something like:

axios.interceptors.request.use(function (config) {
  let cookieArray = document.cookie.split(";");

 // this can probably be improved by using a regex.. but this works for now
  for(var i = 0; i < cookieArray.length; i++) {
    let cookiePair = cookieArray[i].split("=");
   
    if(cookiePair[0].trim() == 'XSRF-TOKEN-PORTAL') {
        axios.defaults.headers.common['X-XSRF-TOKEN-PORTAL'] = decodeURIComponent(cookiePair[1]);
    }
}  
  return config;
}, function (error) {
  return Promise.reject(error);
});

I still question if this is the best solution, but it seems to work. Still seems like a lot of effort just to make another Sanctum-powered app work on a sub domain.

@talinon Just a quick question, I'm running into the exact same issue, but in this case in our production environment. It could be me, but the Axios related code doesn't seem to work. Where did you put it in your Vue project?

Thanks in advance!

@mikkol I put it within store/auth.js

Looking back on it, looks like below is where I left off with it. I created an environment variable to hold a unique XSRF token name for each app. It hasn't given me any headaches in over a year now.

axios.interceptors.request.use(function (config) {

     let match = document.cookie.match(new RegExp("(^| )" + process.env.VUE_APP_XSRF_TOKEN_NAME + "=([^;]+)"));
     let token = match ? match[2] : '';

    if (token)
        axios.defaults.headers.common['X-' + process.env.VUE_APP_XSRF_TOKEN_NAME] = decodeURIComponent(token);     

    return config;

}, function (error) {
  return Promise.reject(error);
});