React Native

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.

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][https://www.back4app.com/docs/parse-graphql/graphql-logout-mutation] 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;

Step 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { commitMutation, graphql } from 'react-relay';

const mutation = graphql`
  mutation LogOutMutation($input: LogOutInput!) {
    logOut(input: $input) {
      clientMutationId
    }
  }
`;

function commit({ environment, input, onCompleted, onError }) {
    const variables = { input };

    commitMutation(environment, {
        mutation,
        variables,
        onCompleted,
        onError,
    });
}

export default {
    commit,
};

Run yarn relay into your terminal to update the relay types:

Step 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:

1
import LogOutMutation from "./mutations/LogOutMutation";

Then, create the function responsible to call the LogOut Mutation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const handleLogout = async () => {
  LogOutMutation.commit({
    environment: environment,
    input: {},
    onCompleted: async () => {
      await AsyncStorage.removeItem('sessionToken');
      setSessionToken(null);
      alert('User successfully logged out');
    },
    onError: (errors) => {
      alert(errors[0].message);
    },
  });
};

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

1
2
3
if (sessionToken) {
  return <UserLoggedRenderer />;
}

To

1
2
3
4
5
6
7
8
if (sessionToken) {
  return (
    <>
      <UserLoggedRenderer />
      <Button title={'logout'} onPress={() => handleLogout()} />
    </>
  )
}

Import the Button from react-native lib import { Button, Text, TextInput, View, TouchableOpacity } from "react-native";

The application screen should look like this:

Step 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.