Как передать информацию об успешной авторизации в facebook с помощью passport.js в redux?

Question

[angelzzz]

Использую стек MERN и для авторизации passport.js

В react компоненте (укороченная версия кода) у меня есть обычный вход и через facebook:

class Login extends Component {
  render() {
    return (
      <a href="/" onClick={this.onLogin}>Enter via email</a>
      <a href="https://localhost:5000/api/users/auth/facebook">Enter via facebook</a>
    )
  }
}

в server.js

// Passport middleware
app.use(passport.initialize());
// Passport Config
require("./config/jwt")(passport);
require("./config/facebook")(passport);
passport facebook strategy - facebook.js

const passport = require('passport')
const FacebookStrategy = require('passport-facebook').Strategy;
const mongoose = require("mongoose");
const User = mongoose.model("users");
const keys = require("./keys");

module.exports = passport => {
  passport.use(
    new FacebookStrategy(
      {
        clientID: keys.facebook.clientID,
        clientSecret: keys.facebook.clientSecret,
        callbackURL: "https://localhost:5000/api/users/auth/facebook/callback",
        profileFields: ['id', 'emails', 'name', 'picture.type(large)']
      },
      (accessToken, refreshToken, profile, done) => {
        // console.log("FacebookStrategy", profile);
        User.findOne({
          // 'facebook.id': profile.id 
          $or: [
            { 'facebook.id': profile.id },
            { 'email': profile.emails[0].value }
          ]
        })
          .then(user => {
            if (user) {
              console.log("__user already exists", user);
              if (user.facebook.id == undefined) {
                user.facebook.id = profile.id;
                user.facebook.token = accessToken;
                user.facebook.email = profile.emails[0].value;
                user.facebook.name = profile.name.givenName + ' ' + profile.name.familyName;
                user.save();
              }

              return done(null, user);
            } else {
              console.log("__user doens't exist", user);
              const newUser = new User({
                facebook: {
                  id: profile.id,
                  token: accessToken,
                  email: (profile.emails) ? profile.emails[0].value : undefined,
                },
                name: profile.name.givenName + ' ' + profile.name.familyName,
                email: (profile.emails) ? profile.emails[0].value : undefined,
                privilege: 1
              });

              newUser
                .save()
                .then(user => console.log("passport facebook save user -> ", user))
                .catch(err => console.log("passport facebook save err -> ", err))

              return done(null, newUser);
            };
          })
          .catch(err => console.log("Passport err ->  ", err));
      }
    ));
};

В api/routes.js

router.get("/auth/facebook",
  passport.authenticate('facebook', { session: false, scope: ['email'] }) //, { session: false, scope: ['email'] })
);

router.get('/auth/facebook/callback',
  passport.authenticate('facebook', {
    session: false,
    scope: ['email'],
    successRedirect: 'https://localhost:3000',
    failureRedirect: 'https://localhost:3000/login'
  }), (req, res) => {
    console.log("facebook success");
    res.redirect('https://localhost:3000');
    res.render('json', { data: JSON.stringify(req.user.access_token) });
  }
);

Со стороны бекенда все работает - юзер залогинивается. В случае обычного входа (JWT) я использую onClick который вызывает authAction который передает payload из БД а redux. Но я не могу понять как в redux передать информацию об успешной авторизации через facebook.

Answer 1

[Антон Спирин]

Как вариант:
res.cookie(TOKEN_KEY, req.user.access_token);

Comments

[angelzzz]

а как со стороны react/redux прочитать эту информацию? и как определить в какой момент эта информация должна быть запрошена? как я писал, в случае с обычным флоу редакса все просто - нажал кнопку, вызвал экшен, обновился стор, обновились пропсы, перерисовался компонент. А тут как заставить обновиться компонент?

[Антон Спирин]

angelzzz, пишете init action. В нем проверяете куки. Если есть токен, то пишите его в store. Вызываете этот action до рендера приложения:

const store = createStore();
store.dispatch(init());

ReactDOM.render( /* ... */);

[angelzzz]

В целом вы дали нужно направление, но немного другим путем. В интернетах пришлось собирать по кусочкам из статей разных лет (из-за чего возникли проблемы, тк некоторые инструменты уже изменились). В файле стратегии Facebook необходимо добавить serialize и deserialize, и добавить использование express-session, которая будет хранить сессию пользователя. А в реатке можно сделать диспатч в момент componentDidMount страницы/копонента который маунтится после редиректа фейсбука.