使用 React 进行 Firebase Google 身份验证答案

【问题标题】：Firebase Google Authentication with React使用 React 进行 Firebase Google 身份验证
【发布时间】：2021-02-08 14:21:21
【问题描述】：

这是我的 Firebase 文件。我正在关注一个教程，我也做了同样的事情。但我遇到了一个错误。

“请务必在调用 firebase.initializeApp() 时包含 authDomain，并按照 Firebase 控制台中的说明进行操作。”

我认为自 1 年前上传视频以来，某些情况可能有所改变。如果你帮助我，我会很放松的

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAİN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

firebase.initializeApp(firebaseConfig)
export const auth = firebase.auth();
export const firestore = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(provider);

export default firebase;

这是登录组件

import React from 'react';
import { signInWithGoogle } from "../../firebase/firebase"
import FormInput from '../form-input/FormInput';
import Button from '../custom-button/Button';



import './SignIn.styles.scss';

class SignIn extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: ''
        };
    }

    handleSubmit = event => {
        event.preventDefault();

        this.setState({ email: '', password: '' });
    };

    handleChange = event => {
        const { value, name } = event.target;

        this.setState({ [name]: value });
    };

    render() {
        return (
            <div className='sign-in'>
                <h2>I already have an account</h2>
                <span>Sign in with your email and password</span>

                <form onSubmit={this.handleSubmit}>
                    <FormInput
                        name='email'
                        type='email'
                        handleChange={this.handleChange}
                        value={this.state.email}
                        label='email'
                        required
                    />
                    <FormInput
                        name='password'
                        type='password'
                        value={this.state.password}
                        handleChange={this.handleChange}
                        label='password'
                        required
                    />
                    <Button type='submit'> Sign in </Button>
                    <Button onClick={signInWithGoogle} > Sign in With Google </Button>
                </form>
            </div>
        );
    }
}

export default SignIn;

【问题讨论】：

标签： reactjs firebase authentication

【解决方案1】：

我解决了这个问题。主要原因是使用 React_app 环境变量。我试图在控制台中查看，但身份验证域 URL 返回未定义。我更正了，它现在可以工作了。看看。https://stackoverflow.com/questions/49911490/firebase-databaseurl-configuring-firebase

【讨论】：