How to do Auth actions with Ionic 4 React with Rails - ruby-on-rails-4

Question

I'm at a hackathon and trying to use Ionic 4 (react) which I've never used before to connect to a Rails database that I made (auth is done on the backend) that is hosted on heroku. I really just need to connect the auth actions to it on the frontend and I'm running into so many issues, and everything I find for answers is in Angular Ionic and not for React Ionic.
The app is super simple and really just consists of 4 main pages, one is a start page, one is a resource page, one is a home page, and the other is a login page. The Login page will have a sign up and sign in button (when not authenticated) and change password and sign out (when authenticated). I'm having separate pages for sign in, sign up, and change password. I've looked in docs for examples and found none, is there any kind of example I could go off of for something similar/how do I go about learning how to do this? Any input is super helpful, thanks!
So far this is what garbage I have, mostly taken from :
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>
</>
)
}
}