0

So I have a login/register function in node js that is using mongoose, express and JWT and it's working. And I also have a login and regiser forms in react. And I don't know how to make it that, if I enter the data in the form, it gets registered in the back-end code.

I have react running on port 3000 and express onn port 4000.

And I've tried using cors and axios, but I can't seem to really understand how they work.

1 Answer 1

1

So after looking at similar examples, I found out that you need to use cors with axios to achieve it. Here is my register form code for react.

import React, { useState } from "react";
import {
  Container,
  FormWrap,
  Icon,
  FormContent,
  Form,
  FormH1,
  FormLabel,
  FormInput,
  FormButton,
  Text,
} from "./SignupElements";
import axios from "axios";

const Signup = () => {
  const [registerUsername, setRegisterUsername] = useState("");
  const [registerPassword, setRegisterPassword] = useState("");
  const [registerEmail, setRegisterEmail] = useState("");

const register = () => {
    axios({
      method: "POST",
      data: {
        username: registerUsername,
        password: registerPassword,
        email : registerEmail,
      },
      withCredentials: true,
      url: "http://localhost:4000/user/signup",
    }).then((res) => console.log(res));
};


  return (
    <Container>
      <FormWrap>
        <Icon to="/">Amp Beats</Icon>
        <FormContent>
          <Form>
            <FormH1>Create an account</FormH1>
            <FormLabel htmlFor="for">Email</FormLabel>
            <FormInput
              type="email"
              onChange={(e) => setRegisterEmail(e.target.value)}
            ></FormInput>
            <FormLabel htmlFor="for">Username</FormLabel>
            <FormInput
              type="username"
              onChange={(e) => setRegisterUsername(e.target.value)}
            ></FormInput>
            <FormLabel htmlFor="for">Password</FormLabel>
            <FormInput
              type="password"
              onChange={(e) => setRegisterPassword(e.target.value)}
            ></FormInput>
            <FormButton type="submit" onClick={register}>
              Create Accout
            </FormButton>
            <Text>
              WARNING: This is just a test.
            </Text>
          </Form>
        </FormContent>
      </FormWrap>
    </Container>
  );
};

export default Signup;

And the back end code is too complicated, but basically you just have to require('cors') and make the app use cors. I'm bad at explainig so here's the code:

app.use(
  cors({
    origin: "http://localhost:3000", // <-- the react app url
    credentials: true,
  })
);

Thought I would post this answer in case anyone has the same problem.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.