2. Algorithm
  3. rest api - How the wordpress login and signup in react native app

rest api - How the wordpress login and signup in react native app

admin2025-01-08  4

Can anyone help me to login and sign up in reactnative app
i have a Wordpress website and i want to link my wordpress site to reactnative app.
search lots of solution but no one help me. i am using jwt auth plugin but don't know how to integrate this in reactapp.?

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Alert,
  Text,
  StatusBar,
  Image,
  TextInput,
  TouchableOpacity,
  ImageBackground,
  ActivityIndicator,
  FlatList,
  Button,
  Linking
} from 'react-native'; 
import AsyncStorage from '@react-native-community/async-storage';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

const userInfo = {username:'demo',password:'demo'};
class HomeScreen extends React.Component {
    static navigationOptions = {
        header: null
    };
    constructor( props ) {
        super( props );
        this.state = {
            username:'',
            password:''
        }
    }
    _onPressButton() {
        Alert.alert('Login','Social login');
      }
    _signin = async()=> {
        await AsyncStorage.setItem('logged', '1');
        if( userInfo.username===this.state.username && userInfo.password===this.state.password) {
            this.props.navigation.navigate('Dashboard');
        }
        else {
            alert('Username / Password Incorrect');
        }
    }
    _retrieveData = async () => {
        const logged = await AsyncStorage.getItem('logged'); 
        this.props.navigation.navigate( logged !== '1' ? 'Auth' : 'App' );
    }
  render() {
  const {navigate} = this.props.navigation;
  return (
    <>
     <StatusBar backgroundColor="#22a86d" barStyle="light-content" /> 
    <ImageBackground source={require('./images/login_background.png')} style={styles.MainContainer}>
      <View style={styles.body}>
         <Image
          style={{width:230, height: 80,marginBottom:30,resizeMode: 'contain'}}
          source={require('./images/logo.png')}
        />

       <TextInput
        style={styles.input}
        placeholder="User Name"
        placeholderTextColor="#fff"
        value={this.state.username}
        onChangeText={(username)=>this.setState({username})}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        placeholderTextColor="#fff"
        value={this.state.password}
        onChangeText={(password)=>this.setState({password})}
        secureTextEntry={true}
      />

      <Text style={styles.forgot}>Forgot Password?</Text>


       <TouchableOpacity style={styles.userBtn} activeOpacity={0.9} 
        onPress={this._signin}>
        <Text style={styles.btnTxt}>Login</Text>
      </TouchableOpacity>

      <Text style={styles.account}>Don't have an account? 
        <Text style={styles.bold} onPress={() => navigate('Profile')}> Create Account</Text>
      </Text>

      <Text style={styles.signUp}>Signup with</Text>

      <View style={{flexDirection: 'row',marginTop:20}}>
        <TouchableOpacity activeOpacity={0.9} 
         onPress={this._onPressButton}>
        <Image
          style={{width:70, height: 60, resizeMode: 'contain'}}
          source={require('./images/fb.png')}
        />
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} 
         onPress={this._onPressButton}>
        <Image
          style={{width:70, height: 60,resizeMode: 'contain'}}
          source={require('./images/twitter.png')}
        />
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} 
         onPress={this._onPressButton}>
        <Image
          style={{width:70, height: 60,resizeMode: 'contain'}}
          source={require('./images/google.png')}
        />
        </TouchableOpacity>
        </View>
        </View>
   </ImageBackground>
    </>
  );
};
}
const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen},
  Dashboard: {screen: DashboardScreen},
  CampaignList: {screen: CampaignScreen},
  DonorList: {screen:DonorScreen},
});

const App = createAppContainer(MainNavigator);

export default App;

Can anyone help me to login and sign up in reactnative app
i have a Wordpress website and i want to link my wordpress site to reactnative app.
search lots of solution but no one help me. i am using jwt auth plugin but don't know how to integrate this in reactapp.?

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Alert,
  Text,
  StatusBar,
  Image,
  TextInput,
  TouchableOpacity,
  ImageBackground,
  ActivityIndicator,
  FlatList,
  Button,
  Linking
} from 'react-native'; 
import AsyncStorage from '@react-native-community/async-storage';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

