User Registration

how to add a login screen to your ionic framework project introduction in this section you learn how to create a page, implement sign up, sign in and sign out to your ionic app this is how it will look like prerequisites to complete this quickstart, you need visual studio code (or any web ide you like) ionic framework an app created at back4app follow the new parse app tutorial to learn how to create a parse app at back4app at any time, you can access the complete ionic project built with this tutorial at our github repository 1 install parse sdk considering you have an existing ionic project, the first thing you need to do is to install parse sdk you can do it by running 2 set up app’s credentials open your app component ts app component ts , import parse parse and initialize its connection to back4app parse server app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; if you don’t know how to find your keys, check out the first ionic tutorial start from template 3 create the login page now, let’s create our login page luckly, ionic does everything to us all we need to do is to run the following command in this page view, we need to add inputs for username username and password password and two buttons, one for signing up and another one for signing in login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 let’s implement now the methods signin() signin() and signup() signup() referred in our login login view login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } learn more about signup() signup() at parse documentation login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } learn more about parse user login() parse user login() at parse documentation this is how it should look like 4 implement log out let’s move to our homepage (or the page the user will be directed after logging in) and implement the sign out first, go ahead, open home html and add a button for doing so login html 1 you are logged in! 2 3 4 5 log out 6 7 now, let’s implement the logout() logout() method and also add a toast toast component if the request fails home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } learn more about parse user logout() parse user logout() at parse documentation it should look like this 5 set root page an important feature of parse parse is that it remembers if a user is logged or not in a device it means that even if the user closes the app, you can still restore his session when the app is open with that, we can determine if the app initial page will be our loginpage loginpage or homepage homepage to do so, we just need to call currentasync() currentasync() it will return the user logged in or null null app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) learn more about parse user currentasync() parse user currentasync() at parse documentation finally, it’s all set up! at this point, just run ionic serve ionic serve and you will have a sign in, sign up and sign out features working that also remembers the logged user until he/she logs out