Directus SDK refresh auto not working.

[TomS-]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

Since updating the 9.0.0 I'm having issues with login persisting. For the login function I am doing:

await directus.auth.login(
            { email: email, password: password },
            { refresh: { auto: true } }
);

However, I get the following error after some time:

tslib.es6.js:74 Uncaught (in promise) Error: Token expired.
    at Transport.<anonymous> (index.js:1)
    at Generator.throw (<anonymous>)
    at rejected (tslib.es6.js:72)

In previous versions I would be kept logged in and the token would auto refresh as expected.

To Reproduce

Use the Javascript SDK and use { refresh: { auto: true } } the token will not auto refresh.

Errors Shown

tslib.es6.js:74 Uncaught (in promise) Error: Token expired.
    at Transport.<anonymous> (index.js:1)
    at Generator.throw (<anonymous>)
    at rejected (tslib.es6.js:72)

What version of Directus are you using?

9.0.0

What version of Node.js are you using?

14.17.6

What database are you using?

MySQL 5.7

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying Directus?

Digital Ocean

[joselcvarela]

Hello @TomS-
In fact our SDK was refactored. You can see what have changed here: #9080
But this could still be an issue. In order to triage, I need you to post how are you setting up the SDK, making the login and how are you fetching the items.

[joselcvarela]

Also, what value has your ACCESS_TOKEN_TTL?

[TomS-]

Hi @joselcvarela

I'm setting up the SDK by:

import { Directus } from '@directus/sdk';
const directus = new Directus('https://portal.***.dev/');

I am then doing:

await directus.auth.login({
            email: email,
            password: password 
});

(Updated based on your link, auto-refresh is on by default, but the problem still persists)

I am fetching items by:

const printJobsItems = await directus.items('print_jobs').readMany({
            filter: {
                        id: { _in: salesOrder.print_production }
            }
});

My .env settings for access tokens are as follows:

ACCESS_TOKEN_TTL="15m"
REFRESH_TOKEN_TTL="7d"
REFRESH_TOKEN_COOKIE_SECURE=false
REFRESH_TOKEN_COOKIE_SAME_SITE="lax"
REFRESH_TOKEN_COOKIE_NAME="directus_refresh_token"

[joselcvarela]

Thank you @TomS-
After the login, can you tell how much time has passed until the error is thrown?
My tests were similar to your configuration and didn't have issues.

Also, can you make the same requests using the API endpoints?
It could also be some misconfiguration or bug in API side.

[TomS-]

Hi @joselcvarela

It does it exactly on 15 minutes. From what I can tell, if I inspect element and go to Application > Cookies there is no refresh_token set.

EDIT:

LocalStorage is working, but Cookies are not being set:

Could server configuration effect this?

[joselcvarela]

It seems to be something with your server because the SDK or any JS side has access to cookies.
Actually I am currently testing this. I already have test Nodejs and no problem found. And, right now, I am keeping a tab open making requests and also no problem found.

So, since you are no cookie set I believe there's some misconfiguration.
Can you check if login request has Set-Cookie on response headers? In fact, it would be useful to post a screenshot here. Maybe the domain on cookie could be misconfigured.

[joselcvarela]

Just found an interesting scenario but it is totally expected.
So I was running SDK tests under Profile A on browser.
Also, I have opened the /admin under the same profile.

This can leads to unexpected behaviours like cookie not be present, because both will share the cookie.
Do you think you have done something similar?
If so, try with

const sdk = new Directus("http://localhost:8055", { auth: { mode: 'json' } });

Although this is not advised on browsers. Check here why: https://docs.directus.io/reference/sdk/#options.auth

---

Testing on anonymous tab seems to work as expected, since you not login into admin.

[TomS-]

It seems to be something with your server because the SDK or any JS side has access to cookies. Actually I am currently testing this. I already have test Nodejs and no problem found. And, right now, I am keeping a tab open making requests and also no problem found.

So, since you are no cookie set I believe there's some misconfiguration. Can you check if login request has Set-Cookie on response headers? In fact, it would be useful to post a screenshot here. Maybe the domain on cookie could be misconfigured.

"Set-Cookie header was blocked due to user prefernces."

Interestingly I haven't changed any of my preferences in Chrome. So I tried Firefox, and while Firefox doesn't report an error, it doesn't set the cookie either.

EDIT:
At the moment, it's completely breaking the application because when I try to logout it says "refresh_token" is required. Though I am unsure why it is required for logout.

https://samesite-sandbox.glitch.me/

Could be something to do with LetsEncrypt.

EDIT 2:
Renewed all my SSL certificates and it still isn't setting the cookie, I noticed that SameSite=Lax is being passed, but it should be SameSite=None, https://stackoverflow.com/a/63248851

Interestingly this issue has only just started appearing however. I have no idea why it started but it seems to co-inside with a server side update I had with aaPanel.

EDIT 3:
In my .env file I have changed the refresh token settings to:

REFRESH_TOKEN_COOKIE_SECURE=true
REFRESH_TOKEN_COOKIE_SAME_SITE="none"

I now have cookies successfully setting, but not in Incognito Mode. Which is expected:

I wonder if it's worth setting the defaults to this in future updates? I am also interested why others haven't had this issue, unless they knew this and I'm an idiot (most likely the case).

EDIT 4:

portal.***.dev/auth/refresh:1 Failed to load resource: Failed to load resource: net::ERR_NAME_NOT_RESOLVED
axios-transport.js:130 Uncaught (in promise) Error: Network Error
    at AxiosTransport.<anonymous> (axios-transport.js:130)
    at Generator.throw (<anonymous>)
    at rejected (axios-transport.js:6)

It's no longer showing the error, but the Cookie isn't being set either:

[joselcvarela]

Are you running on localhost? Try 127.0.0.1 instead on Chrome and Firefox and check if that works.
I am moving this into a discussion since it seems there's no issue but a misconfiguration.