# 인증 예제

## 1. 설명 

* 파이어 베이스를 사용하지 않은 인증예제이다. 

## 2. 하려는 일 

* 브라우즈 페이지를 보호된 페이지로 만들고 로그인이 되어야만 들어갈 수 있도록 한다. 
* Firebase를 사용하지 않기 때문에 간단히 로그인의 버튼으로 인증 상태를 변경할 수 있도록 한다. 

## 3. 방법

* 브라우즈 페이지를 인증이 되야 입장이 가능하도록 만들기 위해서 보호된 라우터로 만든다. → `GuardRoute` 컴포넌트
* `GuardRoute` 컴포넌트에 인증을 확인하고 인증이 되면 보여지는 페이지와 인증이 아닐때 보여지는 페이지를 구분하도록 상태를 설정한다. 
* `auth` 컨텍스트에 인증 상태를 설정하고 해당 상태를 변경하는 `login()`, `logout()` 업데이트 함수를 만든다. 
* logInPage에서 버튼을 클릭했을 때 컨텍스트의 인증 상태가 변경되도록 업데이트 함수를 `useContext`로 받아온다. 
* 변경된 auth 컨텍스트의 상태는 `GuardRoute`에 반영되어 그려낼 페이지를 구분한다. 

{% embed url="<https://codesandbox.io/s/netflix-peiji-gujo-silseub-wanseong-kzidk>" %}

![인증 예제 이해를 돕기 위한 구조 그림 ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MUvgju6LfvawB02colu%2F-MUvgrC4nNFi_hT8wSkC%2Fimage.png?alt=media\&token=0f3e7745-90f2-4902-87bd-e2ac404142d7)