Simple authentication and create account flow using Overmindjs and reactjs, using Ionic Framework React Components 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

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

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.

// 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

// overmind actions
const { actions } = useApp();

Calling the action when user submits a valid form.

// 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 for validation.

// 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

Working With ReactJS and OvermindJS - Create User Account

Video

Code Snippets

Additional Links/References