Working With ReactJS and OvermindJS - Integrating Firebase for Data Storage

We have been working through a simple authentication and create account flow using OvermindJS and ReactJS, using Ionic Framework React Components for the User Interface. The application covers Create Account, Save User Information, Login & Logout.

We are currently tracking the user information and the authentication status in the OvermindJS State, without managing the interaction with a real data backend which is what we are covering here. We will add a firebase api to the application and the integration point will be through effects.ts

Initialization

First for initialization, we can revisit our onInitialize function in overmind/index.ts. The call remains the same, but we will integrate firebase initialization to set the state and get the current user if necessary.

// overmind/index.ts
export const onInitialize: OnInitialize = async (
  { state, effects },
  overmind
) => {
  let user = await effects.initialize();
  state.currentUser = user;
  state.initialized = true;
};

TheonInitialize is used for setting the information based on the result from the effects call to firebase API.

// effects.ts
export const initialize = () => {
  return firebaseAPI.authInit();
};

// firebase-data.ts
export const authInit = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = firebaseApp
      .auth()
      .onAuthStateChanged((firebaseUser) => {
        unsubscribe();
        resolve(firebaseUser);
        return;
      });
  });
};

Create User

type UserInfo = {
  email: string;
  firstName: string;
  lastName: string;
  password: string;
  uid?:string
}

Overmind also provides a functional API to help you manage complex logic. This API is inspired by asynchronous flow libraries like RxJS, though it is designed to manage application state and effects.

• https://overmindjs.org/core/going-functional

Using the more functional approach to creating a user, we get introduced to operators.

Using various operators, piped together and checking for errors we can create the user, and additional user data while properly managing errors.

We are using pipe and catchError in this example today.

We want to executed the firebase api call to create the user and then store additional data in a new record in the user collection.

// actions.ts
export const createAccountAndUserRecord: Operator<void, any> = pipe(
  mutate(async ({ state, effects }, userInfo: any) => {
    state.error = null;
    state.currentUser = null;
    let { email, password } = userInfo;
    let newUserInfo = await effects.createAccount({ email, password });
    state.currentUser = { ...newUserInfo.user, uid: newUserInfo?.user?.uid };
  }),
  mutate(
    async ({ state, effects }, userInfo: any) => {
      let newUserInfo = await effects.createUserRecord(userInfo);
      state.currentUser = { ...newUserInfo?.data() };
    }
  ),
  catchError(({ state }, error: Error): Operator<Error, never> => {
    state.error = error;
    throw new Error(error.message);
  })
);

Looking into the associated effects.ts file where we call the APIs in the firebase-data.ts file

// effects.ts - create user
export const createAccount = async (userInfo: {
  email: string;
  password: string;
}) => {
  return await firebaseAPI.createAccount(userInfo);
};

// firebase-data.ts - firebase create user
export const createAccount = ({ email, password }:{
  email: string;
  password: string;
}) => {
  return firebaseApp.auth()
          .createUserWithEmailAndPassword(email, password);
};

Now we need to create the entry in the user collection by calling effects.createUserRecord

// effects.ts - create user record
export const createUserRecord = async (userInfo: {
  email: string;
  firstName: string;
  lastName: string;
  uid: string;
}) => {
  return await firebaseAPI.createUserRecord(userInfo);
};

// firebase-data.ts  - firebase create user record
export const createUserRecord = async (info: {
  email: string;
  firstName: string;
  lastName: string;
  uid: string;
}) => {
  let usersRef = firebase.firestore().collection("users").doc(info.uid);
  let created = firebase.firestore.Timestamp.fromDate(new Date());

  let newUserData = {
    ...info,
    created,
  };

  await usersRef.set(newUserData);

  return (await usersRef.get()).data();

};

In the file firebase-data.ts where we create user record by adding it to the users collection; you can see in the end where we are querying the record again.

return (await usersRef.get()).data();

That is because we want the user record with all of the data including the timestamp which was generated by the firebase server.

Login User

This is pretty straight forward, no a use of operators, just a straight call from actions to effects to firebase api

export const doLogin: Action<any, any> = async (
  { state, effects },
  credentials: { email: string; password: string }
) => {
  try {
    state.error = null;
    state.currentUser = null;

    let { user } = await effects.login(credentials);

    state.currentUser = {
      email: user?.email,
      username: user?.displayName || user?.email,
      uid: user?.uid,
    };
    return state.currentUser;
  } catch (error) {
    state.currentUser = null;
    state.error = error;
    return error;
  }
};

The actions and effects are literally just passing through the credential parameters from one to another.

// effects.ts - login
export const login = async ({
  email,
  password,
}: {
  email: string;
  password: string;
}) => {
  return await firebaseAPI.login(email, password);
};

// firebase-data.ts
export const login = (email: string, password: string) => {
  return firebaseApp.auth().signInWithEmailAndPassword(email, password);
};

Logout User

This is pretty straight forward also, no a use of operators, just a straight call from actions to effects to firebase api

// actions.ts
export const doLogout: AsyncAction<void, boolean> = async ({
  state,
  effects,
}) => {
  state.error = null;
  state.currentUser = null;

  await effects.logout();
  return true;
};

Once again, the actions and effects are literally just passing through the credential parameters from one to another.

// effects.ts
export const logout = async () => {
  return await firebaseAPI.logout();
};

// firebase-data.ts
export const logout = async () => {
  return await firebaseAPI.logout();
};

Conclusion

This is the last piece of the puzzle to create the account and to work through authentication with firebase as the backend database. There certainly are additional optimizations and changes that could be made, but this was meant to be a simple introduction to the concepts.

Please checkout the associated videos on YouTube and the source code in the GitHub Repo.

aaronksaunders / user-login-overmind-react

User Authentication & Account Creation Pattern In ReactJS with Ionic Framework & OvermindJS for state management

user-login-overmind-react

YOUTUBE TUTORIALS COVERING IONIC & REACTJS

#reactjs #javascript #overmindjs

User Authentication Pattern In ReactJS Using OvermindJS

Simple authentication flow using overmindjs and reactjs, using ionic framework components for the UI.

Tracking User Authentication State In ReactJS Using OvermindJS

Setup

The firebase information is stored in an env.js file that needs to be added to your project with your specific credentials

export const FIREBASE_CONFIG =  { 
  [ YOUR CREDENTIALS HERE ]
}

See Tags For Functionality

• Login/Logout - TAG-LOGIN-LOGOUT
• Create Account - TAG-CREATE-ACCOUNT
• Added Firebase - TAG-ADDED-FIREBASE

Associated Links

• Video https://www.youtube.com/watch?v=7u7AQ3YYteg
• Other Example - https://codesandbox.io/s/ionic-react-overmind-simple-0l8ue?file=/src/overmind/index.js
• Overmindjs - https://overmindjs.org/
• previous video - https://www.youtube.com/watch?v=IFbQ6jlQYWs
• source code - https://github.com/aaronksaunders/user-login-overmind-react

View on GitHub