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

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

所以我想登录并注册连接到我的 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%',borderWidth: 1.5,borderColor: '#8ACE54',borderRadius: 50,paddingVertical: 28,borderRadius: 10,height: 50,paddingHorizontal: 20,inputText: {
    height: 50,fontSize: 17,forgot: {
    color: '#8ACE54',fontSize: 16,fontWeight: '600',marginLeft: 'auto',loginBtn: {
    width: '85%',backgroundColor: '#8ACE54',loginText: {
    color: 'white',fontWeight: '800',textTransform: 'uppercase',signUpText: {
    color: '#8ACE54',signUpText2: {
    fontWeight: '600',textTransform: 'capitalize',});

还有我的注册码：

import React from 'react';
import {
  TextInput,} 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,});

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

提前感谢您的帮助！！！