Using Hook

authHelper.tsx

import * as React from "react";
import * as CookieHandler from "js-cookie";
import { Base64 } from "js-base64";

const getAuthToken = () => {
  const authToken = CookieHandler.get("auth_token");
  if (authToken) {
    return Base64.decode(authToken);
  }
  return "";
};

function useAuthState(
  state?: boolean,
): [boolean, (params: { id: string; password: string }) => void] {
  const [loginState, setLogin] = React.useState(false);

  function dispatch(params: { id: string; password: string }) {
    try {
      const encodedParams = Base64.encode(JSON.stringify(params));
      CookieHandler.set("auth_token", encodedParams);
      setLogin(true);
    } catch (err) {
      setLogin(false);
    }
  }

  if (state) {
    setLogin(state);
    return [state, dispatch];
  } else {
    const authToken = CookieHandler.get("auth_token");
    return [Boolean(authToken), dispatch];
  }
}

export { getAuthToken, useAuthState };

home.tsx

import * as React from "react";
import { useAuthState } from "../../helpers/authHelper";

const Home = () => {
  const [authState] = useAuthState();
  return (
    <div>
      HELLO WORLD! We R Vingle Developers!!
      <br />
      {authState ? "로그인을 환영합니다!!" : null}
    </div>
  );
};

export default Home;

menuBar.tsx

import * as React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";

// hooks
import { useAuthState } from "../../helpers/authHelper";

const MenuBarWrapper = styled.div`
  display: flex;
  align-items: center;

  a {
    display: block;
  }
  a + a {
    margin-left: 16px;
  }
`;

const MenuBar = () => {
  const [authState] = useAuthState();

  return (
    <MenuBarWrapper>
      <Link to="/home">HOME</Link>
      {authState ? "Already Logged in" : <Link to="/signin">Sign In</Link>}
    </MenuBarWrapper>
  );
};

export default MenuBar;

SignIn.tsx

import * as React from "react";
import { useAuthState } from "../../helpers/authHelper";
import { Redirect } from "react-router";

const SignIn = () => {
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [isSignedIn, setAuth] = useAuthState();
  if (isSignedIn) {
    return <Redirect to="/home" />;
  }

  const changeUsername: React.ChangeEventHandler<HTMLInputElement> = e => {
    setUsername(e.currentTarget.value);
  };
  const changePassword: React.ChangeEventHandler<HTMLInputElement> = e => {
    setPassword(e.currentTarget.value);
  };

  const handleSubmit = () => {
    setAuth({
      id: username,
      password,
    });
  };

  return (
    <div>
      <div>
        <input
          placeholder="Username"
          type="text"
          value={username}
          onChange={changeUsername}
        />
      </div>
      <div>
        <input
          placeholder="Password"
          type="password"
          value={password}
          onChange={changePassword}
        />
      </div>

      <input type="button" onClick={handleSubmit} value="Sign In" />
    </div>
  );
};
export default SignIn;