Как реализовать систему входа в Firebase в ответ?

Шаг 1. Создайте приложение React

npx create-react-app myapp

Шаг 2: после создания папки проекта откройте этот проект с помощью следующей команды

cd myapp

Шаг 3: установите firebase в свой проект с помощью этой команды

npm i firebase

Шаг 4: перейдите на панель управления firebase, создайте новый проект и скопируйте учетные данные.

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your auth domain",
  projectId: "your project id",
  storageBucket: "your storage bucket",
  messagingSenderId: "your messagin senderid",
  appId: "your app id"
};

Шаг 5: перейдите в свой проект и создайте новую папку (firebase.js) в папке src и вставьте в нее учетные данные firebase.

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

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your auth domain",
  projectId: "your project id",
  storageBucket: "your storage bucket",
  messagingSenderId: "your messagin senderid",
  appId: "your app id"
};

const app = initializeApp(firebaseConfig);
export const auth=getAuth(app);

Шаг 6: на панели управления firebase выберите Аутентификация, включите вход по электронной почте/паролю.

Шаг 7. Теперь создайте 2 файла Login.jsx и Signup.jsx в папке src.

Авторизоваться->

import React, { useState } from "react";
import "./app.css";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";
import { auth } from "./firebase";
function Login({ setShowSignup }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const handleLogin = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user);
      })
      .catch((error) => {
        const errorMessage = error.message;
        alert(errorMessage);
      });
  };
  return (
    <div className="container">
      <div className="card">
        <h4>Login</h4>
        <form onSubmit={handleLogin}>
          <label>Email</label>
          <input value={email} onChange={(e) => setEmail(e.target.value)} />
          <label>Password</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button>Login</button>
        </form>
        <p onClick={() => setShowSignup(true)} style={{ marginTop: 12 }}>
          Don't have an account?{" "}
          <span style={{ cursor: "pointer", fontWeight: "bold" }}>Signup</span>
        </p>
      </div>
    </div>
  );
}
export default Login;

зарегистрироваться->

import { createUserWithEmailAndPassword } from 'firebase/auth';
import React, { useState } from 'react';
import './app.css';
import { auth } from './firebase';
function Signup({setShowSignup}) {

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const handleSignup=(e)=>{
    e.preventDefault();
    
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    const user = userCredential.user;
    console.log(user)
  })
  .catch((error) => {
    const errorMessage = error.message;
    alert(errorMessage)
  });
  }
  return (
    <div className="container">
      <div className="card">
        <h4>Signup</h4>
        <form onSubmit={handleSignup}>
          <label>Email</label>
          <input value={email} onChange={(e) => setEmail(e.target.value)} />
          <label>Password</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button>Signup</button>
        </form>
        <p onClick={()=>setShowSignup(false)} style={{marginTop:12}}>Have an account? <span style={{cursor:'pointer',fontWeight:'bold'}}>Login</span></p>
      </div>
    </div>
  )
}
export default Signup

Шаг 8. Импортируйте файлы Login.js и Signup.js в файл app.js следующим образом:

import React, { useState } from 'react'
import Login from './Login'
import Signup from './Signup'


function App() {
  const[showSignup,setShowSignup]=useState(false)
  return (
    <>
    {showSignup?<Signup setShowSignup={setShowSignup}/>:<Login setShowSignup={setShowSignup}/>}
    </>
  )
}

export default App;

Шаг 9: Запустите приложение с помощью команды npm start, после чего откройте браузер и перейдите на http://localhost:3000, вы увидите следующий интерфейс-›

Теперь после Зарегистрируйтесь введите адрес электронной почты и пароль и нажмите Enter, вы увидите объект пользователя в консоли

Репозиторий Github

Как реализовать систему входа в Firebase в ответ?

Вопросы по теме