如何在 react native 和 graphql apollo api 中进行身份验证

Question

所以我想登录并注册连接到我的 graphql api...我尝试研究，我发现了一些有用的教程/视频和一些制作它的网站，但它不起作用或与最新的 react-native 不兼容大多数代码都已弃用，我只是 React Native 的初学者... PLS HELP!!!

这些是我的研究...

https://www.youtube.com/watch?v=_kYUzNVyj-0

https://github.com/spencercarli/react-nativegraphql-auth-client

这是我找到的最有用的教程，但不幸的是，他在 4 年前编写了这个代码，那里的大部分东西都是旧的，我试图找到更多类似的东西，但由于运气不好，我无法......如果你们能帮我获得一些与新的 React Native 或您的代码兼容的链接，我将不胜感激。

顺便说一句，这是我的登录代码：

import React from 'react';
import {
  TextInput,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';
import logo from '../../assets/logo.png';
import CheckBOX from '../components/CheckBOX';

class Login extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.logoimage} source={logo}></Image>
        <Text style={styles.textHeader}>Log in!</Text>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Email Address"
            placeholderTextColor="#8ACE54"
            onChangeText={value => this.handleInputChange('email', value)}
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            secureTextEntry
            style={styles.inputText}
            placeholder="Password"
            placeholderTextColor="#8ACE54"
            onChangeText={value => this.handleInputChange('password', value)}
          />
        </View>
        <View style={{flexDirection: 'row'}}>
          <CheckBOX />
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('ForgetPassword')}>
            <Text style={styles.forgot}>Forgot your Password?</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('Home')}
          style={styles.loginBtn}>
          <Text style={styles.loginText}>LOGIN</Text>
        </TouchableOpacity>

        <View style={{flexDirection: 'row'}}>
          <Text style={styles.signUpText2}>Not yet registered? </Text>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Register')}>
            <Text style={styles.signUpText}> Signup</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default Login;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoimage: {
    height: 130,
    width: 200,
    marginBottom: 10,
  },
  textHeader: {
    fontWeight: 'bold',
    fontSize: 30,
    color: '#8ACE54',
    marginTop: 20,
    marginBottom: 20,
  },
  inputView: {
    width: '85%',
    backgroundColor: 'white',
    borderWidth: 1.5,
    borderColor: '#8ACE54',
    borderRadius: 50,
    paddingVertical: 28,
    borderRadius: 10,
    height: 50,
    marginBottom: 20,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  inputText: {
    height: 50,
    fontSize: 17,

    color: '#8ACE54',
  },
  forgot: {
    color: '#8ACE54',
    fontSize: 16,
    fontWeight: '600',
    marginLeft: 'auto',
  },
  loginBtn: {
    width: '85%',
    backgroundColor: '#8ACE54',
    borderRadius: 10,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
    marginBottom: 10,
  },
  loginText: {
    color: 'white',
    fontWeight: '800',
    textTransform: 'uppercase',
    fontSize: 16,
  },
  signUpText: {
    color: '#8ACE54',
    fontWeight: '800',
    textTransform: 'uppercase',
    fontSize: 16,
  },
  signUpText2: {
    fontWeight: '600',
    textTransform: 'capitalize',
    fontSize: 16,
  },
});

还有我的注册码：

import React from 'react';
import {
  TextInput,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';
import logo from '../../assets/logo.png';

class Register extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.logoimage} source={logo}></Image>
        <Text style={styles.textHeader}>Register!</Text>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Username"
            placeholderTextColor="#8ACE54"
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Email Address"
            placeholderTextColor="#8ACE54"
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Mobile Number"
            placeholderTextColor="#8ACE54"
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            secureTextEntry
            style={styles.inputText}
            placeholder="Password"
            placeholderTextColor="#8ACE54"
          />
        </View>

        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('Home')}
          style={styles.loginBtn}>
          <Text style={styles.loginText}>REGISTER</Text>
        </TouchableOpacity>
        <View style={{flexDirection: 'row'}}>
          <Text style={styles.signUpText2}>Already have an account? </Text>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Login')}>
            <Text style={styles.signUpText}>Login</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default Register;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoimage: {
    height: 130,
    width: 200,
    marginBottom: 10,
  },
  textHeader: {
    fontWeight: 'bold',
    fontSize: 30,
    color: '#8ACE54',
    marginTop: 20,
    marginBottom: 20,
  },
  inputView: {
    width: '85%',
    backgroundColor: 'white',
    borderWidth: 1.5,
    borderColor: '#8ACE54',
    borderRadius: 50,
    paddingVertical: 28,
    borderRadius: 10,
    height: 50,
    marginBottom: 20,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  inputText: {
    height: 50,
    fontSize: 17,

    color: '#8ACE54',
  },
  loginBtn: {
    width: '85%',
    backgroundColor: '#8ACE54',
    borderRadius: 10,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
  },
  loginText: {
    color: 'white',
    fontWeight: '800',
    textTransform: 'uppercase',
    fontSize: 16,
  },
  signUpText: {
    color: '#8ACE54',
    fontWeight: '800',
    textTransform: 'uppercase',
    fontSize: 16,
  },
  signUpText2: {
    fontWeight: '600',
    textTransform: 'capitalize',
    fontSize: 16,
  },
  signUpText2: {
    fontWeight: '600',
    textTransform: 'capitalize',
    fontSize: 16,
  },
});

如果我没有提供太多信息，您可以在评论中询问，看看我是否可以为您提供...

提前感谢您的帮助！！！