User Logout

10min
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 GraphQL Logout Guide 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.
﻿JavaScript Example Repository﻿
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 GraphQL Logout Guide example for your respective version.
You have to conclude the Relay Environment setup tutorial:
You have to conclude the React Native Login sample using Relay:
You have to conclude the React Native User Logged:
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.
Copy and paste the following code inside:
JS
1	import { commitMutation, graphql } from 'react-relay';
2	
3	const mutation = graphql`
4	  mutation LogOutMutation($input: LogOutInput!) {
5	    logOut(input: $input) {
6	      clientMutationId
7	    }
8	  }
9	`;
10	
11	function commit({ environment, input, onCompleted, onError }) {
12	    const variables = { input };
13	
14	    commitMutation(environment, {
15	        mutation,
16	        variables,
17	        onCompleted,
18	        onError,
19	    });
20	}
21	
22	export default {
23	    commit,
24	};
1	import { commitMutation, graphql } from 'react-relay';
2	
3	const mutation = graphql`
4	  mutation LogOutMutation($input: LogOutInput!) {
5	    logOut(input: $input) {
6	      clientMutationId
7	    }
8	  }
9	`;
10	
11	function commit({ environment, input, onCompleted, onError }) {
12	    const variables = { input };
13	
14	    commitMutation(environment, {
15	        mutation,
16	        variables,
17	        onCompleted,
18	        onError,
19	    });
20	}
21	
22	export default {
23	    commit,
24	};
﻿
Run yarn relay into your terminal to update the relay types:
﻿
2 - Creating logout button
Now, open the FormSignIn.js component. Let’s add the Logout Button and call the Relay Mutation.
Import the new Relay Mutation on begin of file:
JS
1	import LogOutMutation from "./mutations/LogOutMutation";
1	import LogOutMutation from "./mutations/LogOutMutation";
﻿
Then, create the function responsible to call the LogOut Mutation:
JS
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	};
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:
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:
JS
1   if (sessionToken) {
2     return <UserLoggedRenderer />;
3   }
1   if (sessionToken) {
2     return <UserLoggedRenderer />;
3   }
﻿
To
JS
1	if (sessionToken) {
2	  return (
3	    <>
4	      <UserLoggedRenderer />
5	      <Button title={'logout'} onPress={() => handleLogout()} />
6	    </>
7	  )
8	}
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";
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.
Updated 29 Mar 2024
Did this page help you?
Current User
Basic Operations