passport-facebookとjwtをセッションなしで統合する方法は？

Question

サーバー上でセッションを保存せずに、jwtトークンでpassport-githubまたはfacebook loginを使用したいとします。

app.get('/auth/facebook', 
    passport.authenticate('facebook')); 

app.get('/auth/facebook/callback', 
    passport.authenticate('facebook', { failureRedirect: '/login' }), 
    function(req, res) { 
    // Successful authentication, redirect home. 
    res.redirect('/'); 
    }); 

どのようにフロントエンドのコードを処理するために：しかし、我々は、フロントエンドからの2つの要求を持って ？通常の場合には

、我々は唯一つの要求

axios.post(`${API_URL}/auth/login`, { email, password }) 
.then(response => { 
    cookie.save('token', response.data.token, { path: '/' }); 
    dispatch({ type: AUTH_USER }); 
    window.location.href = CLIENT_ROOT_URL + '/dashboard'; 
}) 
.catch((error) => { 
    errorHandler(dispatch, error.response, AUTH_ERROR) 
}); 
} 

を持っているので、我々は、ローカルにトークンを保存することができます。パスポート・フェイスブックの場合、2つのリクエスト（ '/ auth/facebook'と '/ auth/facebook/callback'）があります。どのようにトークンをローカルに保存するのですか？

Answer 1

まず、GETリクエストは機能しません。/auth/loginを起動するには、リンクを使用する必要があります。

<a href="http://localhost:5150/auth/facebook"> 

がクライアントにトークンを送信するには、クッキーに保存されたJWTとクライアントページにリダイレクトする必要があります。

const token = user.generateJwt(); 
res.cookie("auth", token); 
return res.redirect(`http://localhost:3000/socialauthredirect`); 

クライアントのランディングページで、jwtを抽出してローカルストレージに保存します。

class SocialAuthRedirect extends Component { 
    componentWillMount() { 
    this.props.dispatch(
     fbAuthUser(getCookie("auth"),() => { 
     document.cookie = 
      "auth=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 
     this.props.history.push("/profile"); 
     }) 
    ); 
    } 

    render() { 
    return <div />; 
    } 
}