Зарегистрируйтесь с помощью GoogleOAuth - PullRequest
0 голосов
/ 03 мая 2020

Я пытаюсь создать функцию регистрации с помощью (MERN) Google OAuth, и после выбора учетной записи Google она должна перенаправить меня на панель инструментов. Когда учетная запись выбрана, она не перенаправляет пользователя на панель, созданную мной с помощью реагирования

Вместо этого я получаю

`

xhr.js:178 POST http://localhost:5000/users/oauth/google 401 (Unauthorized)
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:61
Axios.<computed> @ Axios.js:86
wrap @ bind.js:9
(anonymous) @ index.js:6
(anonymous) @ index.js:8
(anonymous) @ redux.js:477
responseGoogle @ SignUp.js:31
t @ google-login.js:1
(anonymous) @ google-login.js:1
e.Sr @ cb=gapi.loaded_0:192
Lk @ cb=gapi.loaded_0:195
Gk @ cb=gapi.loaded_0:195
_.rk.xU @ cb=gapi.loaded_0:195
ok @ cb=gapi.loaded_0:186
Promise.then (async)
jk @ cb=gapi.loaded_0:186
_.nk @ cb=gapi.loaded_0:186
Hk @ cb=gapi.loaded_0:194
_.rk.xh @ cb=gapi.loaded_0:193
(anonymous) @ cb=gapi.loaded_0:188
tokenReady @ cb=gapi.loaded_0:337
a.Cw.<computed> @ cb=gapi.loaded_0:337
wx.Se @ cb=gapi.loaded_0:336
(anonymous) @ cb=gapi.loaded_0:335
Xu.dispatchEvent @ cb=gapi.loaded_0:247
(anonymous) @ cb=gapi.loaded_0:286
_.h.Q_ @ cb=gapi.loaded_0:269
(anonymous) @ cb=gapi.loaded_0:271
createError.js:16 Uncaught (in promise) Error: Request failed with status code 401
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

` Вот файл к функции

`SignUp. js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import { connect } from "react-redux";
import { compose } from "redux";
import { GoogleLogin } from "react-google-login";
import { Router } from "react-router";

import "./SignUp.css";
import * as actions from "../actions";
import CustomInput from "./CustomInput";

class SignUp extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
    this.responseGoogle = this.responseGoogle.bind(this);
  }

  async onSubmit(formData) {
    console.log("onSubmit() got called");
    console.log("formData", formData);
    await this.props.signUp(formData);
    if (!this.props.errorMessage) {
      this.props.history.push("/dashboard");
    }
  }

  async responseGoogle(res) {
    console.log("responseGoogle", res);
    console.log("typeof res", typeof res);
    await this.props.oauthGoogle(res.accessToken);
    if (!this.props.errorMessage) {
      Router.push({
        pathname: "/dashboard",
      });
    }
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="container">
        <div className="row" style={{ paddingTop: "50px" }}>
          <div className="col">
            <form onSubmit={handleSubmit(this.onSubmit)}>
              <fieldset>
                <Field
                  name="email"
                  type="text"
                  id="email"
                  label="Email"
                  placeholder="Enter your email address"
                  component={CustomInput}
                />
              </fieldset>
              <fieldset>
                <Field
                  name="password"
                  type="password"
                  id="password"
                  label="Password"
                  placeholder="Enter your password"
                  component={CustomInput}
                />
              </fieldset>

              {this.props.errorMessage ? (
                <div className="alert alert-danger">
                  {this.props.errorMessage}
                </div>
              ) : null}

              <button type="submit" className="btn btn-primary">
                Sign Up
              </button>
            </form>
          </div>
          <div className="col">
            <div className="text-center">
              <div className="alert alert-primary">
                Or Sign up using third-party services
              </div>
              <GoogleLogin
                clientId=""
                buttonText="Google"
                onSuccess={this.responseGoogle}
                onFailure={this.responseGoogle}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    errorMessage: state.auth.errorMessage,
  };
}

export default compose(
  connect(mapStateToProps, actions),
  reduxForm({ form: "signup" })
)(SignUp);

`

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...