User Login

react native login sample using relay introduction in the last tutorial, you’ve implemented the user sign up to your react native app using back4app and relay in this guide, you’ll build the login mechanism complementing your app auth feature as you may know, parse already provides by default a user class user, which already has a ready to use graphql mutation to login in users when it is necessary for your app the flow here will be very similar to the user sign up tutorial you’‘ll build a login screen using formik, then this form will call the relay mutation the relay mutation will communicate with the back4app server handling the whole process of authentication at any time, you can access this project via our github repositories to checkout the styles and complete code https //github com/templates back4app/react native graphql relay js users goal at the end of this guide, you will have a react native application with the user login feature implemented, as shown below prerequisites an app created at back4app using the parse server version 3 10 or above you have to conclude the https //www back4app com/docs/react native/graphql/relay setup expect an app with a simple sign in form here we are using an expo app having a form with the username and password for this tutorial, we are going to use the expo as a react native framework; for this tutorial, we are going to use javascript as our default implementation language; for this tutorial we are going to use our style css sample; 1 creating sign in form if the application already has a form component, go to step 2 otherwise, feel free to follow our boilerplate the form is similar to the form used in the sign up doc you can also use it as a basis for login please go to user https //www back4app com/docs/react native/graphql/user sign up relay if you want to learn how to implement it the login form code should look like this 1 import react, {usestate} from 'react'; 2 import environment from ' / /relay/environment'; 3 import {formikprovider, useformik} from 'formik'; 4 import { button, text, textinput, view, touchableopacity } from 'react native'; 5 import styles from " / /style" 6&#x9; 7 const signin = () => { 8 const \[userlogged, setuserlogged] = usestate(null); 9&#x9; 10 const onsubmit = async (values) => { 11 // @todo the mutation will be implemented here 12 }; 13&#x9; 14 const formikbag = useformik({ 15 initialvalues { 16 username '', 17 password '', 18 }, 19 onsubmit, 20 }); 21&#x9; 22 const {handlesubmit, setfieldvalue} = formikbag; 23&#x9; 24 if (userlogged? id) { 25 return ( 26 \<view style={ {margintop 15, alignitems 'center'} }> 27 \<text>user {userlogged name} logged\</text> 28 \</view> 29 ); 30 } 31&#x9; 32 return ( 33 \<formikprovider value={formikbag}> 34 \<view style={styles login wrapper}> 35 \<view style={styles form}> 36 \<text>username\</text> 37 \<textinput 38 name={"username"} 39 style={styles form input} 40 autocapitalize="none" 41 onchangetext={(text) => setfieldvalue("username", text)} 42 /> 43 \<text>password\</text> 44 \<textinput 45 style={styles form input} 46 name={"password"} 47 autocapitalize="none" 48 securetextentry 49 onchangetext={(text) => setfieldvalue("password", text)} 50 /> 51 \<touchableopacity onpress={() => handlesubmit()}> 52 \<view style={styles button}> 53 \<text style={styles button label}>{"sign in"}\</text> 54 \</view> 55 \</touchableopacity> 56 \</view> 57 \</view> 58 \</formikprovider> 59 ); 60 }; 61&#x9; 62 export default signin; run your application, and you’ll see a screen as shown below please, look at the onsubmit function note that the relay mutation will be inside of this function again, it is not a problem if the application is not using formik once you’re implementing a form component, the relay mutation only needs to be called inside the submit function 2 creating the mutation using the colocation principle, let’s create a new folder called mutations the most closely to the form component if you want to learn more about colocation please go to https //www back4app com/docs/react native/graphql/get started relay graphql guide in the image below, you can see the colocation principle in practice everything related to the component is close to it a folder wraps the login component, and inside of it, you’ll create another folder called mutations in the mutations’ folder, you will create the relay mutation this pattern works perfectly on big projects every time you have a new mutation, put it close to the component that will use it inside this folder, you will create a new file called loginmutation js loginmutation js according to our working with users guide, where we explained the relay mutations, you will create a commit function, as shown below 1 function commit({ environment, input, oncompleted, onerror }) { 2 const variables = { input }; 3&#x9; 4 commitmutation(environment, { 5 mutation, 6 variables, 7 oncompleted, 8 onerror, 9 }); 10 } 11&#x9; 12 export default { 13 commit, 14 }; before going back to the form component, let’s create our variable that will receive the graphql fragment, representing the mutation the graphql fragment is what the relay compiler will read and match with schema graphql before the commitmutation, copy and paste the following code 1 const mutation = graphql` 2 mutation loginmutation($input logininput!) { 3 login(input $input) { 4 viewer { 5 user { 6 id 7 username 8 createdat 9 } 10 sessiontoken 11 } 12 } 13 } 14 `; final file 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation loginmutation($input logininput!) { 5 login(input $input) { 6 viewer { 7 user { 8 id 9 createdat 10 updatedat 11 username 12 } 13 sessiontoken 14 } 15 } 16 } 17 `; 18&#x9; 19 function commit({ environment, input, oncompleted, onerror }) { 20 const variables = { input }; 21&#x9; 22 commitmutation(environment, { 23 mutation, 24 variables, 25 oncompleted, 26 onerror, 27 }); 28 } 29&#x9; 30 export default { 31 commit, 32 }; since the graphql fragment represents the backend, to get the code of relay mutation, you can go to the https //www back4app com/docs/react native/graphql/users/back4app com/docs/parse graphql/graphql sign in and find the fragment run yarn relay yarn relay to generate the new mutation and update the files if everything is okay the types of mutation it will be generated and you can go forward 3 implement on submit function the submit step is the most important here is where the relay mutation magic happens this step gets the values of the form from the formik if the application is not using formik, the values need to be available here independent of the way they get it back to form component, let’s start the implementation of the relay mutation import the mutation 1 import loginmutation from ' /mutations/loginmutation'; inside of onsubmit function, stars creating the input variables 1 const onsubmit = (values) => { 2 const {username, password} = values; 3 const input = { 4 username, 5 password, 6 }; 7 } the values are injected by formik here, if you are not using formik, the values will likely come via the form’s native osubmit or as you prefer at last, call the mutation passing all props (remember to import them) 1 loginmutation commit({ 2 environment, 3 input, 4 oncompleted (response) => { 5 if(!response? login || response? login === null) { 6 alert('error while logging'); 7 return; 8 } 9&#x9; 10 const { viewer } = response? login; 11 const { sessiontoken, user } = viewer; 12&#x9; 13 if (sessiontoken !== null) { 14 setuserlogged(user); 15 alert(`user ${user username} successfully logged`); 16 return; 17 } 18 }, 19 onerror (errors) => { 20 alert(errors\[0] message); 21 }, 22 }); final result of onsubmit 1 const onsubmit = (values) => { 2 const { username, password } = values; 3 4 const input = { 5 username, 6 password, 7 }; 8&#x9; 9 loginmutation commit({ 10 environment, 11 input, 12 oncompleted (response) => { 13 if(!response? login || response? login === null) { 14 alert('error while logging'); 15 return; 16 } 17&#x9; 18 const { viewer } = response? login; 19 const { sessiontoken, user } = viewer; 20&#x9; 21 if (sessiontoken !== null) { 22 setuserlogged(user); 23 alert(`user ${user username} successfully logged`); 24 return; 25 } 26 }, 27 onerror (errors) => { 28 alert(errors\[0] message); 29 }, 30 }); 31 }; run your project, register your user and then check it on back4app dashboard the mutation will return the values from the server once the session token is returned, the application can start to manage it testing using the user created on the last tutorial if everything works ok, it will be showed an alert like below handling errors on commit mutation, the application can handle errors on onerror always will receive an array of errors the most common is this array has only one object containing the error message see the example below 1 { 2 "errors" \[ 3 { 4 "message" "invalid username/password ", 5 "locations" \[ 6 { 7 "line" 2, 8 "column" 3 9 } 10 ], 11 "path" \[ 12 "login" 13 ], 14 "extensions" { 15 "code" 202 16 } 17 } 18 ], 19 "data" { 20 "login" null 21 } 22 } based on this example feel free to create your our error handle by now, if some error is returned we just show it by an alert 1 onerror (errors) => { 2 alert(errors\[0] message); 3 }, conclusion you now have an application with a sign in feature fully working in the next guide, you will understand how to log out him using the same approach you will also use relay mutations to call our backend