const userInfo = {username:'demo',password:'demo'};
class HomeScreen extends React.Component {
    static navigationOptions = {
        header: null
    };
    constructor( props ) {
        super( props );
        this.state = {
            username:'',
            password:''
        }
    }
    _onPressButton() {
        Alert.alert('Login','Social login');
      }
    _signin = async()=> {
        await AsyncStorage.setItem('logged', '1');
        if( userInfo.username===this.state.username && userInfo.password===this.state.password) {
            this.props.navigation.navigate('Dashboard');
        }
        else {
            alert('Username / Password Incorrect');
        }
    }
    _retrieveData = async () => {
        const logged = await AsyncStorage.getItem('logged'); 
        this.props.navigation.navigate( logged !== '1' ? 'Auth' : 'App' );
    }
  render() {
  const {navigate} = this.props.navigation;
  return (
    <>
     <StatusBar backgroundColor="#22a86d" barStyle="light-content" /> 
    <ImageBackground source={require('./images/login_background.png')} style={styles.MainContainer}>
      <View style={styles.body}>
         <Image
          style={{width:230, height: 80,marginBottom:30,resizeMode: 'contain'}}
          source={require('./images/logo.png')}
        />

       <TextInput
        style={styles.input}
        placeholder="User Name"
        placeholderTextColor="#fff"
        value={this.state.username}
        onChangeText={(username)=>this.setState({username})}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        placeholderTextColor="#fff"
        value={this.state.password}
        onChangeText={(password)=>this.setState({password})}
        secureTextEntry={true}
      />

      <Text style={styles.forgot}>Forgot Password?</Text>


       <TouchableOpacity style={styles.userBtn} activeOpacity={0.9} 
        onPress={this._signin}>
        <Text style={styles.btnTxt}>Login</Text>
      </TouchableOpacity>

      <Text style={styles.account}>Don't have an account? 
        <Text style={styles.bold} onPress={() => navigate('Profile')}> Create Account</Text>
      </Text>

      <Text style={styles.signUp}>Signup with</Text>

      <View style={{flexDirection: 'row',marginTop:20}}>
        <TouchableOpacity activeOpacity={0.9} 
         onPress={this._onPressButton}>
        <Image
          style={{width:70, height: 60, resizeMode: 'contain'}}
          source={require('./images/fb.png')}
        />
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} 
         onPress={this._onPressButton}>
        <Image
          style={{width:70, height: 60,resizeMode: 'contain'}}
          source={require('./images/twitter.png')}
        />
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} 
         onPress={this._onPressButton}>
        <Image
          style={{width:70, height: 60,resizeMode: 'contain'}}
          source={require('./images/google.png')}
        />
        </TouchableOpacity>
        </View>
        </View>
   </ImageBackground>
    </>
  );
};
}
const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen},
  Dashboard: {screen: DashboardScreen},
  CampaignList: {screen: CampaignScreen},
  DonorList: {screen:DonorScreen},
});

const App = createAppContainer(MainNavigator);

export default App;
  • login
  • rest-api
  • plugin-json-api
  • signup
Share Improve this question asked Dec 26, 2019 at 6:46 fahimfahim 12 bronze badges 1
  • Try this [ User Login With WordPress using React Native](carlofontanos.com/user-login-with-wordpress-using-react-native) – Balalen Commented Jan 5, 2021 at 22:50
Add a comment  | 

1 Answer 1

Reset to default 0

Please Use Axios to make Post Request to WordPress. There is only one way to connect with WordPress is API you should create a Post request to Wordpress like this

axios.post('http://your-wordpress-website/api/',()=>{

})

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736270012a1396.html

rest apiHow the wordpress login and signup in react native app

最新回复(0)