CODEWITHSUNDEEP
djangoreact-nativedjango-rest-framework
johnobc
johnobc

Reputation: 581

django rest framework and react native user authentication with undefined response

I am very new to this and would like to know how to do this properly. My back end is a django rest framework and my front is under react native. my back end has users and my application requires token authentication to identify a user. After exploring react native further i know i will need to use fetch and post methods to access the api.

successful authentication should get the user to navigate to the main page

This is what i have so far:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    KeyboardAvoidingView,
    TouchableOpacity,
    AsyncStorage,
} from 'react-native';

export default class Form extends Component<{}> {

constructor(props){
    super(props);
    this.state = {
        username: "",
        password: "",

    }
}

componentDidMount(){
    this._loadInitialState().done();

}
_loadInitialState= async() => {
    var value = await AsyncStorage.getItem('user');
    if (value !== null){
        this.props.navigation.navigate('Main')
    }
}


render(){
    return(
        //<KeyboardAvoidingView style={styles.wrapper}>
        <View style={styles.container}>
            <TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Username"
                       onChangeText={ (username) => this.setState({username}) }
                       underlineColorAndroid='transparent' onSubmitEditing={()=> this.password.focus()}/>

            <TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Password"
                       onChangeText={ (password) => this.setState({password}) }
                       underlineColorAndroid='transparent' secureTextEntry={true} ref={(input) => this.password = input}/>
            <TouchableOpacity style={styles.button} onPress={this.login}>
                <Text style={styles.textButton}>{this.props.type}</Text>
            </TouchableOpacity>
        </View>
        //</KeyboardAvoidingView>
    );
}
login = () => {

    //alert(this.state.username);
    fetch('http://.../token-auth/', {
        method: 'POST',
        headers : {
            'Authorization': 'Token' + '4bd97c6a3da72d83cee684617f43718811db4d88', #random token
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username: this.state.username,
            password: this.state.password,
        })
    })
        .then((response) => response.json())
        .then((res) => {
            //alert(res.message);
            if (res.success === true){
                AsyncStorage.setItem('user', res.user);
                this.props.navigation.navigate('Main');
            }
            else{
                alert(res.message);

            }
        })
        .done();

I am getting undefined response. token-auth is my api response that returns the token. I know axios is another way to perform this, but do i really have to use axios?

this is the output from the console:

03-10 14:44:59.491  9464  9561 I ReactNativeJS:   statusText: undefined,
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   headers:
03-10 14:44:59.491  9464  9561 I ReactNativeJS:    { map:
03-10 14:44:59.491  9464  9561 I ReactNativeJS:       { allow: [ 'POST, OPTIONS' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         'content-type': [ 'application/json' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         'x-frame-options': [ 'SAMEORIGIN' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         server: [ 'WSGIServer/0.1 Python/2.7.14' ],
03-10 14:44:59.491  9464  9561 I ReactNativeJS:         date: [ 'Sat, 10 Mar 2018 14:44:53 GMT' ] } },
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   url: 'http://:8080/token-auth/',
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   _bodyInit: '{"token":"4bd97c6a3da72d83cee684617f43718811db4d88"}',
03-10 14:44:59.491  9464  9561 I ReactNativeJS:   _bodyText: '{"token":"4bd97c6a3da72d83cee684617f43718811db4d88"}' }
03-10 14:44:59.500  9464  9561 E ReactNativeJS: undefined is not an object (evaluating 'res.success')

Have i missed something crucial? a couple of pointers will be much appreciated. Thanks

Upvotes: 2

Views: 3129

Answers (1)

Simon Johansson
Simon Johansson

Reputation: 836

One minor but crucial mistake in your code is the missing space in

'Authorization': 'Token' + '4bd97c6a3da72d83cee684617f43718811db4d88'

change it to 

'Authorization': 'Token ' + '4bd97c6a3da72d83cee684617f43718811db4d88'

And you might come a step further. I compared your fetch script with mine and it is quite similar. During developing it might be helpful to change

.then((response) => response.json())

to

.then((response) => console.log(response))

To be sure what the problem really is.

The response did not contain any success key. Instead of

if (resjson.success===true ){

one should have

if (resjson.token ){

Upvotes: 5

Related Questions