Как выполнять действия Auth с помощью Ionic 4 React с Rails

Question

Я на хакатоне и пытаюсь использовать Ionic 4 (react), который я никогда раньше не использовал для подключения к созданной мной базе данных Rails (auth выполняется на бэкэнде), которая размещена на heroku. Мне действительно просто нужно подключить к нему действия аутентификации на интерфейсе, и у меня так много проблем, и все, что я нахожу для ответов, находится в Angular Ionic, а не в React Ionic.

Приложение очень простое и на самом деле состоит из четырех основных страниц: одна - это стартовая страница, одна - страница ресурсов, одна - домашняя страница, а другая - страница входа в систему. На странице входа будет кнопка регистрации и входа (при отсутствии аутентификации), а также изменение пароля и выход из системы (при аутентификации). У меня есть отдельные страницы для входа, регистрации и смены пароля. Я искал в документации примеры и не нашел ни одного, есть ли какой-нибудь пример, который я мог бы использовать для чего-то подобного / как мне научиться это делать? Любой ввод очень полезен, спасибо!

Пока вот какая фигня у меня, в основном взята из:

import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';

// updateUserName = (event: any) => {
//   this.setState({ username: event.detail.value });
// };
const SignIn: React.FC = () => {
  login= () => {
    let url , credentials;
    if(this.state.action  == 'Login'){
      url = CONFIG.API_ENDPOINT + '/users/login';
      credentials = {
        "user": {
          "email": this.state.email,
          "password": this.state.password
        }
      }
    } else {
      url = CONFIG.API_ENDPOINT + '/users';
      credentials = {
        "user": {
          "email": this.state.email,
          "password": this.state.password,
          "username": this.state.username
        }
      }
    }
    fetch(url, {
      method: 'POST',
      headers: {
          "Content-Type": "application/json",
      },
      body: JSON.stringify(credentials)
    })
    .then((res) => {
      console.log(res);
      if(res.status == 200){
        return res.json();
      } else {
        if(this.state.action == 'SignUp') {
          throw new Error("Error creating user");
        } else {
          throw new Error("Error Logging in")
        }
      }

    } )
    .then(
      (result) => {
          console.log(result);
          localStorage.setItem("token",result.user.token);
          localStorage.setItem("username", result.user.username);
          localStorage.setItem("isLogin", "true");
          localStorage.setItem("email", result.user.email);

          this.event = new CustomEvent('loggedIn', {
            detail: true
          });
          window.dispatchEvent(this.event);
      },

      (error) => {
       console.error(error);
       this.setState({toastMessage: error.toString(), toastState: true});
      }
    )
  };

  render() {
    return(
      <IonHeader title="Login">Sign</IonHeader>
      <IonContent padding>
        <div className="ion-text-center">
          <img src={image} alt="logo" width="25%" />
        </div>
        <h1 className="ion-text-center conduit-title">conduit</h1>
        <IonToast
            isOpen={this.state.toastState}
            onDidDismiss={() => this.setState(() => ({ toastState: false }))}
            message= {this.state.toastMessage}
            duration={400}
          >
        </IonToast>
        <form action="">
          <IonItem>
            <IonInput  onIonChange={this.updateEmail} type="email" placeholder="Email"></IonInput>
          </IonItem>
          {this.state.action === 'SignUp' ?
            <IonItem>
              <IonInput onIonChange={this.updateUserName} type="text" placeholder="Username"></IonInput>
            </IonItem>
            : <></>
          }
          <IonItem>
            <IonInput onIonChange={this.updatePassword} type="password" placeholder="Password"></IonInput>
          </IonItem>
        </form>
        <IonButton onClick={this.login}>{this.state.action}</IonButton>
      </IonContent>
      <IonFooter>
        <IonToolbar text-center>
            Click here to <a onClick={this.toggleAction}>{this.state.action === 'Login'? 'SignUp' : 'Login'}</a>
        </IonToolbar>
      </IonFooter>
    </>
    )
  }
}