Как объединить стратегию паспорта js с социальным провайдером (Facebook, Twitter и т. д.) с React

Я знаю, что этот вопрос задавался здесь, Как я могу использовать паспорта и реакции вместе? но, похоже, это не отвечает на вопрос, и я пытался исследовать этот вопрос, но, похоже, ничего не нашел/

Сейчас это то, как я понимаю вещи и реализовал это.

В интерфейсе я отправляю tokenId на сервер, а сервер отправляет его социальному провайдеру (FB, google и т. д.), и он проверяет мой токен. Если все верно, я генерирую токен JWT и отправляю его обратно во внешний интерфейс и сохраняю токен в виде файла cookie, а пользовательский объект — в качестве локального хранилища.

Клиентская сторона, у меня есть компонент входа в facebook. Я получаю токен и отправляю его на сервер с помощью axios.

Сторона клиента

import React from 'react';
import axios from 'axios'
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

const FacebookLoginComponent = ({ informParent }) => {
        const responseFacebook = async (response) => {
            if (response) {
                const { accessToken, id } = await response
                return await axios
                    .post(`${process.env.REACT_APP_API}/facebook-login`, {
                        accessToken,
                        userId: id
                    })
                    .then(response => {
                        const data = response.data
                        console.log(data) // Contains user obj and jwt token from backend
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
            return false
        }
    
        return (<FacebookLogin
            appId={process.env.REACT_APP_FACEBOOK_ID}
            autoLoad={false}
            callback={responseFacebook}
            render={renderProps => (
                <button className="btn btn-primary w-100" onClick={renderProps.onClick} disabled={renderProps.disabled} >
                    <FontAwesomeIcon icon={['fab', 'facebook']} />  Login with Facebook
                </button>
            )}
        />)
    }

На стороне сервера Отсюда я в основном получаю токен доступа из внешнего интерфейса. Затем я отправлю токен доступа и идентификатор пользователя на URL-адрес api facebook и получу имя и адрес электронной почты. Затем я использую электронную почту либо для создания пользователя, либо для входа в систему, если электронная почта найдена.

router.post('/facebook-login', FacebookLoginController)

const FacebookLoginController = async (req, res) => {
    const { accessToken, userId } = req.body
    const url = `https://graph.facebook.com/v2.11/${userId}/?fields=id,name,email&access_token=${accessToken}`
    fetch(url)
        .then(res => res.json())
        .then(json => {
            const { id, name, email } = json
            // console.log(json)
            if (email) {
                try {
                    return User.findOne({ email }, async (err, user) => {
                        if (err) {
                            return await res.status(500).json({
                                status: 'Failed',
                                msg: 'Something went wrong',
                                err
                            })
                        }
                        //If no user, create a new user
                        if (!user) {
                            let newUser = await new User({
                                username: name,
                                email,
                                password: email + process.env.JWT_SECRET,
                            })
                            return await newUser.save(async (err, data) => {
                                if (err) {
                                    return await res.status(500).json({
                                        error: err
                                    })
                                }
                                const { _id, username, email, role } = data
                                const token = jwt.sign(
                                    { _id },
                                    process.env.JWT_SECRET,
                                    { expiresIn: "7d" }
                                );
                                return await res.status(200).json({
                                    status: 'Success',
                                    message: 'User saved Successfully',
                                    token,
                                    user: {
                                        _id, username, email, role
                                    }
                                })
                            })
                        } else {
                            //User exists , login
                            const { _id, username, email, role } = user
                            const token = jwt.sign(
                                { _id },
                                process.env.JWT_SECRET,
                                { expiresIn: "7d" }
                            );
                            return await res.status(200).json({
                                status: 'Success',
                                message: 'User login Successfully',
                                user: {
                                    _id, username, email, role
                                },
                                token
                            })
                        }
                    })
                } catch (error) {
                    return res.status(500).json(error)
                }
            }
        })
        .catch(error => {
            return res.status(500).json(error)
        })
}

Читаю паспортные документы и не могу понять. Я понимаю, что их паспорт сериализует идентификатор пользователя и сохраняет его в сеансе. Итак, мы можем использовать req.user, и мы получим пользователя.

Итак, мой вопрос: как паспорт js работает с социальными провайдерами, когда реакция находится во внешнем интерфейсе?

Многие учебники, которые я видел, похоже, используют экспресс-сессию.

Надеюсь, кто-нибудь сможет мне объяснить, потому что я немного запутался в том, как паспорт подходит к аутентификации.