Fixing Chat Engine API code that would give me a Status Code 403

Question

Trying to build chat engine IO page and getting status code 403, but all auth headers should be correct. combed for typos still could not find the issue. Console logging user shows my initial user but still getting no user loading screen and status code 403 and 400.

Checked for typos and placed user.email and UID still getting error.

import React, { useRef, useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { ChatEngine } from 'react-chat-engine';
import { auth } from '../firebase';

import axios from 'axios';
import { useAuth } from '../contexts/AuthContext';

 const Chats =() => {

    const history = useHistory();
    const { user } = useAuth();
    const [loading, setLoading] = useState(true);

    console.log(user);
    const handleLogout = async () => {
        await auth.signOut();
        history.push('/');
    }

    const getFile = async (url)  => {
        const response = await fetch(url); 
        const data = await response.blob();

        return new File([data], "userPhoto.jpg", { type: 'image/jpeg' });
    }

    useEffect(() => {
        if(!user) {
            history.push('/');
            
            return;
        }

        axios.get('https://api.chatengine.io/users/me', {
            headers: {
                "project-id":"0ccedd71-623f-40ee-8aec-178dca89d4c1",
                "user-name": user.email,
                "user-secret": user.uid,
            }
        })
        .then(() => {
            setLoading(false);
        })
        .catch(()  => {
            let formdata = new FormData();
            formdata.append('email', user.email);
            formdata.append('username', user.displayName);
            formdata.append('secret', user.uid);

            getFile(user.photoURL)
            .then((avatar) => {
                formdata.append('avatar', avatar, avatar.name);

                axios.post('https://api.chatengine.io/users',
                formdata,
                { headers: { "private-key": "my-private-key" }} //env variable
                )
                .then(() => setLoading(false))
                .catch((error) => console.log(error));
            })
        });
    }, [user, history])

    if(!user || loading) return 'Loading...';

    return (
        <div className='chats-page'>
            <div className='nav-bar'>
                <div className='logo-tab'>
                    Unichat
                </div>
                 <div onClick={handleLogout} className='logout-tab'>
                    Logout
                 </div>

            </div>
            
            <ChatEngine
            height="calc(100vh - 66px)"
            projectID="0ccedd71-623f-40ee-8aec-178dca89d4c1"
            userName={user.email}
            userSecret={user.uid}

            />
        </div>

            

    )
}

export default Chats;

Answer 1

changed formdata.append username - user.displayName to user.email and was able to get past 403 status code