I have a react-redux app and use passport-facebook for authentication. I want the user to be able to login from any page of the app and then immediately return (get redirected) to the same page. What's the best-practice way to achieve this?

So far I've come up with the following solution, but it doesn't feel right. I've created a 'dummy' SuccessLogin component and I redirect to that component after successful login. In the 'dummy' component I redirect the user again to the previous location.

Server-side code:

router.get '/facebook/callback', passport.authenticate('facebook', { successRedirect: '/success', failureRedirect: '/auth' })

My 'dummy' component looks like this:

class SuccessLogin extends React.Component

  componentDidMount: () ->
    @props.redirectBack()

  render: () ->
    null

This is how redirectBack is defined:

redirectBack = () ->
  (dispatch, getState) ->
    dispatch go(-1)

go is the action creator from React-Router-Redux: https://github.com/reactjs/react-router-redux

Am I going to run into any problems with this solution? What would be a better way to implement this logic?

1

There are 1 answers

0
Anastasia On

In the end I found a solution that has nothing to do with React-Redux. It is inspired by those two questions: Redirecting to previous page after authentication in node.js using passport.js and how to redirect to original page after successful authentication using passport-google-oauth. Server-side code:

setRedirect = (req, res, next) ->
  req.session.redirectTo = req.headers.referer
  next()

successRedirect = (req, res) ->
  destination = req.session.redirectTo || '/'
  res.redirect(destination)

router.get '/facebook', setRedirect, passport.authenticate('facebook', { scope: ['email'] })    
router.get '/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/auth' }), successRedirect