Express Sessionに入れた値がundefinedになってしまう

Question

実現したいこと

React Nativeでスマホアプリを開発しています。
バックエンドでNode.jsを使用してWebAPIを作っていて、Express SessionでSession管理をしたいです。

発生している問題

postでreq.sessionに値を保存しても、getで呼び出したときにundefinedになってしまいます。
どうしたらいいでしょうか？

app.js（Node.js）

const express = require('express');
const app = express();
const session = require('express-session');
// const bodyParser = require('body-parser');

app.use(express.json());

// app.use(express.urlencoded({ extended: false }));
app.use(session({
    secret: 'my_secret_key',
    resave: false,
    saveUninitialized: false,
    rolling: true,
    cookie: {
        httpOnly: true,
        maxAge: 60 * 1000
    }
}));

//routes
app.use('/api/user', require('./routes/user'));
app.use('/api/tmp_user', require('./routes/tmp_user'));
app.use('/api/post', require('./routes/post'));
app.use('/api/hand_history', require('./routes/hand_history'));

app.use('/validation', require('./routes/validation'));
app.use('/login', require('./routes/login'));



app.listen(3000);

login.js（Node.js）

const express = require('express');
const router = express.Router();
const connection = require('../connetction');
const bcrypt = require('bcrypt');

router.get('/', (req, res, next) => {
    console.log(req.session);
})

router.post('/', (req, res) => {
    const email = req.body.email;
    const plain = req.body.password;

    connection.query(
        'select * from users where email = ?',
        [email],
        (error, results) => {
            if (results.length > 0) {
                const hash = results[0].password;
                bcrypt.compare(plain, hash, (error, isEqual) => {
                    if (isEqual) {
                        req.session.userId = results[0].id;
                        console.log(req.session)
                        console.log('ログイン成功')
                    } else {
                        console.log('ログイン失敗')
                    }
                })
            }
        }
    )
})

module.exports = router;

Login.js（React Native）

import { StatusBar } from 'expo-status-bar';
import { useState, Component } from 'react';
import { Platform, StyleSheet, Text, View, Button, TextInput, TouchableOpacity, Alert } from 'react-native';
import axios from 'axios';

const host = 'http://192.168.0.195:3000'

const Login = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState([]);

  const login = async () => {

    await axios.post(host + '/login',
      {
        email: email,
        password: password,
      }
    )
      .then(() => {
      })
      .catch((error) => console.log(error));
  }
  const test = async () => {
    await axios.get(host + '/login');

  }

  return (
    <View style={styles.container}>
      <Text>メールアドレス</Text>
      <TextInput
        style={styles.input}
        placeholder='mail'
        onChangeText={(text) => setEmail(text)}
      />
      <Text>パスワード</Text>
      <TextInput
        style={styles.input}
        secureTextEntry={true}
        placeholder='password'
        onChangeText={(text) => setPassword(text)}
      />

      <Button
        title='ログイン'
        onPress={() => {
          login();
        }}
      />
      <Button
        title='test'
        onPress={() => {
          test();
        }}
      />
      {message.map((index) => {
        return (
          <Text>{index.message}</Text>
        )
      })}
      <StatusBar style="auto" />

    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    width: 150
  },
});


export default Login;

Answer 1

私はReactNativeには全く詳しくないので、
Webの仕様から分かる範囲で解決のアプローチを模索する手助けという形で記述していきます。

---

まず普通のWebサイトでセッションが使える理由に関して解説していきます。

ReactはJavaScriptで作られています。
Webブラウザ(Chrome等)はHTMLをダウンロードした後に
DOMツリーを展開して描画、それと共にJavaScriptのエンジンを可動させてDOMツリーの編集に備えます。
JavaScript越しにDOMツリーを変更したら、それが同期的に画面上に反映される仕組みとなっています。

axiosのようなHTTPリクエストを発射するライブラリを使った場合、
Webブラウザに搭載されている機能を一時的に借りて実現します。

Webサーバの「セッションに保存」という仕組みを使うと
Webサーバから「クッキーにIDxxxxで保管しておいて、次の認証でその文字列を使ってアクセスしてくださいね」というお願いが来ます。
Webブラウザ(Chrome等)はそのお願いを元にクッキーにIDxxxxを保管しておいて、次回以降のAjax通信等で役立てます。

さて、先程Webサイトから発行される「お願い」と記載しました。
今回の対象はNode.jsやReactNativeというWebブラウザとは微塵も関係ない世界の話です。
誰がこの依頼を元にクッキーを生成・保管・管理してくれるのでしょうか？

