User Logout

react native user logout introduction in this step you will create the user logout for react native using relay, the last implementation for this user’s section this step is simple and we will follow our https //www back4app com/docs/parse graphql/graphql logout mutation from our graphql cookbook you will implement the logout mutation and call it using a button into the react native application 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 to implement the logout feature to our react native app using relay and the back4app graphql api prerequisites for this tutorial we will use the parse server in the 4 4 version if you want to use other versions you can check the corresponding mutation code at https //www back4app com/docs/parse graphql/graphql logout mutation example for your respective version you have to conclude the https //www back4app com/docs/react native/graphql/relay setup you have to conclude the https //www back4app com/docs/react native/graphql/users/react native login sample you have to conclude the https //app archbee com/docs/ roxiyumxobue9i7uv49e/6qyoyumfldrtjjy7dcgnr 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; 1 creating the logout mutation back again to the signin folder, into mutations folder create a new file and call it logoutmutation js logoutmutation js copy and paste the following code inside 1 import { commitmutation, graphql } from 'react relay'; 2&#x9; 3 const mutation = graphql` 4 mutation logoutmutation($input logoutinput!) { 5 logout(input $input) { 6 clientmutationid 7 } 8 } 9 `; 10&#x9; 11 function commit({ environment, input, oncompleted, onerror }) { 12 const variables = { input }; 13&#x9; 14 commitmutation(environment, { 15 mutation, 16 variables, 17 oncompleted, 18 onerror, 19 }); 20 } 21&#x9; 22 export default { 23 commit, 24 }; run yarn relay yarn relay into your terminal to update the relay types 2 creating logout button now, open the formsignin js formsignin js component let’s add the logout button and call the relay mutation import the new relay mutation on begin of file 1 import logoutmutation from " /mutations/logoutmutation"; then, create the function responsible to call the logout mutation 1 const handlelogout = async () => { 2 logoutmutation commit({ 3 environment environment, 4 input {}, 5 oncompleted async () => { 6 await asyncstorage removeitem('sessiontoken'); 7 setsessiontoken(null); 8 alert('user successfully logged out'); 9 }, 10 onerror (errors) => { 11 alert(errors\[0] message); 12 }, 13 }); 14 }; what is happening into oncompleted oncompleted it is removing the session token from async storage because it is not valid anymore is cleaning the local usestate that retrieves the session token for the same reason above an alert saying the user it was logged out with success after, right below the userloggedrenderer, let’s implement the button responsible to call the logout from 1 if (sessiontoken) { 2 return \<userloggedrenderer />; 3 } to 1 if (sessiontoken) { 2 return ( 3 <> 4 \<userloggedrenderer /> 5 \<button title={'logout'} onpress={() => handlelogout()} /> 6 \</> 7 ) 8 } import the button from react native lib import { button, text, textinput, view, touchableopacity } from "react native" import { button, text, textinput, view, touchableopacity } from "react native" ; the application screen should look like this 3 testing testing the button, when click should be made the logout and appears an alert and, after should return to login page conclusion now you’ve implemented the main user authentication features necessary to any app your users can now signup, login, navigate on authenticated area and logout from your react native app using relay and back4app graphql api