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
Top comments (0)