User Sign Up

20min
User Sign up with Relay
Introduction
The first thing your app will do is probably ask the user to sign up. Back4App/Parse already provides by default a class User, which already has a ready-to-use GraphQL Mutation to sign up new users when it is necessary for your app.
In this guide, you will create a Sign-Up feature for a React Native app using Relay to persist our data on Back4App.
The flow is very similar to create a Query Renderer. After implementation, the Relay Compiler will check Frontend(fragments) and Backend(data model) and return if everything matches. If so, the types and the application is already to communicate with the backend.
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 sign up feature implemented as show 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:
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 Up Form
If the application already has a Form component, go to step 2. Otherwise, feel free to follow our boilerplate.
We will use an Expo app having with which has a Form with the username and password. To make our life easier, we are going to use some third-party libraries to help build the SignUp feature. Our form component will use the formik library. It is important to note that it doesn’t infer the final result.
Install formik
yarn add formik
Create a new component and name it FormSignUp.js﻿
Paste the following code inside it:
JS
import React, { useState } from 'react';
import { Button, Text, TextInput, View, TouchableOpacity } from "react-native";
import { useFormik, FormikProvider } from 'formik';
import Styles from "../../Style"
import environment from '../../relay/environment';

const SignUp = () => {
 const [userCreated, setUserCreated] = useState();

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

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

 const { handleSubmit, setFieldValue } = formikbag;
 if (userCreated?.id) {
   return (
     <View style={ {marginTop: 15, alignItems: 'center'} }>
       <Text>User {userCreated.name} created</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 SignUp;
import React, { useState } from 'react';
import { Button, Text, TextInput, View, TouchableOpacity } from "react-native";
import { useFormik, FormikProvider } from 'formik';
import Styles from "../../Style"
import environment from '../../relay/environment';

const SignUp = () => {
 const [userCreated, setUserCreated] = useState();

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

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

 const { handleSubmit, setFieldValue } = formikbag;
 if (userCreated?.id) {
   return (
     <View style={ {marginTop: 15, alignItems: 'center'} }>
       <Text>User {userCreated.name} created</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 SignUp;
﻿
The application should run ok until here. The form should look like this:
﻿
Let’s situate our component explaining some points:
We are using formik to control our form values. You can also use a form with HTML, CSS, and JS.
styled-components will be used to give simple CSS styles for the component
There is a use state to control if our user was registered or not.
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 we are 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 the most closely to the Form Component. Name it as mutations. To remember about colocation you can go to our doc Getting Started, where we give a brief about it.
Exemplifying how handles the colocation, in the image below the component SignUp is wrapped by a folder. Inside of this folder is where we will create the folder mutations. And, inside of mutations folder, we will create the Relay Mutation. This works perfectly on big projects. Everything related to the component will be placed close to it and will be more easily work, find, etc.
﻿
use this approach for every new mutation of the application. Every time put it close to the component that will use it.
Inside this folder, you will create a new file called SignUpMutation.js. According to our last guide where we explained the Relay Mutations, you will create a function inside and call it commit. You can use the code 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 SignUpMutation($input: SignUpInput!) {
   signUp(input: $input) {
     viewer {
       user {
         id
         username
         createdAt
       }
       sessionToken
     }
   }
 }
`;
const mutation = graphql`
 mutation SignUpMutation($input: SignUpInput!) {
   signUp(input: $input) {
     viewer {
       user {
         id
         username
         createdAt
       }
       sessionToken
     }
   }
 }
`;
﻿
Final file:
JS
import {commitMutation, graphql} from 'react-relay';

const mutation = graphql`
 mutation SignUpMutation($input: SignUpInput!) {
   signUp(input: $input) {
     viewer {
       user {
         id
         username
         createdAt
       }
       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 SignUpMutation($input: SignUpInput!) {
   signUp(input: $input) {
     viewer {
       user {
         id
         username
         createdAt
       }
       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 SignUpMutation from './mutations/SignUpMutation';
import SignUpMutation from './mutations/SignUpMutation';
﻿
Inside of OnSubmit function, stars creating the input variables:
JS
const onSubmit = (values) => {
   const {username, password} = values;
   
   const input = {
     userFields: {
       username,
       password,
     },
   };
}
const onSubmit = (values) => {
   const {username, password} = values;
   
   const input = {
     userFields: {
       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
   SignUpMutation.commit({
     environment,
     input,
     onCompleted: ({signUp}) => {
       const { viewer } = signUp;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         alert(`user ${user.username} successfully created`);
         setUserCreated(user);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
   SignUpMutation.commit({
     environment,
     input,
     onCompleted: ({signUp}) => {
       const { viewer } = signUp;
       const { sessionToken, user } = viewer;

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

   SignUpMutation.commit({
     environment,
     input,
     onCompleted: ({signUp}) => {
       const { viewer } = signUp;
       const { sessionToken, user } = viewer;
   
       if (sessionToken !== null) {
         alert(`user ${user.username} successfully created`);
         setUserCreated(user);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
};
const onSubmit = (values) => {
   const { username, password } = values;
   
   const input = {
     userFields: {
       username,
       password,
     },
   };

   SignUpMutation.commit({
     environment,
     input,
     onCompleted: ({signUp}) => {
       const { viewer } = signUp;
       const { sessionToken, user } = viewer;
   
       if (sessionToken !== null) {
         alert(`user ${user.username} successfully created`);
         setUserCreated(user);
         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.
﻿
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": "Account already exists for this username.",
     "locations": [
       {
         "line": 2,
         "column": 3
       }
     ],
     "path": [
       "signUp"
     ],
     "extensions": {
       "code": 202
     }
   }
 ],
 "data": {
   "signUp": 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-up feature fully working. In the next guide, you will understand how to authenticate a user(login) and log out him using the same approach. You will also use Relay Mutations to call our backend.