loading...
Cover image for User Login In React JS with OvermindJS

User Login In React JS with OvermindJS

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 flow using OvermindJS and reactjs, using ionic framework components for the user interface. This the second part in a series of videos looking at how to use OvermindJS as an alternative state management library for your javascript projects.

This project is written using reactjs with typescript and Ionic Framework

Setting up the state was pretty straight forward except for ensuring the types are set appropriately.

export type IState = {
  error: any;
  currentUser: any;
  isLoggedIn: boolean;
};

const state: IState = {
  error: null,
  currentUser: null,
  // derived value
  isLoggedIn: derived<IState, boolean>(
    (state: IState) => state.currentUser != null
  ),
};

// state config
export const config = {
    state,
    actions
}

// hook to provide access in components
export const useApp = createHook<typeof config>();

The authentication flow with protected routes is a fundamental basis for most applications. This example shows not only that flow, but the use of how to protect routes using the PrivateRoute function below.

export interface PrivateRouteProps extends RouteProps {
  component: any;
}

const PrivateRoute: React.SFC<PrivateRouteProps> = ({
  component: Component,
  ...props
}) => {
  const { state } = useApp();
  // use overmind to see if we have a user?
  let authUser = state.isLoggedIn;

  // if i have the login path, handle it differently...
  if (props.path === "/login") {
    return authUser ? <Redirect to="/" /> : <Route component={Login} />;
  }
  return (
    <Route
      {...props}
      render={(innerProps) => {
        return authUser ? (
          <Component {...innerProps} />
        ) : (
          <Redirect to="/login" />
        );
      }}
    />
  );
};

And the application of that function in the setup of react-router in

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/login" component={Login} exact={true} />
        <PrivateRoute path="/home" component={Home} exact={true} />
        <PrivateRoute
          path="/message/:id"
          component={ViewMessage}
          exact={true}
        />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

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