restnext.jssdknext.js13directus

NextJS / Dirctus - Use updateMe SDK Function to update current User


System:

NextJS: 14.2.1 NextAuth: 4.24.7 Directus: 10.10.5

Problem

I want to update the current user's Details in a simple Form. I´m using the updateMe Function provided by Directus. When submitting my Form I´m getting the error:

Screenshot of Console when submitting the Form

I use their SDK Functions for Login and Registering as well and these are working fine.

My handleSubmit Function (i show the function until return, because in the return just follows a simple form which triggers handleInputChange:

'use client' 
import { useRouter } from "next/navigation";
import { useState } from "react"
import { createDirectus, rest, updateMe } from '@directus/sdk';


export default function ProfilEdit({ userContent, userId }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
    email: "",
  });
  const [error, setError] = useState("");
  
  const client = createDirectus('*****MYDIRECTUSURL').with(rest());


  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await client.request(updateMe({
        first_name: formData.first_name,
        last_name: formData.last_name,
        email: formData.email,
      }));
      if (response.data) {
        router.push('/dashboard');
      } else {
        setError('Fehler beim Aktualisieren des Benutzers');
      }
    } catch (error) {
      setError('Fehler beim Aktualisieren des Benutzers');
      console.log(error);
    }
    setLoading(false);
  };

First i thought that the Problem could be that the request comes from the unsecured localhost, but i deployed it and had the same problem. I also tried to just work with a PATCH request, but this didn´t work as well. I also set all the Permissions of all the user Roles to allow everything (just for testing)

Again: Login and Registering with the SDK are working...

EDIT

I tried to do this PATCH with Postman and it worked, but why?


Solution

  • I found the Solution:

    The Problem was with the CORS Settings of the Directus API.

    You need to add this to the Directus config:

    ORS_ENABLED: "true"
    CORS_ORIGIN: "true"