SingU.js
import { Link } from "react-router-dom";
import {useState} from "react";
import firebase from "firebase/compat/app";
import "firebase/auth"
export default function SingUp () {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [error, setError] = useState("")
const hanglePassChange = (e) => {
setPassword(e.target.value)
};
const hangleEmailChange = (e) => {
setEmail(e.target.value)
};
const hangleSubmit = async (e) => {
e.preventDefault()
try {
await firebase.auth.createUserWithEmailAndPassword(email, password)
} catch (e) {
setError(e)
console.log(error);
}
};
return (
<div>
<form onSubmit={hangleSubmit}>
<p>
Зарегистрируйтесь
</p>
<div>
<input
placeholder="Email"
name="email"
type="email"
onChange={hangleEmailChange}
value={email}
/>
</div>
<div>
<input
placeholder="Password"
name="password"
type="password"
onChange={hanglePassChange}
value={password}
/>
</div>
<div>
{error && <p>{error}</p>}
<button type="submit">Login</button>
</div>
<hr />
<p>
Уже зарегистрированны? <Link to="/login">Sing In</Link>
</p>
</form>
</div>
)
}
firebase/index.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {database} from "firebase/database"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: ***
authDomain: ***,
databaseURL: ***,
projectId: ***,
storageBucket: ***,
messagingSenderId: ***,
appId: ***,
measurementId: ***
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = database()
Выскакивает ошибка:
react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: TypeError: Cannot read properties of undefined (reading 'createUserWithEmailAndPassword')). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:13231)
at reconcileChildFibers (react-dom.development.js:14133)
at reconcileChildren (react-dom.development.js:16990)
at updateHostComponent (react-dom.development.js:17632)
at beginWork (react-dom.development.js:19080)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at discreteUpdates$1 (react-dom.development.js:22420)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
// и вторая ошибка
index.js:1 The above error occurred in the <p> component:
at p
at div
at form
at div
at SingUp (http://localhost:3000/static/js/main.chunk.js:1370:83)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:51613:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:51815:29)
at Routes
at App
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:51248:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:50868:35)