Directus Implementation Approach

[moseskamau338]

Am working on a project with a Directus backend. The auth experience is just discouraging so far. I've tried several packages before I stumbled on this one.

In the latest setup I have, authentication does fine, so long as you don't reload the page!. Which is annoying.

So I have a fresh install of Nuxt 3 + the installation steps for this package. I also have directus SDK in place. I need help intergtating the 2. The current step is able to authenticate a user but the details are not correctly passed over tho the authjs-nuxt package:

[...].ts

import CredentialsProvider from "@auth/core/providers/credentials"
import type { AuthConfig } from "@auth/core/types"
import { createDirectus, authentication, rest, readMe } from "@directus/sdk";
import { NuxtAuthHandler } from "#auth"

// The #auth virtual import comes from this module. You can use it on the client
// and server side, however not every export is universal. For example do not
// use sign-in and sign-out on the server side.

const runtimeConfig = useRuntimeConfig()
const client = createDirectus(runtimeConfig.public.backendUrl)
  .with(authentication("cookie", { credentials: "include" }))
  .with(rest());


// Refer to Auth.js docs for more details

export const authOptions: AuthConfig = {
  secret: runtimeConfig.authJs.secret,
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        try {
            console.log('-----Authorizing with directus----', credentials);
        
            const token = await client.login(credentials.username, credentials.password);
            const user = await client.request(readMe());
            console.log('-----Directus user / response----', user);

            return{token,user}
            
        } catch (error: any) {
            console.log('-----Directus ERROR ----', error);
            throw createError({
            statusCode:  error.errors ? 401 : error.response?.status || 500,
            message: error.message || 'Authentication Failed',
            statusMessage:
                error.statusMessage || error.errors?.map((item: any) => item.message).join('\n -')
            })
        }
        
      }
    })
  ],
  callbacks: {
    async jwt({ token, user, session }) {
    
      // eslint-disable-next-line no-console
      console.log("jwt callback", { token, user, session })
      return token
    }
  }
}



export default NuxtAuthHandler(authOptions, runtimeConfig)
// If you don't want to pass the full runtime config,
//  you can pass something like this: { public: { authJs: { baseUrl: "" } } }

On the front end:
pages/index.vue

<script setup lang="ts">
const { signIn, signOut, session, status, cookies } = useAuth();

async function check() {
  try {
    await signIn("credentials", {
      redirect: false,
      username: "admin@example.com",
      password: "password",
    });
    // eslint-disable-next-line no-console
    console.log("SignIn", session.value?.user);
  } catch (error) {
    // eslint-disable-next-line no-console
    console.log(`Error SignIn: ${error}`);
  }
}
</script>

<template>
  <div>
    <div>
      <a href="/api/auth/signin" class="buttonPrimary">Native Link Sign in</a>
      <button @click="check()">Credentials Sign In</button>
      <button @click="signOut()">Sign Out</button>
    </div>
    <div>
      <pre>{{ status }}</pre>
      <pre>{{ session?.user }}</pre>
      <pre>{{ cookies }}</pre>
    </div>
  </div>
</template>

<style scoped></style>

The token, user and session variables are incorrect.

I want to:

• ensure the correct details are stored in the session and used in subsequent directus request in the front-end and Nitro server
• Handle token refresh neatly

How would you approach this implementation?