The authentication part of the ToDo Application CRUD Part of Application
-
Requirements
-
To start using this application
- Signup at back4app
- Update API Keys in App.tsx
const PARSE_APPLICATION_ID = "";
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
const PARSE_JAVASCRIPT_KEY = "";
yarn install
ionic serve
-
- Small Demo [x]
- Requirements [x]
- Setting up ionic project with Yarn instead of npm [x]
- Explainning basic project files [x]
- Creating backend with parse lowcode backend back4app [x]
- Creating Basic Project Structure [x]
- Setting up Pages Routing [Login, Register, Home] [x]
- Setting up GUI Register (styling) [x]
- Setting up function to handle register of user from api [x]
- setting up user inputs dynamically [x]
- passing properties to the front end (Connecting frontend with backend) [x]
- Fixing Initialze Error by passing the api url [x]
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
- Part 1 References
-
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
-
Added Redirect to Home when user Logs in [✔️] // 1 //setCurrent user as an object , user acts like an object in back4app // var [currentUser, setCurrentUser] = useState<Parse.Object | null>(null); // 1. add an async arrow function getCurrentUser to logout that currentUser [✔️] // 1.1 this function will return a Promise interface to complete the async operation[✔️] // 1.2 pass in the namespace <Parse.User | null> [✔️] // 1.3 create a new const currentUser: Parse.User | null = await Parse.User.current(); [✔️] // 1.4 Pass the currentUser state variable to the state setCurrentUser(currentUser) [✔️] // 1.5 return the currentUser to update it ; [✔️]
-
Added Restricing if statement of the Parse User object when someone trys to acces /login uri [✔️] //utilizng a checkCurrentUser async function that is going to check if the currentUser is empty or not
-
passing the function into a useEffect and calling it inside the useEffect .[✔️]