Я хочу реализовать passport-google-oauth20 в своем приложении реакции. Я должен отметить, что все отлично работает на стороне сервера, поток oauth регистрирует меня и создает нового пользователя в базе данных. Но в ответ он просто показывает пустую страницу, а в адресной строке отображается этот URL, http://localhost:3000/api/auth/google
Кнопка:
<a href='/api/auth/google'>
<button type="submit" className="App_button _oauth">
<div className='socialIcon'>
<GoogleIcon width={18} />
</div>
<span>Sign up with Google</span>
</button>
</a>
google. js
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const passport = require('passport');
const keys = require('../../config/keys');
const User = require('../../models/User');
passport.serializeUser((user, done) => done(null, user.id));
passport.deserializeUser((id, done) => {
User.findById(id).then(user => done(null, user));
});
module.exports = new GoogleStrategy({
clientID: keys.GOOGLE_CLIENT_ID,
clientSecret: keys.GOOGLE_CLIENT_SECRET,
callbackURL: '/api/auth/google/callback',
}, async (accessToken, refreshToken, profile, done) => {
const existingUser = await User.findOne({ googleId: profile.id });
if (existingUser) {
return done(null, existingUser);
}
const user = await new User({
name: profile.displayName,
googleId: profile.id,
}).save();
done(null, user);
});
Google oauth маршруты
router.get('/google', passport.authenticate('google', { scope: ['profile', 'email'], }));
router.get('/google/callback', passport.authenticate('google'), (req, res) => {
res.redirect('/api/auth/profile');
});
router.get('/profile', (req, res) => res.send(req.user));
router.get('/logout', (req, res) => {
req.logout();
res.send(req.user);
});
пакет. json
...
"proxy": {
"/api/auth/google": {
"target": "http://localhost:8080"
},
"/api/*": {
"target": "http://localhost:8080"
}
},
...
Я хочу сделать эта кнопка правильно запускает поток oauth.