Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Manage Authentication State using React Context API

#react #ionic #webdev #tutorial

Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor : Manage Authentication State using React Context API

Overview

We modify the Ionic Framework ReactJS Two Tab Application from the previous lesson to now have a LoginPage Component.

The LoginPage Component is setup in a separate navigation stack than the navigation stack that supports the Two Tabs. I find this is an easier approach than wrapping each route with a protected function and it just is simpler to visually see what is happening in the application when reading the code.

The application changes the default Navigation Stack using IonicRouter from the Ionic implementation of React Navigation when the authentication state changes. The authentication state in managed in the new context component that we build in this video

const App: React.FC = () => {
  const { authValue } = React.useContext(AuthContext);

  return (
    <IonApp>
      {!authValue.authenticated ? (
        <IonReactRouter>
          <Route path="/login" component={LoginPage} exact={true} />
          <Route
            path="/"
            render={() => <Redirect to="/login" />}
            exact={true}
          />
          <Route
            path="*"
            render={() => <Redirect to="/login" />}
            exact={true}
          />
        </IonReactRouter>
      ) : (
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              {/* specify route to each of teh tabs*/}
              <Route path="/tab1" component={Tab1} exact={true} />
              <Route path="/tab2" component={Tab2} exact={true} />
              <Route
                path="/tab2/tab-detail"
                component={TabDetail}
                exact={true}
              />
              {/* default route is to tab1 */}
              <Route
                path="/"
                render={() => <Redirect to="/tab1" />}
                exact={true}
              />
            </IonRouterOutlet>
            {/* draw what the tab bar should look like*/}
            <IonTabBar slot="bottom">
              <IonTabButton tab={"tab1"} href={"/tab1"}>
                <IonLabel>{"Tab One"}</IonLabel>
              </IonTabButton>
              <IonTabButton tab={"tab2"} href={"/tab2"}>
                <IonLabel>{"Tab Two"}</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      )}
    </IonApp>
  );
};

We rename the context that we created to AuthContext and we add the authValues and expose functions to login and logout of the application.

Then in the application we access the context values for authentication status, authenticated and we use the functions when we want to login or logout.

export const AuthProvider: React.FC = ({ children }) => {
  // the reactive values
  const [authValues, setAuthValues] = React.useState<any>({
    authenticated: false,
    user: null,
  });

  const login = ({ user, password }: { user: string; password: string }) => {
    return new Promise((resolve) => {
      if (user === "aaron" && password === "aaron") {
        setAuthValues({
          authenticated: true,
          user: { user: user, id: "aaron-100" },
        });
        resolve(true);
      } else {
        resolve(false);
      }
    });
  };

  const logout = () => {
    setAuthValues({
      authenticated: false,
      user: null,
    });
    return Promise.resolve(true);
  };

  // the store object
  let state = {
    authValues,
    login,
    logout,
  };

  // wrap the application in the provider with the initialized context
  return <Context.Provider value={state}>{children}</Context.Provider>;
};