User Registration

sign up page in react using parse introduction at the core of many apps, user accounts have a notion that lets users securely access their information parse provides a specialized user class called parse user parse user that automatically handles much of the functionality required for user account management in this guide, you will learn how the parse user parse user class works by creating a user registration feature for your react app using parse js sdk prerequisites to complete this tutorial, you will need a react app created and connected to back4app if you want to test/use the screen layout provided by this guide, you should set up the ant design ant design library goal to build a user registration feature using parse for a react app 1 understanding the signup method parse user management uses the parse user parse user object type, which extends the default parseobject parseobject type while containing unique helper methods, such as current current and getusername getusername , that will help you retrieve user data throughout your app you can read more about the parse user parse user object here at the official documentation https //parseplatform org/parse sdk js/api/master/parse user html in this guide, you will learn how to use the signup signup method that creates a new valid and unique parse user parse user object both locally and on the server, taking as arguments valid username username and password password values 2 create the user registration component let’s now build the functional component, which will call the signup signup method in our app first, create a new file in your src directory called userregistration js userregistration js ( userregistration tsx userregistration tsx if you are using typescript) and also add the needed input elements ( username username and password password inputs), using state hooks via usestate usestate to manage their data userregistration js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userregistration = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 return ( 12 \<div> 13 \<div classname="header"> 14 \<img 15 classname="header logo" 16 alt="back4app logo" 17 src={ 18 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 19 } 20 /> 21 \<p classname="header text bold">{'react on back4app'}\</p> 22 \<p classname="header text">{'user registration'}\</p> 23 \</div> 24 \<div classname="container"> 25 \<h2 classname="heading">{'user registration'}\</h2> 26 \<divider /> 27 \<div classname="form wrapper"> 28 \<input 29 value={username} 30 onchange={(event) => setusername(event target value)} 31 placeholder="username" 32 size="large" 33 classname="form input" 34 /> 35 \<input 36 value={password} 37 onchange={(event) => setpassword(event target value)} 38 placeholder="password" 39 size="large" 40 type="password" 41 classname="form input" 42 /> 43 \</div> 44 \<div classname="form buttons"> 45 \<button 46 onclick={() => douserregistration()} 47 type="primary" 48 classname="form button" 49 color={'#208aec'} 50 size="large" 51 > 52 sign up 53 \</button> 54 \</div> 55 \</div> 56 \</div> 57 ); 58 }; userregistration tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userregistration fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 return ( 12 \<div> 13 \<div classname="header"> 14 \<img 15 classname="header logo" 16 alt="back4app logo" 17 src={ 18 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 19 } 20 /> 21 \<p classname="header text bold">{'react on back4app'}\</p> 22 \<p classname="header text">{'user registration'}\</p> 23 \</div> 24 \<div classname='container'> 25 \<h2 classname="heading">{'user registration'}\</h2> 26 \<divider /> 27 \<div classname="form wrapper"> 28 \<input 29 value={username} 30 onchange={(event) => setusername(event target value)} 31 placeholder="username" 32 size="large" 33 classname="form input" 34 /> 35 \<input 36 value={password} 37 onchange={(event) => setpassword(event target value)} 38 placeholder="password" 39 size="large" 40 type="password" 41 classname="form input" 42 /> 43 \</div> 44 \<div classname="form buttons"> 45 \<button 46 onclick={() => douserregistration()} 47 type="primary" 48 classname="form button" 49 color={'#208aec'} 50 size="large" 51 > 52 sign up 53 \</button> 54 \</div> 55 \</div> 56 \</div> 57 ); 58 }; 3 create a sign up function you can now create the sign up function that will call the signup signup method javascript 1 const douserregistration = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 try { 6 // since the signup method returns a promise, we need to call it using await 7 const createduser = await parse user signup(usernamevalue, passwordvalue); 8 alert( 9 `success! user ${createduser getusername()} was successfully created!` 10 ); 11 return true; 12 } catch (error) { 13 // signup can fail if any parameter is blank or failed an uniqueness check on the server 14 alert(`error! ${error}`); 15 return false; 16 } 17 }; typescript 1 const douserregistration = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 try { 6 // since the signup method returns a promise, we need to call it using await 7 const createduser parse user = await parse user signup(usernamevalue, passwordvalue); 8 alert( 9 `success! user ${createduser getusername()} was successfully created!`, 10 ); 11 return true; 12 } catch (error any) { 13 // signup can fail if any parameter is blank or failed an uniqueness check on the server 14 alert(`error! ${error}`); 15 return false; 16 }; 17 }; note creating a new user using signup signup also makes it the currently logged in user, so there is no need for your user to log in again to continue using your app insert this function inside the userregistration userregistration component, just before the return return call, to be called and tested remember to update the form’s sign up button onclick onclick action to () => douserregistration() () => douserregistration() your component should now look like this userregistration js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userregistration = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 // functions used by the screen components 12 const douserregistration = async function () { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue = username; 15 const passwordvalue = password; 16 try { 17 // since the signup method returns a promise, we need to call it using await 18 const createduser = await parse user signup(usernamevalue, passwordvalue); 19 alert( 20 `success! user ${createduser getusername()} was successfully created!` 21 ); 22 return true; 23 } catch (error) { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert(`error! ${error}`); 26 return false; 27 } 28 }; 29&#x9; 30 return ( 31 \<div> 32 \<div classname="header"> 33 \<img 34 classname="header logo" 35 alt="back4app logo" 36 src={ 37 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 38 } 39 /> 40 \<p classname="header text bold">{'react on back4app'}\</p> 41 \<p classname="header text">{'user registration'}\</p> 42 \</div> 43 \<div classname="container"> 44 \<h2 classname="heading">{'user registration'}\</h2> 45 \<divider /> 46 \<div classname="form wrapper"> 47 \<input 48 value={username} 49 onchange={(event) => setusername(event target value)} 50 placeholder="username" 51 size="large" 52 classname="form input" 53 /> 54 \<input 55 value={password} 56 onchange={(event) => setpassword(event target value)} 57 placeholder="password" 58 size="large" 59 type="password" 60 classname="form input" 61 /> 62 \</div> 63 \<div classname="form buttons"> 64 \<button 65 onclick={() => douserregistration()} 66 type="primary" 67 classname="form button" 68 color={'#208aec'} 69 size="large" 70 > 71 sign up 72 \</button> 73 \</div> 74 \</div> 75 \</div> 76 ); 77 }; userregistration tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userregistration fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 // functions used by the screen components 12 const douserregistration = async function () promise\<boolean> { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue string = username; 15 const passwordvalue string = password; 16 try { 17 // since the signup method returns a promise, we need to call it using await 18 const createduser parse user = await parse user signup(usernamevalue, passwordvalue); 19 alert( 20 `success! user ${createduser getusername()} was successfully created!`, 21 ); 22 return true; 23 } catch (error any) { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert(`error! ${error}`); 26 return false; 27 }; 28 }; 29&#x9; 30 return ( 31 \<div> 32 \<div classname="header"> 33 \<img 34 classname="header logo" 35 alt="back4app logo" 36 src={ 37 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 38 } 39 /> 40 \<p classname="header text bold">{'react on back4app'}\</p> 41 \<p classname="header text">{'user registration'}\</p> 42 \</div> 43 \<div classname='container'> 44 \<h2 classname="heading">{'user registration'}\</h2> 45 \<divider /> 46 \<div classname="form wrapper"> 47 \<input 48 value={username} 49 onchange={(event) => setusername(event target value)} 50 placeholder="username" 51 size="large" 52 classname="form input" 53 /> 54 \<input 55 value={password} 56 onchange={(event) => setpassword(event target value)} 57 placeholder="password" 58 size="large" 59 type="password" 60 classname="form input" 61 /> 62 \</div> 63 \<div classname="form buttons"> 64 \<button 65 onclick={() => douserregistration()} 66 type="primary" 67 classname="form button" 68 color={'#208aec'} 69 size="large" 70 > 71 sign up 72 \</button> 73 \</div> 74 \</div> 75 \</div> 76 ); 77 }; also add these classes to your app css app css file to fully render the layout styles app css 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6&#x9; 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14&#x9; 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 font weight bold; 23 } 24&#x9; 25 p { 26 margin 0; 27 } 28&#x9; 29 body { 30 margin 0; 31 background color #fff; 32 } 33&#x9; 34 container { 35 width 100%; 36 max width 500px; 37 margin auto; 38 padding 20px 0; 39 text align left; 40 } 41&#x9; 42 header { 43 align items center; 44 padding 25px 0; 45 background color #208aec; 46 } 47&#x9; 48 header logo { 49 height 55px; 50 margin bottom 20px; 51 object fit contain; 52 } 53&#x9; 54 header text bold { 55 margin bottom 3px; 56 color rgba(255, 255, 255, 0 9); 57 font size 16px; 58 font weight bold; 59 } 60&#x9; 61 header text { 62 color rgba(255, 255, 255, 0 9); 63 font size 15px; 64 } 65&#x9; 66 heading { 67 font size 22px; 68 } 69&#x9; 70 form wrapper { 71 margin top 20px; 72 margin bottom 10px; 73 } 74&#x9; 75 form input { 76 margin bottom 20px; 77 } 78&#x9; 79 form button { 80 width 100%; 81 } your app now should look like this after providing the desired user credentials, you will see this message after pressing on sign up sign up if everything was successful error handling can be tested if you try to register a user with the same username as before you will get another error if you try to sign up with no password conclusion at the end of this guide, you learned how to register new parse users on react in the next guide, we will show you how to log in and out users