Wie man Google Authentifizierung funktioniert mit ReactJs?

Habe ich versucht den ganzen Tag zu Holen Sie Google Authentifizierung funktioniert mit Reagieren, aber nach der Suche nach Stunden zu versuchen, alles, was ich gefunden bekomme ich nur ein buggy, manchmal zu arbeiten, ist Chaos. Kann jemand sehen, was ich falsch mache? (Dies ist für ein Schulprojekt, damit ich Lerne!)

Des Projekts wird ein Terminplan online creator.

Mein main Index.js hat die folgende render-Funktion:

  function renderApp() {
    ReactDOM.render(
      <Router history={browserHistory}>
        <Route path="/" component={Login}></Route>
        <Route component={AuthUserContainer}>
          <Route path="/auth" component={Layout}>
            <IndexRoute component={Overview}></IndexRoute>
            <Route path="schedule(/:scheduleid)" component={Schedule}></Route>
          </Route>
        </Route>
      </Router>,
    app);
  }

Der home-Seite ist einfach eine login-Seite, geschieht durch die Login-Komponente, die leitet den Benutzer an /auth wenn die Authentifizierung erfolgreich ist. Die Authentifizierung wird fortwährend gehandhabt, indem AuthUserContainer jedesmal, wenn eine geschützte route zugegriffen wird.

Die Login-Komponente hat den Google-Sign-In-Taste, und alle geschützten Routen hat (über Layout-Komponente) eine Google Schaltfläche "Abmelden".

Meine Header.js enthält die "Google" Abmelden-button" (signOutHandler):

export default class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.SignOutHandler = this.SignOutHandler.bind(this);
  }

  SignOutHandler() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
      Authenticate.signOutUser();
    });
  }

  render() {
    return (
      <div class="header-content">
        <h2 class="header-title">Schedule</h2>
        <h3 class="header-user-button">
            <a href="/" onClick={this.SignOutHandler}>User First Name</a>
        </h3>
      </div>
    );
  }
}

Ich verwendet Googles eigenes Beispiel-code und versucht es zu manipulieren, für Reagieren. Probleme bekomme ich mit diesem code ist "Uncaught TypeError: Cannot read property 'getAuthInstance' of undefined". Da ich split-Anmelden und Abmelden-Schaltflächen, um Seiten zu trennen "auth2" nicht initialisiert richtig, aber ein Klick auf die Schaltfläche zweimal kann damit es funktioniert. Versuchen, initialisieren Sie Sie manuell hier oft gibt mir die Fehlermeldung, dass Gapi ist undefiniert...

Schließlich die Login.js:

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onSignIn = this.onSignIn.bind(this);
    this.renderGoogleLoginButton = this.renderGoogleLoginButton.bind(this);
  }

  renderGoogleLoginButton() {
      console.log('rendering google signin button')
      gapi.signin2.render('my-signin2', {
        'scope': 'https://www.googleapis.com/auth/plus.login',
        'width': 200,
        'height': 50,
        'longtitle': true,
        'theme': 'light',
        'onsuccess': this.onSignIn
      });

      gapi.load('auth2', function() {
        gapi.auth2.init();
      });
    }

  componentDidMount() {
      window.addEventListener('google-loaded', this.renderGoogleLoginButton);
  }

  onSignIn(googleUser) {
    Authenticate.signInUser(googleUser.getBasicProfile());
    this.props.router.push("/auth");
  }

  render() {
    return (
      <div class="container">
        <h2 class="form-signin-heading">
          Sign-in with Google account required
        </h2>
        <div id="my-signin2"></div>
      </div>
    );
  }
}

Ich basiert dieser code auch auf Googles eigenen, aber das hat überhaupt nicht funktioniert (entweder die Taste nicht laden, einfach nichts gezeigt, oder es nie genannt onSignIn). Ich auch gefunden und versucht diese, die es ein bisschen Arbeit (manchmal). Ich habe auch versucht zu initialisieren auth2 in renderGoogleLoginButton(), aber das funktioniert nur manchmal aswell...

renderGoogleLoginButton() aufgerufen wird, die sogar-handler eines benutzerdefinierten Ereignisses (google-geladen), die ausgelöst wird, wenn die Google-API lädt (genau wie in dem link). Authentifizierung ist meine eigene Klasse, die bündelt meine Schöpfung von token, getUserName Funktionen usw.

Ich habe auch den folgenden Fehler aus gapi: "Uncaught TypeError: Cannot read property 'style' ist null", ich denke, es wird versucht, eine Referenz Sign In/Sign Out-Tasten, aber da sind Sie nicht geladen, an der Zeit, Sie sind null.

Ich finde keine guten Lösungen, die nicht Folge glitches oder bugs. Googles eigenen code stellen alles in den gleichen HTML-Dokument, aber da möchte ich es aufteilen in Komponenten, dann ist es aller Pausen. Mache ich das komplett falsch vielleicht? Ich bin sehr neu zu Reagieren, aber ich hoffe, es ist verständlich!

Sorry für den langen Beitrag, ich danke Ihnen so sehr für Ihre Zeit, und wenn Sie Fragen haben Fragen Sie einfach!