これが今回ReactNativeでセッションの保存が効果なかった原因でほぼ間違いないかと思います。
サーバーにはセッション情報は生成されていてIDxxxxでアクセスしてくるのを待っているのに、
二度目以降にそのIDxxxxの情報を持ってアクセスしに来ないのだから、データを開示出来るわけがないんです。

怪しいのはこのどちらかです。

• Node.js上でaxiosモジュールを利用した時のCookieの扱いが適当、というか無い可能性あり
• ReactNative上ではCookieを取り扱えない

結論としては上記のaxiosモジュールを使うのがダメで間違いなさそうです。

---

上記を前提にReactNative Cookieといったワードで検索してみます。

• react-native-cookies/cookies - GitHub
• react-nativeでWebView内のCookieをjsのコードのみで削除するには的なお話 - 適当な感じでプログラミングとか！
• 【react-native】参考にできないAndroidのイケてないrender制御 - Qiita

こういう情報があるので、とりあえずReactNative上でCookieを扱う事は少なくとも可能。
ただしめんどくさいという感じです。

拉致があかないのであかないので公式サイトのドキュメントを漁ってみます。
ありました。
参考記事: Guide -> Workflow -> Networking

これの#Known Issues with fetch and cookie based authenticationセクションにAuthやCookie周りの記載があります。

Known Issues with fetch and cookie based authentication

Cookie based authentication is currently unstable. You can view some of the issues raised here

意訳: FetchやCookieベースの認証周りの課題の話
Cookieベースの認証は現在不安定です。このIssueで報告されているので興味があればどうぞ

こんなセクションがある時点でReactNativeでは使えて当然という話です。
安定性等に関していくつか不安事があるにせよ、使えないというのはおかしい。
従ってCookieが効かないのはaxiosのせいです。

そもそもNode.jsはつい最近のバージョン18でようやくネイティブのFetch APIをサポートしました。
それまではC++で作ったhttpモジュールでそれっぽいものをでっち上げるしかなかったんですよね。
axiosモジュールはどのくらい前だろ、Node.jsの8系とかの頃の時代のモジュールですから、Fetchを使ってるわけがないんですよね。
その辺が挙動が違う問題だろうと思います(興味が出たら調べてみてください)

結論としてはReactNativeのドキュメントの通りFetchを使ってアクセスしよう、
そうすればReactNative上でCookie機能が自動でついてくるよってことですね。

---

では具体的なコードを見ていきましょう。
FetchでPOSTを飛ばすにはmethod指定が使えます。
参考記事: Fetch の使用 - MDN

const Login = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState([]);

  const login = async () => {
    // async内ではよほどのケース以外はPromise.thenやPromise.catchを実行してはならない
    // 何故ならこいつらを駆逐するための構文なのに、無意味に使ったら何のために宣言したのか……となる

    // このようにtry-catchでくくると、await Promiseで見張っているものがrejectされたらcatchに入ってくる
    try {
      // fetchは何もインポートしなくても普通に使えるらしい
      // await構文はPromise.thenの第一引数を値として引っ張り上げてくる機能があるのでこう書ける
      const res = await fetch(host + '/login', {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({email, password}),
      });
      const json = await res.json(); // res.json()の結果もPromiseインスタンスなのでもう一度awaitで引っ張り出す
      console.log(json);
    } catch(err) {
      console.error(err);
    }
  }
  const test = async () => {
    const res = await fetch(host + '/login');
    const json = await res.json();
    console.log(json);
  }

  // return (...省略...);

コードの動作は未確認です。
ReactNativeのWebView周りの話はさっぱりわからないので不安ですが、
これでちょっとは進むんじゃないですかね？

試してみてください。

Comments

[kazu235]

ご回答ありがとうございます。
React Native側でCookieの値が保存されていないのが原因なのですね。
大変参考になります。

ただ、ご教授いただいたやり方を試してみたのですが、同様にreq.sessionのなかにuserIdは確認できませんでした。
req.sessionの中にuserIdがあるかどうかでセッションが正しく通っているかどうかを確認するというこのデバッグのやり方は合っているのでしょうか？

[miyabi-sun]

まずホンマに保存できてるのか？の確認からですね。
この辺はMySQLと併用される事が多い一時情報の保管に適したサーバのRedisを使うと良いでしょう。

RedisサーバさえDocker等で起動させてしまえば
Express-sessionもストアの項目に登録するだけで読み書き出来るようになります。
https://symfoware.blog.fc2.com/blog-entry-2542.html

docker-composeでRedisサーバを立ち上げたら中に入ってコマンド叩けば確認出来ます
https://qiita.com/uggds/items/5e4f8fee180d77c06ee1