Блог

Я следил за этим (https://dev.to/sivaneshs/add-google-login-to-your-react-apps-in-10-mins-4del) учебное пособие по настройке аутентификации пользователей с помощью Firebase в моем веб-приложении React. Я не получаю ошибок компиляции, но всякий раз, когда я запускаю приложение, нет….. входа в систему с помощью Google. В консоли говорится, что Devtools не удалось загрузить исходную карту, и указывается ошибка 404. Вот мой компонент входа в систему:

 import React from 'react';
import { GoogleLogin } from 'react-google-login';
// refresh token
import { refreshTokenSetup } from './refreshToken';

const clientID = '562063530636-256jp0tnir18v5b2jukebg144au005gi.apps.googleusercontent.com';

function Login() {

  const onSuccess = (res) => {
    console.log('[Login Success] currentUser:', res.profileObj);
    alert(
     `Logged in successfully welcome ${res.profileObj.name}. n See console for full profile object.`
   );
    refreshTokenSetup(res);
  };

  const onFailure = (res) => {
    console.log("[Login Failed] res:", res);
  };

  return (
    <div>
      <GoogleLogin
      clientID = {clientID}
      buttonText = "Login"
      onSuccess = {onSuccess}
      onFailure = {onFailure}
      cookiePolicy = {'single-host-origin'}
      style = {{marginTop: '100px'}}
      isSignedIn = {true}></GoogleLogin>
    </div>
  );
}

export default Login;

 

И мой компонент токена обновления:

 export const refreshTokenSetup = (res) => {
  // Timing to renew access token
  let refreshTiming = (res.tokenObj.expires_in || 3600 - 5 * 60) * 1000;

  const refreshToken = async () => {
    const newAuthRes = await res.reloadAuthResponse();
    refreshTiming = (newAuthRes.expires_in || 3600 - 5 * 60) * 1000;
    console.log('newAuthRes:', newAuthRes);
    // saveUserToken(newAuthRes.access_token);  <-- save new token
    localStorage.setItem('authToken', newAuthRes.id_token);

    // Setup the other timer after the first one
    setTimeout(refreshToken, refreshTiming);
  };

  // Setup first refresh timer
  setTimeout(refreshToken, refreshTiming);
};

 

И мой App.js:

 import logo from './logo.svg';
import './App.css';
import withFirebaseAuth from 'react-with-firebase-auth'
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import Login from "./Login.js";
import Logout from "./Logout.js";


import firebaseConfig from './firebaseConfig';

import "firebase/compat/app";
import "firebase/compat/analytics";

import { initializeApp } from 'firebase/compat/app';
import { getAuth } from "firebase/compat/auth";

const firebaseApp = firebase.initializeApp(firebaseConfig);

const firebaseAppAuth = firebaseApp.auth();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};

const {
  user,
  signOut,
  signInWithGoogle,
} = () => this.props;

function App() {
  return (
    <div className="App">
      <Login />
      <br />
      <Logout />
      <br />

    </div>
  );
}

export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);

 

Кто-нибудь может помочь? Я попытался переделать идентификатор клиента и прибегнуть к некоторым импортам, но я действительно не знаю, что не так.