[react native / 리액트 네이티브 / node.js] jwt token으로 로그인 유지 하기

토큰(Token)이란?

• 토큰은 인증에 사용되는 문자열로, 서버가 사용자를 식별하기 위해 발급합니다. 일반적으로 로그인과정에서 아이디와 비밀번호가 검증된 후 사용자에게 발급되며, 이후 사용자는 발급받은 토큰을 이용하여 서비스 내에서 권한이 필요한 요청을 할 수 있습니다.

토큰의 장점:

1. 보안성: 토큰은 사용자의 로그인 정보를 서버에 저장하지 않기 때문에, 서버에 대한 해킹으로부터 사용자 정보가 유출될 위험을 줄여줍니다.
2. 확장성: 토큰 기반 인증은 서비스의 서버뿐만 아니라, 다른 플랫폼 및 서비스에서도 동일한 토큰을 통해 인증할 수 있어 서비스 확장성을 높여줍니다.
3. 상태 비저장성(Statelessness): 서버는 상태를 저장할 필요 없이 토큰만으로 사용자를 인증할 수 있어 서버 자원을 절약할 수 있습니다.

 

React Native 앱에서 토큰으로 로그인 유지 구현하기:

1. 토큰 발급: 사용자가 로그인할 때, 서버는 사용자의 인증 정보(아이디와 비밀번호)를 검증한 후, JWT(Json Web Token)와 같은 방식을 이용하여 토큰을 생성합니다. 이 토큰 안에는 사용자를 식별할 수 있는 정보와 토큰이 유효한 시간 등이 담겨 있습니다.
2. 클라이언트 저장: 발급받은 토큰은 클라이언트(여기서는 React Native 앱)에 저장됩니다. 일반적으로는 모바일 장치의 안전한 저장소에 저장하여 앱이 종료되거나 장치가 재부팅되더라도 로그인 상태를 유지할 수 있도록 합니다.
3. 토큰 사용: 사용자가 앱 내에서 권한이 필요한 요청을 할 때마다 이 토큰을 서버에 전송합니다. 서버는 토큰을 검증하고 요청에 대한 응답을 합니다.

 

보통 토큰을 이용해 로그인 유지를 할때 보안 문제로 Access token과 Refresh token 두 개를 만들어서 Access token의 유효 기간이 지나면 Refesh token으로 새로 token을 만들어줘서 로그인 유지를 시키지만 나는 Access token하나로 로그인 유지를 시킬 거다.

 

이제 react native 어플에서 token으로 로그인 유지를 구현해 보자  일단 token은 로그인 시에 서버에서 사용자 정보가 일치하면 클라이언트에게 token을 만들어서 보내줘야 한다.

jwt를 사용하러면 사용자의 비밀번호와 option을 설정해줘야 한다. 이 파일은 절대로 github나 외부로 유출되면 안 되기 때문에 gitignore로 예외처리를 꼭 해주자

PATH:: config/jwt.json

{
	"secretKey" : "원하는 암호",
	"option" : {
        "algorithm" : "HS256", //해싱 알고리즘
        "expiresIn" : "30d",   //토큰 유효 기간
        "issuer" : "issuer"    //발행자
    	}
}

 

 

로그인 성공 시 클라이언트로 token을 생성해서 클라이언트로 전송하고 클라이언트에서 token을 받아서 local storage에 저장한다.

// paylod는 서버에서 같이 보내고 싶은 데이터를 객체 형태로 묵어서 보낼 수 있음

jwt.sign(payload, secretKey, options)

----------index.js---------- (server)

const jwt = require('jsonwebtoken');
const jwt_secret_key = require('./config/jwt.json').secretKey;
const jwt_option = require('./config/jwt.json').option;

app.post('/login', (req, res) => {
  const id = req.body.id;
  const pw = req.body.pw;

  db.query('SELECT pw, salt FROM users WHERE id = ?', [id], (err, results) => {

	//로그인 성공시
        const token = jwt.sign({id: id}, jwt_secret_key, jwt_option);
  });
});


----------client----------

// 로컬 스토리지에 token 저장
const join_success = async(id, data) => {
	await AsyncStorage.setItem('jwtToken', data);
}

const login = async () => {
    try {
      const res = await fetch(`http://${serverIP}:3003/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          id: id,
          pw: pw,
        }),
      });
      if (res.status === 200) {
        const data = await res.json();
        join_success(id, data.token);
      }
    } catch (error) {
      console.log(`SignIn ERROR: `, error);
    }
  };

 

 

이제 어플을 껐다가 새로 키면 App.js에 아래와 같은 token을 검사하는 코드를 추가해서 클라이언트에서 서버로 token을 보내서 서버에서 token 유효성 검사를 해준다. 그러고 useState를 사용해서 login 페이지를 건너뛸 수 있다.

----------index.js----------   (server)

app.get('/jwtValidation',(req,res) => {
        const token = req.headers.token;
        try{
                jwt.verify(token, jwt_secret_key,jwt_option);
                res.status(200).send('Valid token');
        } catch (error){
                console.log(error);
                res.status(401).send({error : error});
        }
});


----------client----------

const getToken = async setUserAuthentication => {
  const token = await AsyncStorage.getItem('jwtToken');
  try {
    const res = await fetch(`http://${serverIP}:3003/jwtValidation`, {
      method: 'GET',
      headers: {
        token: token,
      },
    });
    if (res.status === 200) {
      setUserAuthentication(true);
    } else if (res.status === 401) {
      const err_msg = await res.json();
      if (err_msg.error.name === 'TokenExpiredError') {
        console.log(res.status, ':', err_msg.error);
        tokenReissue(setUserAuthentication);
      } else throw new Error(err_msg);
    }
  } catch (error) {
    console.log(error);
  }
};