2

I am building a react application and using a Sanity CMS for the backend but I am running into an issue whenever I try to load data into the backend from the client. Everything else works perfectly fine until a website visitor tries to send data from the client to the server. Here is the code where the error seems to be coming from.

import React, { useState } from 'react';

import { images } from '../../constants';
import { AppWrap, MotionWrap } from '../../wrapper';
import { client } from '../../client';

import './Footer.scss';

const Footer = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const { name, email, message } = formData;


  const handleChangeInput = (event) => {
    const { name, value } = event.target;

    setFormData({ ...formData, [name] : value})
  }

  const handleSubmit = () => {
    setLoading(true);

    const contact = {
      _type: 'contact',
      name: name,
      email: email,
      message: message
    }

    client.create(contact)
      .then(() => {
        setLoading(false);
        setIsFormSubmitted(true);
      })
      .catch(err => console.log(err));
  }
  return (
    <>
      <h2 className="head-text">Take a coffee & chat with me...</h2>
      <div className="app__footer-cards">
        <div className="app__footer-card">
          <img src={images.email} alt="email" />
          <a href="mailto:ecommercedock@gmail.com" className="p-text">ecommercedock@gmail</a>
        </div>
        <div className="app__footer-card">
          <img src={images.mobile} alt="mobile" />
          <a href="tel: +256 750 242627" className="p-text">+256 750 242627</a>
        </div>
      </div>

      {!isFormSubmitted ?
        (<div className="app__footer-form app__flex">
          <div className="app__flex">
            <input className='p-tex' type="text" placeholder='Your Name' name='name' value={name} onChange={handleChangeInput} />
          </div>
          <div className="app__flex">
            <input className='p-tex' type="email" placeholder='Your Email' name='email' value={email} onChange={handleChangeInput} />
          </div>
          <div>
            <textarea
              className='p-text'
              placeholder='Your Message'
              name="message"
              value={message}
              onChange={handleChangeInput}
            />
          </div>
          <button type='button' className='p-text' onClick={handleSubmit}>{loading ? 'Sending' : 'Send Message'}</button>
        </div>)
        : (<div>
          <h3 className="head-text">Thank you for getting in touch with me....</h3>
        </div>)
      }
    </>
  )
}

export default AppWrap(
  MotionWrap(Footer, 'app__footer'),
  'contact',
  'app__whitebg'
)

What am I missing?? Any help is highly appreciated....

Here is the error from the client....

ClientError {response: {…}, statusCode: 403, responseBody: '{\n "error": {\n "description": "Mutation(s) fai…\n }\n ],\n "type": "mutationError"\n }\n}', details: {…}, message: 'Mutation(s) failed with 1 error(s)', …} details : {description: 'Mutation(s) failed with 1 error(s)', items: Array(1), type: 'mutationError'} response : {body: {…}, url: 'https://txqnnsbx.api.sanity.io/v2022-10-26/data/mu…turnIds=true&returnDocuments=true&visibility=sync', method: 'POST', headers: {…}, statusCode: 403, …} responseBody : "{\n "error": {\n "description": "Mutation(s) failed with 1 error(s)",\n "items": [\n {\n "error": {\n "description": "Insufficient permissions; permission \"create\" required",\n "permission": "create",\n "type": "insufficientPermissionsError"\n },\n "index": 0\n }\n ],\n "type": "mutationError"\n }\n}" statusCode : 403 message : "Mutation(s) failed with 1 error(s)" name : "ClientError" stack : "ClientError: Mutation(s) failed with 1 error(s)\n at onResponse (http://localhost:3000/static/js/bundle.js:3970:13)\n at applyMiddleware (http://localhost:3000/static/js/bundle.js:8712:23)\n at onResponse (http://localhost:3000/static/js/bundle.js:8032:22)\n at http://localhost:3000/static/js/bundle.js:8004:16\n at onLoad (http://localhost:3000/static/js/bundle.js:8565:5)\n at xhr. (http://localhost:3000/static/js/bundle.js:8447:5)" [[Prototype]] : BaseError

coding beast
  • 41
  • 4

3 Answers3

0

403 means you are not allowed to mutate. You need to check the authorization part of the app on the backend where visitors do not have access to send requests.

Elvin
  • 565
  • 1
  • 5
  • 12
0

you should add your API key directly to the client.js instead of using process.env. worked for me

toyota Supra
  • 3,181
  • 4
  • 15
  • 19
Bello
  • 1
  • 1
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34796567) – XMehdi01 Aug 10 '23 at 22:23
-1

The solution to this problem is most probably sanity mange and a cors authentication error. So you should add your local address and this error should go my case was http://localhost:3000/login/ then you give correct permisions

fitzo95
  • 1
  • You should post if you certainly know the answer, I would avoid posts in cases where it's "probably" the answer. – shadow2020 Nov 21 '22 at 18:59