User Login

16min
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.
﻿JavaScript Example Repository﻿
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 Relay Environment setup tutorial:
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;
﻿
- 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 User Sign Up if you want to learn how to implement it. The Login form code should look like this:
JS
import React, {useState} from 'react';
import environment from '../../relay/environment';
import {FormikProvider, useFormik} from 'formik';
import { Button, Text, TextInput, View, TouchableOpacity } from 'react-native';
import Styles from "../../Style"

const SignIn = () => {
 const [userLogged, setUserLogged] = useState(null);

 const onSubmit = async (values) => {
   // @todo the mutation will be implemented here
 };

 const formikbag = useFormik({
   initialValues: {
     username: '',
     password: '',
   },
   onSubmit,
 });

 const {handleSubmit, setFieldValue} = formikbag;

 if (userLogged?.id) {
   return (
     <View style={ {marginTop: 15, alignItems: 'center'} }>
       <Text>User {userLogged.name} logged</Text>
     </View>
   );
 }

 return (
   <FormikProvider value={formikbag}>
       <View style={Styles.login_wrapper}>
           <View style={Styles.form}>
               <Text>Username</Text>
               <TextInput
                   name={"username"}
                   style={Styles.form_input}
                   autoCapitalize="none"
                   onChangeText={(text) => setFieldValue("username", text)}
               />
               <Text>Password</Text>
               <TextInput
                   style={Styles.form_input}
                   name={"password"}
                   autoCapitalize="none"
                   secureTextEntry
                   onChangeText={(text) => setFieldValue("password", text)}
               />
               <TouchableOpacity onPress={() => handleSubmit()}>
                   <View style={Styles.button}>
                       <Text style={Styles.button_label}>{"Sign in"}</Text>
                   </View>
               </TouchableOpacity>
           </View>
       </View>
   </FormikProvider>
 );
};

export default SignIn;
import React, {useState} from 'react';
import environment from '../../relay/environment';
import {FormikProvider, useFormik} from 'formik';
import { Button, Text, TextInput, View, TouchableOpacity } from 'react-native';
import Styles from "../../Style"

const SignIn = () => {
 const [userLogged, setUserLogged] = useState(null);

 const onSubmit = async (values) => {
   // @todo the mutation will be implemented here
 };

 const formikbag = useFormik({
   initialValues: {
     username: '',
     password: '',
   },
   onSubmit,
 });

 const {handleSubmit, setFieldValue} = formikbag;

 if (userLogged?.id) {
   return (
     <View style={ {marginTop: 15, alignItems: 'center'} }>
       <Text>User {userLogged.name} logged</Text>
     </View>
   );
 }

 return (
   <FormikProvider value={formikbag}>
       <View style={Styles.login_wrapper}>
           <View style={Styles.form}>
               <Text>Username</Text>
               <TextInput
                   name={"username"}
                   style={Styles.form_input}
                   autoCapitalize="none"
                   onChangeText={(text) => setFieldValue("username", text)}
               />
               <Text>Password</Text>
               <TextInput
                   style={Styles.form_input}
                   name={"password"}
                   autoCapitalize="none"
                   secureTextEntry
                   onChangeText={(text) => setFieldValue("password", text)}
               />
               <TouchableOpacity onPress={() => handleSubmit()}>
                   <View style={Styles.button}>
                       <Text style={Styles.button_label}>{"Sign in"}</Text>
                   </View>
               </TouchableOpacity>
           </View>
       </View>
   </FormikProvider>
 );
};

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.
- 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 Getting Started 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. According to our Working with users guide, where we explained the Relay Mutations, you will create a commit function, as shown below.
JS
function commit({ environment, input, onCompleted, onError }) {
 const variables = { input };

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

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

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

export default {
 commit,
};
﻿
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:
JS
const mutation = graphql`
 mutation LogInMutation($input: LogInInput!) {
   logIn(input: $input) {
     viewer {
       user {
         id
         username
         createdAt
       }
       sessionToken
     }
   }
 }
`;
const mutation = graphql`
 mutation LogInMutation($input: LogInInput!) {
   logIn(input: $input) {
     viewer {
       user {
         id
         username
         createdAt
       }
       sessionToken
     }
   }
 }
`;
﻿
Final file:
JS
import { commitMutation, graphql } from 'react-relay';

const mutation = graphql`
 mutation LogInMutation($input: LogInInput!) {
   logIn(input: $input) {
     viewer {
       user {
         id
         createdAt
         updatedAt
         username
       }
       sessionToken
     }
   }
 }
`;

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

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

export default {
 commit,
};
import { commitMutation, graphql } from 'react-relay';

const mutation = graphql`
 mutation LogInMutation($input: LogInInput!) {
   logIn(input: $input) {
     viewer {
       user {
         id
         createdAt
         updatedAt
         username
       }
       sessionToken
     }
   }
 }
`;

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

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

export default {
 commit,
};
﻿
Since the GraphQL Fragment represents the backend, to get the code of Relay Mutation, you can go to the Back4App GraphQL Cookbook and find the Fragment.
Run 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.
- 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
JS
import LogInMutation from './mutations/LogInMutation';
import LogInMutation from './mutations/LogInMutation';
﻿
Inside of OnSubmit function, stars creating the input variables:
JS
const onSubmit = (values) => {
   const {username, password} = values;
   const input = {
       username,
       password,
   };
}
const onSubmit = (values) => {
   const {username, password} = values;
   const input = {
       username,
       password,
   };
}
﻿
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).
JS
   LogInMutation.commit({
     environment,
     input,
     onCompleted: (response) => {
       if(!response?.logIn || response?.logIn === null) {
         alert('Error while logging');
         return;
       }

       const { viewer } = response?.logIn;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         setUserLogged(user);
         alert(`user ${user.username} successfully logged`);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
   LogInMutation.commit({
     environment,
     input,
     onCompleted: (response) => {
       if(!response?.logIn || response?.logIn === null) {
         alert('Error while logging');
         return;
       }

       const { viewer } = response?.logIn;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         setUserLogged(user);
         alert(`user ${user.username} successfully logged`);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
﻿
Final result of onSubmit
JS
const onSubmit = (values) => {
   const { username, password } = values;
   
   const input = {
     username,
     password,
   };

   LogInMutation.commit({
     environment,
     input,
     onCompleted: (response) => {
       if(!response?.logIn || response?.logIn === null) {
         alert('Error while logging');
         return;
       }

       const { viewer } = response?.logIn;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         setUserLogged(user);
         alert(`user ${user.username} successfully logged`);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
};
const onSubmit = (values) => {
   const { username, password } = values;
   
   const input = {
     username,
     password,
   };

   LogInMutation.commit({
     environment,
     input,
     onCompleted: (response) => {
       if(!response?.logIn || response?.logIn === null) {
         alert('Error while logging');
         return;
       }

       const { viewer } = response?.logIn;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         setUserLogged(user);
         alert(`user ${user.username} successfully logged`);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
};
﻿
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:
{
 "errors": [
   {
     "message": "Invalid username/password.",
     "locations": [
       {
         "line": 2,
         "column": 3
       }
     ],
     "path": [
       "logIn"
     ],
     "extensions": {
       "code": 202
     }
   }
 ],
 "data": {
   "logIn": null
 }
}
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:
JS
 onError: (errors) => {
   alert(errors[0].message);
 },
 onError: (errors) => {
   alert(errors[0].message);
 },
﻿
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.