# 5-2. Auth Component
`src/components/Auth.js`:
## `Auth` 컴포넌트
1\) Background\
2\) `Auth` component overview\
3\) `Auth` component feature: User can input private key to login.\
4\) `Auth` component feature: User can import a keystore file and input password to log in.\
5\) `Auth` component feature: User can logout and clear the wallet instance information from the browser.
### 1) Background
In a blockchain-based app, we usually interact with smart contracts.\
There are 2 types of interactions with a contract.\ `1) Read data from a contract.` `2) Write data to a contract.`
It is cost-free to read data from contracts.\
On the other hand, there is a cost for writing data to contract.
cf) `Sending a transaction`\
Writing data to contracts or blockchain is called 'sending a transaction'.\ For example, if you send 5 KLAY to your friend, you could think of it as `writing data to the blockchain that I sent 5 KLAY to my friend`.\
Calling a contract method is the same. 즉 `변수 X를 100으로 설정하겠다는 데이터를 스마트 컨트랙트에 기록한다`고 볼 수 있습니다. 이처럼 블록체인이나 스마트 컨트랙트에 데이터를 기록하는 것과 관련된 모든 것은 `트랜잭션 보내기`랍니다.
To write data to contract, you should have a Klaytn account which has KLAY to pay for the transaction fee.\
`Auth` component helps you log in to your app.
### 2) `Auth` component overview
`'Auth.js'` 컴포넌트는 본 튜토리얼의 애플리케이션에서 가장 긴 코드입니다. 그러므로 코드를 세분화하여 하나씩 살펴보도록 할게요.
이 컴포넌트는 다음과 같은 사용자 인터페이스를 제공합니다. 
Main features are:\
1\) User can input private key to login.\ 2) User can import a keystore file and input password to login.\
3\) User can logout and clear the wallet instance information from the browser.
### 3) `Auth` component feature: User can input private key to login.
개인키로 로그인하려면 `integrateWallet` 메서드가 필요합니다.
```javascript
integrateWallet = (privateKey) => {
const walletInstance = cav.klay.accounts.privateKeyToAccount(privateKey)
cav.klay.accounts.wallet.add(walletInstance)
sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance))
this.reset()
}
```
`integateWallet` 함수는 `privateKey`를 인자로 받아서 지갑 인스턴스를 생성합니다.
Line 1: `const walletInstance = cav.klay.accounts.privateKeyToAccount(privateKey)`\
It stores the wallet instance made by `privateKeyToAccount` API to the `walletInstance` variable.
Line 2: `cav.klay.accounts.wallet.add(walletInstance)`\
To send a transaction, you should add a wallet instance to caver through `cav.klay.accounts.wallet.add(walletInstance)`.
Line 3: `sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance))`\
`sessionStorage.setItem` is a browser API used for storing a value to the browser's session storage.\
Since we want not to lose our logged-in status even we refresh our tutorial app page, we stored our wallet instance to the session storage as a JSON string.
cf) Items in the session storage disappears when the user closes the browser tab.
Line 4: `this.reset()`\
It resets the current component's state to the initial state to clear your input.
caver-js의 `privateKeyToAccount` API에 대한 자세한 안내는 [caver.klay.accounts.privateKeyToAccount](https://archive-ko.docs.klaytn.foundation/content/sdk/caver-js/v1.4.1/api-references/caver.klay.accounts#privatekeytoaccount)를 참고해주세요.
### 4) `Auth` component feature: User can import keystore file and input password to login.
키스토어와 비밀번호로 로그인하려면 `handleImport`와 `handleLogin` 메서드가 필요합니다.
```javascript
/**
* handleImport method takes a file, read
*/
handleImport = (e) => {
const keystore = e.target.files[0]
// 'FileReader'는 파일의 내용을 읽어오는 데에 사용됩니다.
// 'onload' 핸들러와 'readAsText' 메서드를 사용할 것입니다.
// * FileReader.onload
// - 이 이벤트는 읽기 작업이 완료될 때마다 발생합니다.
// * FileReader.readAsText()
// - 내용을 읽어오기 시작합니다.
const fileReader = new FileReader()
fileReader.onload = (e) => {
try {
if (!this.checkValidKeystore(e.target.result)) {
// If key store file is invalid, show message "Invalid keystore file."
this.setState({ keystoreMsg: 'Invalid keystore file.' })
return
}
// If key store file is valid,
// 1) set e.target.result keystore
// 2) show message "It is valid keystore. input your password."
this.setState({
keystore: e.target.result,
keystoreMsg: 'It is valid keystore. input your password.',
}, () => document.querySelector('#input-password').focus())
} catch (e) {
this.setState({ keystoreMsg: 'Invalid keystore file.' })
return
}
}
fileReader.readAsText(keystore)
}
```
To import a file from user, we use `FileReader` browser API.\
`e.target.files[0]` contains meta information for the file. To read the content of the file, we call `fileReader.readAsText(keystore)` API.\
After calling `fileReader.readAsText(keystore)`, `fileReader.onload` function fires to take the content of the file as `e.target.result`.\
After importing the keystore file, we get password input.
cf) Keystore contains an encrypted private key. We need the matching password to decrypt the keystore to get the actual private key.\
\&#xNAN;*WARNING Don't expose your keystore file to another person!*
`` 부분에 비밀번호를 입력하세요. 입력된 값은 `handleChange` 메서드를 통해 `password`에 저장됩니다.
```markup
```
키스토어 파일과 비밀번호가 모두 준비되었네요. We can now decrypt the keystore file to extract the private key through `cav.klay.accounts.decrypt(keystore, password)` API.\
This API returns a wallet instance containing the private key. 개인키를 가져오면, 앞서 사용한 방법 그대로 `integrateWallet` 메서드를 사용할 수 있습니다.
```javascript
handleLogin = () => {
const { accessType, keystore, password, privateKey } = this.state
// Access type2: access through private key
if (accessType == 'privateKey') {
this.integrateWallet(privateKey)
return
}
// Access type1: access through keystore + password
try {
const { privateKey: privateKeyFromKeystore } = cav.klay.accounts.decrypt(keystore, password)
this.integrateWallet(privateKeyFromKeystore)
} catch (e) {
this.setState({ keystoreMsg: `Password doesn't match.` })
}
}
```
비밀번호를 사용하여 키스토어 파일을 복호화하는 방법에 대한 자세한 안내는 [caver.klay.accounts.decrypt](https://archive-ko.docs.klaytn.foundation/content/sdk/caver-js/v1.4.1/api-references/caver.klay.accounts#decrypt)를 참고해주세요.
### 5) `Auth` component feature: User can logout, remove wallet instance information from browser.
'logout' means removing the wallet instance from the browser and caver.\
`cav.klay.accounts.wallet.clear()` removes all wallet instances from caver.\
`sessionStorage.removeItem('walletInstance')` removes the wallet instance from the browser's session storage.
```javascript
/**
* removeWallet 메서드는 다음 항목들을 제거합니다.
* 1) caver.klay.accounts의 지갑 인스턴스
* 2) 세션 스토리지의 'walletInstance' 값
*/
removeWallet = () => {
cav.klay.accounts.wallet.clear()
sessionStorage.removeItem('walletInstance')
this.reset()
}
```
caver-js의 지갑 인스턴스를 지우는 방법에 대한 자세한 안내는 [caver.klay.accounts.wallet.clear](https://archive-ko.docs.klaytn.foundation/content/sdk/caver-js/v1.4.1/api-references/caver.klay.accounts#wallet-clear)를 참고해주세요.