How to automatically establish a relation to a User Content Type


I am trying to create a profile for my users by them filling in this form and sending it to strapi.
And of course I want to establish a connection between User and Profile CT.

When i send a post request through Postman to check the endpoint and the request body, I am able to sucsessfully create a profile with a relation with the user established.

But when I do this through code, I get: POST http://localhost:1337/api/profiles?populate=* 400 (Bad Request)

Should I add a controller? I don’t really understand how they work, and what exactly I should do.

Here is what I have so far:

document.addEventListener('DOMContentLoaded', function () {
    const profileForm = document.getElementById('profileForm');

    if (profileForm) {
        console.log('Profile form found in the DOM.');

        profileForm.addEventListener('submit', function (event) {
            event.preventDefault(); // Prevent default form submission

            const userId = localStorage.getItem('user_id');

            fetch(`http://localhost:1337/api/users/${userId}`, {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer 07435bafa8d1301b8f5745d3009745978861bc2f1e2b59e4572400415d999c5f5d05b83844acbcba7b06e1c30253895a3868bb7b36d2f660d651c080a502b731b9b43c07b4b0b270d996591f3911fc145d100ceb139ca11e62810434211adc830e2b45b7ab6e4adcdef958738625574c614b3f923dfcca4f23d749d02d16970c',
                    'Content-Type': 'application/json'
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to fetch user data');
                    return response.json();
                .then(userData => {
                    console.log('User data fetched successfully:', userData);

                    const username = userData.username;
                    const email =;

                    const requestBody = {
                        data: {
                            profilePicture: profileForm.querySelector('#profilePicture').value,
                            firstName: profileForm.querySelector('#firstName').value,
                            lastName: profileForm.querySelector('#lastName').value,
                            bio: profileForm.querySelector('#bio').value,
                            location: profileForm.querySelector('#location').value,
                            username: username,
                            email: email,
                            user: {
                                "id": userId

                    console.log('Request body constructed:', requestBody);

                    fetch(`http://localhost:1337/api/profiles?populate=*`, {
                        method: 'POST',
                        headers: {
                            'Authorization': 'Bearer 07435bafa8d1301b8f5745d3009745978861bc2f1e2b59e4572400415d999c5f5d05b83844acbcba7b06e1c30253895a3868bb7b36d2f660d651c080a502b731b9b43c07b4b0b270d996591f3911fc145d100ceb139ca11e62810434211adc830e2b45b7ab6e4adcdef958738625574c614b3f923dfcca4f23d749d02d16970c',
                            'Content-Type': 'application/json'
                        body: JSON.stringify(requestBody)
                        .then(response => response.json())
                        .then(data => {
                            if (!data.errors) {
                                console.log('Profile created successfully:',;
                                // Handle successful profile creation here (e.g., display success message)
                            } else {
                                console.error('Error creating profile:', data.errors);
                                // Handle profile creation errors here (e.g., display error message)
                        .catch(error => {
                            console.error('Error creating profile:', error);
                            // Handle network or other errors here
                .catch(error => {
                    console.error('Error fetching user data:', error);
                    // Handle error here
    } else {
        console.error('Profile form element not found in the DOM.');

and here is the controller profile.js:

'use strict';

const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController('api::profile.profile', {
    beforeCreate: async (ctx) => {
        // Access user data from the request body
        const userId =;

        if (!userId) {
            ctx.throw(400, 'Missing user ID in request body');
        } = userId;

This is what I get in the browser console:

post_profile.js:5 Profile form found in the DOM.

   GET http://localhost:8000/pages/assets/img/favicon.ico 404 (Not Found)

post_profile.js:26 User data fetched successfully: {id: 8, username: ‘victoria.chiciuc14’, email: ‘’, provider: ‘auth0’, confirmed: true, …}
post_profile.js:46 Request body constructed: {data: {…}}

   POST http://localhost:1337/api/profiles?populate=* 400 (Bad Request)

(anonymous) @ post_profile.js:48
Promise.then (async)
(anonymous) @ post_profile.js:25
post_profile.js:59 Profile created successfully: null