在React中使用firebase进行chrome扩展的Google登录

npm install firebase

// firebaseConfig.js

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
};

firebase.initializeApp(firebaseConfig);

export default firebase;

import React from 'react';
import firebase from './firebaseConfig';

const GoogleLoginButton = () => {
  const handleGoogleLogin = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // 登录成功后的处理逻辑
        const user = result.user;
        console.log(user);
      })
      .catch((error) => {
        // 登录失败后的处理逻辑
        console.log(error);
      });
  };

  return (
    <button onClick={handleGoogleLogin}>Google登录</button>
  );
};

export default GoogleLoginButton;

import React from 'react';
import GoogleLoginButton from './GoogleLoginButton';

const App = () => {
  return (
    <div>
      <h1>我的应用</h1>
      <GoogleLoginButton />
    </div>
  );
};

export default App;