パスポートを使用してReactアプリを認証するにはどうすればよいですか？

私には解決策がありますが、それはひどいハックのようです。しかし、それは機能し、私はこれを一線を越えて取得する必要があります。誰かが改善または代替アプローチを提案することができれば、私は感謝するでしょう。

Passport-SAML SSOを介してユーザーを検証できる基本的なExpressサーバー（4005でホストされている）から始めます。

const express = require('express');
const jwt = require('jsonwebtoken')
const passport = require('passport');
const Strategy = require('passport-saml').Strategy;

require('dotenv').config()
const signature = process.env.SIGNATURE
const expiresIn = process.env.EXPIRESIN

// Simplification: actually there's a db look-up here
// based on req.user in order to get just the id
// but you get the idea
const createToken = user =>
    jwt.sign({ user.email }, signature, { expiresIn: expiresIn })

passport.use('saml2', new Strategy({
    path: 'http://localhost:4005/assert',
    entryPoint: 'https://sso.connect.pingidentity.com/sso/idp/SSO.saml2?idpid=XXXX_YOURVALUEHERE_XXXX',
    issuer: 'XXXX_YOURIDHERE_XXXX',
    audience: 'XXXX_YOURIDHERE_XXXX',
  },
  function(profile, cb) {
    return cb(null, profile);
  }));

passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(obj, done) {
  done(null, obj);
});

// Create a new Express application.
var app = express();
app.use(require('cookie-parser')());
app.use(require('body-parser').urlencoded({ extended: true }));

// Initialize Passport and restore authentication state, if any, from the
// session.
app.use(passport.initialize());

app.get('/login/idp', passport.authenticate('saml2'));

app.post('/assert', 
  passport.authenticate('saml2', 
    { failureRedirect: `http://localhost:3000/?error=unauthenticated` } ),
    function(req, res) {
      const token = createToken(req.user)
      res.redirect(`http://localhost:3000/signinOK?token=${token}`);
    });

app.listen(4005);

次に、Reactsrcフォルダーに、必要なsetupProxy.jsを追加します。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
      '/login',
      createProxyMiddleware({
        target: 'http://localhost:4005',
        headers: {
            "Connection": "keep-alive"
        }
      })
    );
  };

次に、Reactアプリ（ポート3000でホストされている）で、フロントページ用のシンプルなボタンコンポーネントを作成します。

import React from 'react'
import { Button } from '@material-ui/core'

function StartBtn() {
  return (
    <Button type="submit" variant="contained" color="primary" >
      <a href="/login/idp">Login</a>
    </Button>
  )
}

export default StartBtn

この時点で<StartBtn />、フロントページに貼り付け、http://localhost:3000/signinOK?token=...トークンを取得して後続のbearer:認証の値として使用し、メインサイトにリダイレクトすることで、応答するルートを設定します。

フローは次のとおりです。

1. ユーザーがフロントページを読み込み、<StartBtn/>;をクリックします。
2. setupProxy.jsExpressサーバーのおかげでリンクがリダイレクトされます。
3. ExpressサーバーはPassport-SAML認証を試みます。
4. 認証プロセスの結果は、/assertルート上のIdP（PingID認証サーバー）からExpressサーバーへのPOST呼び出しです。
5. 結果は成功または失敗しますが、どちらの場合もReactアプリにリダイレクトされます。
6. 成功した場合、ユーザーの詳細はJWTとして返されます。または
7. 失敗した場合、エラーが返されます。

それを改善する方法を見つけることができれば、またはJWTステージで拡張できる場合は、この回答に戻ります。

誰かが（a）これが便利だと思うか、（b）タイムマシンを発明して、3週間前に戻って投稿し、残りの毛包をもっと節約できるようになることを願っています。または（c）私がそれをすべきだった方法を教えてくれます。