Use passport-jwt on server side rendered Express/React app

Question

I have an universal NodeJS, Express, React/Redux app that uses react-router. It is rendered from server side on initial requests of the app and on client on subsequent requests that come from react-router.

My routes.js file:

<Route path="/" component={App}>
    <Route path="/main" component={Main}/>
    <Route path="/login" component={Login}/>
</Route>

I have a wildcard express route that matches this react-routes and sends the component markup back to the template:

import routes from '../routes';

app.get('*', (req, res) => {
    match(
        { routes, location: req.url },
        (err, redirectLocation, renderProps) => {
            let markup;
            if (renderProps) {
                markup = renderToString(
                    <Provider store={store}>
                        <RouterContext {...renderProps}/>
                    </Provider>
                );
            } else {
                markup = renderToString(<NotFoundPage/>);
                res.status(404);
            }

            return res.render('index', { markup });
        }
    );
});

Now I want to protect some of the routes intercepted by the wildcard route using passport-jwt, like the example:

app.get("*", passport.authenticate('jwt', { session: false }), 
(req, res) => {
    match(
        { routes, location: req.url },
            (err, redirectLocation, renderProps) => {
                res.json("Success! You can not see this without a token");
            }
    )
});

How can I protect only a given route from routes.js on wildcard route?

this_is_nick · Accepted Answer · 2017-05-15 02:20:29Z

1

you can add some middleware to do this via app.use. (https://expressjs.com/en/4x/api.html#app.use)

just be sure to call this before your wildcard handler

app.use("/main", passport.authenticate('jwt', { session: false }), 
function(req, res){
    res.json("Success! You can not see this without a token");
});

answered May 15, 2017 at 2:20

this_is_nick

222 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

André Teixeira Over a year ago

Actually I want to make selective protection on my wildcard routes while server side rendering. Do you know how can I use middleware on this case?

this_is_nick Over a year ago

Let's assume (just an example) you want to protect anything behind /admin with your token authentication middleware. To do so you would utilize app.use('admin', passport.authenticate('jwt', { session: false }) before you declare your wildcard handler. Middleware functions are executed sequentially, therefore the order of middleware inclusion is important.

this_is_nick Over a year ago

here is a more in depth example - github.com/scotch-io/easy-node-authentication/blob/local/…

Collectives™ on Stack Overflow

Use passport-jwt on server side rendered Express/React app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related