reactjs - POST 400 (BAD REQUEST) error for React Native/Flask/axios app

Question

I'm very beginner so I hope this isn't a dumb question. I've been googling this for hours and reading other posts but I can't seem to find a solution that works. Basically, I'm making an app that uses React Native for the frontend and Flask with SQLAlchemy for the backend. I'm trying to enter an email and password in my app to check if it's valid or not in the console. This is the full error:

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

I think this would be easiest to explain by showing all the relevant code. This is in the backend where I add my test email and password to the database:

with app.app_context():
    db.create_all()
    if db.session.query(User).filter_by(email='testing').count() < 1:
        db.session.add(User(
            email='testing',
            password=guard.hash_password('testPass'),
            roles='admin'
        ))
    db.session.commit()

This is also in the backend:

@app.route('/api/login', methods=['POST'])
def login():
    req = flask.request.get_json(force=True)
    email = req.get('email', None)
    password = req.get('password', None)
    user = guard.authenticate(email, password)
    ret = {'access_token': guard.encode_jwt_token(user)}
    return ret, 200

This is where I do the axios stuff:

import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://localhost:5000',
});

export default {
    
    getUser: ({ops}) =>
    instance({
        'method':'POST',
        'url':'/api/login',
    }),
}

And finally, this is in the frontend:

export default function LoginScreen() {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const onSubmitClick = ()=>{
    console.log("You pressed login")
    let opts = {
      'email': email,
      'password': password
    }
    console.log(opts)
    api.getUser(JSON.stringify(opts)).then(response => response.json())
      .then(token => {
        if (token.access_token){
          console.log(token)
        }
        else {
          console.log("Please type in correct username/password")
        }
      }).catch((error) => {
            console.log(error)
        })
  }

So in the console it's showing the "You pressed login" but it throws the error after that. I have no idea why. Additionally, I did curl -X POST -d "{"email":"testing", "password":"testPass"}" 127.0.0.1:5000/api/login in my command line and it gave me the token, so in this case I know that it can go to the URL fine. Any help at all I would be eternally grateful. Thank you

question from:https://stackoverflow.com/questions/66059693/post-400-bad-request-error-for-react-native-flask-axios-app

Answer 1

Waitting for answers