loading...
Cover image for Working With ReactJS and OvermindJS - Create User Account

Working With ReactJS and OvermindJS - Create User Account

aaronksaunders profile image Aaron K Saunders ・2 min read

Using OvermindJS (4 Part Series)

1) A Quick Intro To OvermindJS In ReactJS 2) User Login In React JS with OvermindJS 3) Working With ReactJS and OvermindJS - Create User Account 4) Working With ReactJS and OvermindJS - Integrating Firebase for Data Storage

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

Using OvermindJS (4 Part Series)

1) A Quick Intro To OvermindJS In ReactJS 2) User Login In React JS with OvermindJS 3) Working With ReactJS and OvermindJS - Create User Account 4) Working With ReactJS and OvermindJS - Integrating Firebase for Data Storage

Posted on Apr 20 by:

aaronksaunders profile

Aaron K Saunders

@aaronksaunders

See more, like and subscribe 👉🏾 ‪Aaron Saunders 📺 https://www.youtube.com/aaronsaundersci?sub_confirmation=1

Discussion

markdown guide