Authentication

1. 리액트 앱에서 인증이 구동되는 원리(How Authentication Works In React Apps)
2. 사용자 인증 실행(Implementing User Authentication)
   • 프로트엔드의 리액트 앱이 인증을 시행하는 백엔드와 어떻게 소통하는지
3. 인증 지속성과 자동 로그아웃 추가(Adding Auth Persistence & Auto-Logout)
   • 인증 지속성: 사용자가 로그인 되어 있는지 아닌지 추적
   • 자동 로그아웃: 일정 시간이 지나면 자동으로 사용자를 로그아웃 시킴
   • ✅ 그 과정에서 새로운 라우팅 개념 다룸: query 매개변수 추가하기
   • 리액트 앱에 인증 추가하는 방법

라우팅 시 쿼리 매개변수 추가하기

로그인 페이지에서 같은 로그인 폼으로 로그인을 할 수도 있고 가입을 할 수도 있게 useState를 사용하여 만들어 두었는데, 대신 표준 웹 개념인 쿼리 매개변수(검색 매개변수)를 활용할 수있다.

• 쿼리 매개변수란 URL에서 ?물음표 뒤에 붙는 매개변수이다.
  예를 들면, 로그인 하는지, 아니면 가입하는지에 따라 mode라는 매개변수를 활용하여 url을 설정하여 설정된 용도에 따라 다른 양식을 로딩하는 것이다.

• 라우트 경로는 계속 /auth이지만 뒤에 매개변수를 추가하여 정확히 어떤 컴포넌트가 주어지는지 정의하면 된다.

• 따라서 직접 url을 입력하여 로그인/가입 페이지로 이동할 수 있다.

상태 기반 로직 > 쿼리 매개 변수 로직으로 대체하자.

쿼리 매개변수: useSearchParams()

쿼리 매개변수는 공식적으로는 검색(search) 매개변수라고 부른다.

1. const [searchParams, setSearchParams] = useSearchParams();
   useSearchParams()는 배열을 리턴하는데 구조분해할당으로 가져올 수 있다.

   • 첫 번째 인자
     현재 설정된 쿼리 매개변수에 접근권을 주는 객체
   • 두 번째 인자
     현재 설정된 쿼리 매개변수를 업데이트하는 함수
     • 여기서 함수는 필요 없다. 쿼리 매개변수 설정한 링크 활용해 업데이트하면 되기 때문이다.

2. const isLogin = searchParams.get("mode") === "login";
   특정 쿼리 매개변수에 대한 값 가져오는 get()메서드를 사용하여 "mode" 쿼리 매개변수를 가져와 그 값이 login인지 확인한다. 다른 값이면 가입모드가 된다.

📍/src/components/AuthForm.js

import { Form, Link, useSearchParams } from "react-router-dom";

import classes from "./AuthForm.module.css";

function AuthForm() {
  const [searchParams] = useSearchParams();
  const isLogin = searchParams.get("mode") === "login";

  return (
    <>
      <Form method="post" className={classes.form}>
        <h1>{isLogin ? "Log in" : "Create a new user"}</h1>
        <p>
          <label htmlFor="email">Email</label>
          <input id="email" type="email" name="email" required />
        </p>
        <p>
          <label htmlFor="image">Password</label>
          <input id="password" type="password" name="password" required />
        </p>
        <div className={classes.actions}>
          <Link to={`?mode=${isLogin ? "signup" : "login"}`}>
            {isLogin ? "Create new user" : "Login"}
          </Link>
          <button>Save</button>
        </div>
      </Form>
    </>
  );
}

export default AuthForm;

결과

• 로그인 화면 url: /auth?mode=login
  

• 가입 화면 url: /auth?mode=signup