1

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

Lia S
  • 11
  • 2
  • as far as i understand, you try to send opts, but where do you pass it to the request body in the getUser method? – Mod3rnx Feb 05 '21 at 08:33
  • @oleksii Thank you for catching that! I changed the code to reflect this change but I'm still getting the same error:( The change is edited in above – Lia S Feb 06 '21 at 00:45
  • Sorry, I’m being dumb, react native doesn’t allow http connection, should be either https, or you need to add exceptions, see [here](https://stackoverflow.com/questions/42666142/how-to-make-http-requests-in-react-native-ios-application) – Mod3rnx Feb 06 '21 at 11:25

0 Answers0