How do I authenticate a React app using passport? - node.js

Question

I have a React app.
I also have an Express server, that using passport-saml I can authenticate against the company's PingID SSO IdP.
I would like to get the React app, to somehow call the Express app, to authenticate.
The Express Server and the React app are running on the same host.
Here's what I have:
// Express App - rendering code pulled out
const express = require('express');
var passport = require('passport');
var Strategy = require('passport-saml').Strategy;
var fs = require('fs')
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const expressSession = require('express-session');
const app = express();
const port = process.env.PORT || 4005;
passport.use('saml2', new Strategy({
path: 'http://MYSERVER:4005/assert',
entryPoint: 'https://sso.connect.pingidentity.com/sso/idp/SSO.saml2?XXXXXXXX',
issuer: 'MYAPP',
audience: 'MYAPP',
},
function(profile, cb) {
return cb(null, profile);
}));
passport.serializeUser(function(user, done) {
done(null, user);
});
passport.deserializeUser(function(obj, done) {
done(null, obj);
});
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(expressSession({
secret: '123xyz',
resave: true,
saveUninitialized: true
}));
// Initialize Passport and restore authentication state, if any, from the session.
app.use(passport.initialize());
app.use(passport.session());
app.get('/login/idp', () =>{
passport.authenticate('saml2')
console.log('Authentication called');
});
app.get('/login', () =>{
console.log('Authentication failed, try again');
});
app.post('/assert',
passport.authenticate('saml2', { failureRedirect: '/login' }),
function(req, res) {
console.log('Authentication succeeded');
console.log(req.user)
res.redirect('/');
});
app.listen(port, () => console.log(`Listening on port ${port}`));
In my React app's package.json I have:
{
...
"proxy": "http://localhost:4005/",
...
}
The outline of the toy Create React App is:
// Create React App
import React, { useState } from 'react';
import './App.css';
function App() {
const handleLogin = async e => {
e.preventDefault();
const response = await fetch('/login/idp', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
}
});
};
return (
<div className="App">
<form onSubmit={handleLogin}>
<button type="submit">Login</button>
</form>
</div>
);
}
export default App;
I can click happily on the button, and the console shows that the Express server's GET is triggered, but nothing comes back to the React client.
Is proxying the way to go? Do I have the right approach? If so, how do I get the result back from the Express app into the React app?

Answer 1

I have a solution, but it seems like an awful hack. However, it works, and I need to get this over the line. If anyone can suggest an improvement or alternative approach, I'd be grateful.
We start with a basic Express server (hosted at 4005), that can validate the user via Passport-SAML SSO:
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);
Then in the React src folder, add the required setupProxy.js:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/login',
createProxyMiddleware({
target: 'http://localhost:4005',
headers: {
"Connection": "keep-alive"
}
})
);
};
Then in the React app (hosted at port 3000) we create a simple button component for the front page:
import React from 'react'
import { Button } from '#material-ui/core'
function StartBtn() {
return (
<Button type="submit" variant="contained" color="primary" >
Login
</Button>
)
}
export default StartBtn
At this point, we stick the <StartBtn /> on the front page, and rig up a Route that responds to http://localhost:3000/signinOK?token=... by grabbing the token, using that as the value in any subsequent bearer: authentications, and redirecting to the main site.
The flow is as follows:
User loads front page, and clicks the <StartBtn/>;
Link is redirected thanks to setupProxy.js to the Express server;
Express server attempts the Passport-SAML authentication;
The result of the authentication process is a POST call from the IdP (PingID Authentication Server) to the Express server, on the /assert route.
The result either succeeds or fails, but in both cases re-directs to the React app.
In case of success, the user details are returned as JWT; or
In case of failure, an error is returned.
I'll come back to this answer, if I can find ways to improve it, or expand on the JWT stage.
I hope that someone either (a) finds this useful, or (b) invents a time-machine, goes back and posts this 3 weeks ago, so that I can save more of my remaining hair follicles. Or (c) tells me the way I should have done it.