Use access_token authentication method

[craigharman]

Is your feature request related to a problem? Please describe.

You currently can't use the Directus access token method to authenticate to the API.
Ie. I share the "token" from the User > Admin Settings section and provide that in the Query String or the Authorization Bearer header.

Describe the solution you'd like

login should accept a {"token" OR { email: string, password: string }

<script setup lang="ts">
const { login } = useDirectusAuth();
const router = useRouter();

const onSubmit = async () => {
  try {
    await login({ token: "" });
  } catch (e) {}
};
</script>

[craigharman]

Just saw #16 so closing.

[vanling]

I don't think #16 is fixing the problem you describe right?
Related #27

[Intevel]

@vanling You are right, this does not solve the problem. I will reopen this issue.

[craigharman]

I have done some more research and you are correct, this request is to use the stand-alone user token not JWT. You can append a query string ?access_token to each request but a way to add the Authorization Bearer header would be better IMO.

[rvmourik]

This indeed would be a nice feature to have an option to send the token through headers instead of the querystring.

[Intevel]

https://docs.directus.io/reference/authentication/#login

According to the Directus documentation, the login endpoint does not accept a token.

[vanling]

@Intevel It's not so much for user authentication but for api access via an static token you can set per user.
https://docs.directus.io/reference/authentication/#access-tokens

Would love to be able to add a token in the nuxt config

  directus: {
    url: "https://url-to-directus-api.ext/",
    token: "5cc14101-11d3-4420-8067-a28750b4635f"
  },

And the idea is that the token would be used in an Authorization Bearer header for every request.

For example, i create a user in Directus called "api_application" and give that user a static access token.

I also create a Role for this user and this way I can use the api without making everything public.

Now i can make specific data available to the public for a single application.

extra info:
I am now using $fetch sometimes instead of nuxt-directus.

 const res = await $fetch(
    `${apiUrl}items/training?access_token=${token}&fields=${fields}&filter[slug][_eq]=${event.context.params.slug}`
  );

[Intevel]

@vanling I would say that we add to the DirectusQueryParams type the access_token and then you specify it via the method params.

At the setup of the module the options are merged with the public runtime config, the token would be revealed.

[Intevel]

Related to #27

[vanling]

It would be ok to reveal the token to public if that's the choice of the developer. Would just need to be clear in the documentation that this would be the case.

I create tokens with restricted read/write access for different websites that use the same directus api/instance. This way I can block an application by removing a key and also see which application has written data into the api.

Directus SDK example: https://docs.directus.io/reference/sdk/#with-static-tokens

[Intevel]

@craigharman What do you think about this?

[craigharman]

I agree it should be a developer choice.
For building static sites the token can be in a .env and will be built into the HTML/JS anyway.
For server rendered sites revealing the token would not be necessary and the token could be secure/hidden.

@vanling use case for the token will work although as per the directus documentation the long lived tokens are more designed for server to server communication where the token can be stored without exposing to client.