Working With ReactJS and OvermindJS - Create User Account
Tags: react, javascript, webdev, tutorial
Published: 2020-04-20 15:36:42

Simple authentication and create account flow using [Overmindjs](https://overmindjs.org/) and reactjs, using [Ionic Framework React Components](https://ionicframework.com/react) for the User Interface.

We covered login/logout in the earlier video and in this one, we are covering Create Account and the integration of React-Hook-Form for validating the form field entries when creating the user.
> See previous post on React-Hook-Form : [Go to Post](https://dev.to/ionic/using-react-hook-form-with-ionic-react-components-2aab)

As in the last section, there is no integration to a backend, will be coming in later part of the series.

Link to video and code highlights below.

###Video
{% youtube FsVPYZey7ns %}

###Code Snippets
Adding actions to OvermindJS was covered in the previous post, we have just expanded the available actions by adding the new one to allow the user to create an account. We added the simulation of a fake duplicate account to show how the error is handled in the component.

```javascript
// actions.ts
export const doCreateAccount: AsyncAction<any, boolean> = async (
  { state },
  userInfo: {
    email: string;
    firstName: string;
    lastName: string;
    password: string;
  }
) => {
  return new Promise((resolve, reject) => {
    state.error = null;
    state.currentUser = null;

    // fake error message to show errors
    if ( userInfo.email === 'a@mail.com') {
      state.error = {message : 'user already exists'};
      reject(state.error);
      return;
    }

    // fake user
    let user = { ...userInfo };
    delete user.password;
    state.currentUser = { ...user, uid:'fake-0001' };
    resolve(true);
  });
};
```

Calling the action from the new `CreateAccount` reactjs component is like calling any other function. The function is available to in the code through the overmind hook

```javascript
// overmind actions
const { actions } = useApp();
```
Calling the action when user submits a valid form.
```javascript
// CreateAccount.tsx
const doCreateAccount = async (data: any) => {
  console.log(data);
  try {
    // return from react-hook-form when all fields are
    // valid
    const { email, firstName, lastName, password } = data;
    let response = await actions.doCreateAccount({
      email,
      firstName,
      lastName,
      password,
    });
    console.log(response);
    history.push("/home");
  } catch (error) {
    setError(error.message);
  }
};
```
An example of how we are utilizing React Hook Form with [Ionic Framework React Components](https://ionicframework.com/react) for validation.

```javascript
// CreateAccount.tsx
<IonItem>
  <IonLabel>First Name</IonLabel>
  <Controller
    as={<IonInput type="text"></IonInput>}
    onChangeName="onIonChange"
    name="firstName"
    rules={{ required: true }}
    control={control}
  />
</IonItem>
```

### Additional Links/References
- Overmindjs -  https://overmindjs.org/
- React Hook Form - https://react-hook-form.com/
- Previous video - https://www.youtube.com/watch?v=7u7AQ3YYteg
- Source code - https://github.com/aaronksaunders/user-login-overmind-react