0

please tell me what I did wrong and why I have 403 axiosError? I am using React v17 and axios v0.27.2 and react-chat-engine v1.11.23 . how can I fix this problem?

here is my imports

import React, { useState, useEffect, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { ChatEngine } from "react-chat-engine";
import axios from "axios";

// Contexts
import { AuthContext } from "../contexts/AuthContextProvider";

and this is main code

const Chats = () => {
    const [loading, setLoading] = useState(true);
    const user = useContext(AuthContext);
    const navigate = useNavigate();

    useEffect(() => {
        if (!user) {
            navigate("/");
            return;
        }
        axios
            .get("https://api.chatengine.io/users/me/", {
                headers: {
                    "Project-ID": "6e1e7008-716b-4141-a15c-836f05f720dd",
                    "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.email);
                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":
                                    "8094d378-e224-4558-97bf-35ca877f8f8e",
                            },
                        })
                        .then(() => setLoading(false))
                        .catch((error) => console.log(error));
                });
            });
    }, [user, navigate]);

    const getFile = async (url) => {
        const response = await fetch(url);
        const data = await response.blob();
        return new File([data], "userPhoto.jpg", { type: "image/jpeg" });
    };

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

    return (
        <div>
            <ChatEngine
                height="calc(100vh - 50px)"
                projectID="6e1e7008-716b-4141-a15c-836f05f720dd"
                userName={user.email}
                userSecret={user.uid}
            />
        </div>
    );
};

export default Chats;

Also when I click on api Urls, opens a page and write HTTP 403 Forbidden. Generally i do not have access the api and chat engine.

Thanks for your help.

Sahand Torab Nejad
  • 1
  • 1

2 Answers2

0

To make a connection to the api server you need a private key that is placed at your API Keys section in your project dashboard. Then use it as axios header. You can see the example from the official POST example here

headers: {
   'PRIVATE-KEY': '{{private_key}}'
},
yohanes
  • 2,365
  • 1
  • 15
  • 24
0

I had the same issue with the same code. I fixed it by changing the VPN service. Please check your private key and test with other VPN services.

messEffect
  • 1