Ionic React 6 Type Script - Login Page #2 With Parse Back4app & MongoDB

Опубликовано: 19 Март 2026
на канале: AGWS | And Go Web Solutions
272
0

00:00 | 02:59 Explaining Tasks today and artwork used by undraw.co [x]
02:59 | 05:37 Creating Login Page & changing redirect to the login page [x]
05:37 | 20:45 Creating Login Page Inputs and Simple GUI
20:45 | 25:01 Added Login Dynamic Inputs using useState Hook[x]
25:01 | 32:40 Added handle Login async arrow function to handle login request from back end
25:01 | 32:40 Added IonRouterLink to add a link to go to the register page [x]
32:40 | 40:25 -Successfully passing the login data and Debugging the User object data from back4app [x]


Today i am going to show to you guys how to start developing in ionic 6, react with building a simple register page and connecting it to a backend utlizing properties , useEffect and useState hooks aswell as an async await function.

#Demo
https://github.com/andgo-edu/ionic6-r...

#Requirements
1. Node JS
2. Ionic Client
npm install -g @ionic/cli
3.yarn
npm install -g yarn


2. To start using this application

Signup at [](https://www.back4app.com)
Update API Keys in App.tsx

```
const PARSE_APPLICATION_ID = "";
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
const PARSE_JAVASCRIPT_KEY = "";
```


#### Part 2 Login and restricting only logged in users Tasks Done

Added Login GUI [x]
Added Login Dynamic Inputs using useState Hook [x]
Added handleLogin async arrow function to handle login request from backend[x]
Restricting Access Only to LoggedIn User []
Remove Login Page Content if user is logged in []

Part 2 References -
1. [(Limpitsouni,K & Gesoulis,A , 2022 ) Undraw Open Source SVG Elements© 2022 · Katerina Limpitsouni · All rights reserved ](https://undraw.co/search)-
2. [Animated SVG icons Loaf](https://getloaf.io/)-
3. [Cloudinary Image CDN](https://cloudinary.com/)-
4. [Back4app Docs Login](https://dashboard.back4app.com/apidoc...
5. [Async arrow function javascript MDN Docs](https://developer.mozilla.org/en-US/d...
6. [Async arrow function typescript docs](https://www.typescriptlang.org/docs/h...)