Создайте веб-приложение, чтобы пользователь мог входить, выходить и регистрироваться, используя адрес электронной почты и пароль.
В этой статье мы собираемся продемонстрировать, как реализовать аутентификацию электронной почты firebase в приложении React.
Связанный курс:
Сначала внутри App.js мы добавляем состояние «пользователь» и функцию обновления «setUser» с помощью ловушки useState.
import { useState } from 'react';
import Home from './components/Home';
import './App.css';
function App() {
const [user, setUser] = useState(null)
return (
<div className="App">
<Home/>
</div>
);
}
export default App;
Создайте компонент Home и SignIn в папке компонентов.
После того, как мы создали компоненты SignIn и Home, мы собираемся импортировать их в App.js.
import Home from './components/Home'; import SignIn from './components/SignIn';
Мы можем прокомментировать их один за другим, чтобы увидеть результат в сети.
<Home/>
{/* <SignIn/> */}
Home.js
import React from 'react'
const Home = () => {
return (
<div>
<h1>Welcome Home</h1>
</div>
)
}
export default Home
SignIn.js
import React, {useRef} from 'react'
import './SignIn.css'
const SignIn = () => {
return (
<div className="signin">
<form action="">
<h1>Sign in</h1>
<input type="email"/>
<input type="password"/>
<button>Sign in</button>
</form>
</div>
)
}
export default SignIn
SignIn.css
.signin{
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.signin>form{
display: grid;
flex-direction: column;
}
.signin>form>input{
margin-bottom: 5px;
}
После того, как мы создали эти два компонента, мы перейдем к firebase, чтобы создать новый проект.
Мы нажимаем на настройку проекта и нажимаем «Добавить приложение», а затем выбираем значок, представляющий «веб-приложение».
Наконец, мы получили конфигурацию firebase, поэтому мы копируем эту конфигурацию и готовы вставлять в файл конфигурации firebase.
Создайте файл firebase.js и внутри firebase.js
import firebase from 'firebase';
var firebaseConfig = {
apiKey: "FIREBASE API KEY,
authDomain: "react-firebase-email-login.firebaseapp.com",
projectId: "react-firebase-email-login",
storageBucket: "react-firebase-email-login.appspot.com",
messagingSenderId: "1074096017244",
appId: "1:1074096017244:web:ea192737e362a1ea3b7b99"
};
// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
export { auth };
export default db;
Перейдите к аутентификации и включите метод входа по электронной почте / паролю.
Создать функцию регистрации
Перейдите в SignIn.js, мы используем useRef (), чтобы отслеживать электронную почту и пароль, не вызывая повторных рендеров.
import { auth } from '../firebase'
const emailRef = useRef(null)
const passwordRef = useRef(null)
<div className="signin">
<form action="">
<h1>Sign in</h1>
<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />
<button onClick={signIn}> Sign in</button>
<h6>Not yet register? <span className="signin__link" onClick={signUp}>sign up</span></h6>
</form>
</div>
Затем мы создаем функцию регистрации, которую пользователь может передать по электронной почте и паролю для создания нового пользователя.
const signUp = e => {
e.preventDefault();
auth.createUserWithEmailAndPassword(
emailRef.current.value, passwordRef.current.value
).then(user => {
console.log(user)
}).catch(err => {
console.log(err)
})
}
Если мы введем адрес электронной почты и пароль, а затем нажмем кнопку регистрации, внутри Firebase будет создан новый пользователь.
Далее мы собираемся добавить функцию входа.
const signIn = e => {
e.preventDefault();
auth.signInWithEmailAndPassword(
emailRef.current.value, passwordRef.current.value
).then(user => {
console.log('user', user)
}).catch(err => {
console.log(err)
})
}
Затем мы собираемся привязать эту функцию к кнопке входа
<div className="signin">
<form action="">
<h1>Sign in</h1>
<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />
<button onClick={signIn}> Sign in</button>
<h6>Not yet register? <span className="signin__link" onClick={signUp}>sign up</span></h6>
</form>
</div>
Чтобы отслеживать статус входа пользователя, нам нужно использовать onAuthStateChange для отслеживания статуса входа
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(userAuth => {
const user = {
uid: userAuth.uid,
email: userAuth.email
}
if (userAuth) {
console.log('userAuth', userAuth)
setUser(user)
} else {
setUser(null)
}
})
return unsubscribe
}, [])
Мы будем отображать компонент Home, если есть подписанный пользователь, в противном случае он будет отображать компонент SignIn.
return (
<div className="App">
{user ? <Home /> : <SignIn />}
</div>
);
Чтобы приложение уже могло отслеживать статус входа в систему. Теперь нам нужно добавить кнопку выхода, чтобы пользователь мог выйти.
Внутри Home.js нам просто нужно связать кнопку выхода с методом auth.signOut.
import React from 'react'
import { auth } from '../firebase'
const Home = () => {
return (
<div>
<h1>Welcome Home</h1>
<p>
<button onClick={() => auth.signOut()}>Signout</button>
</p>
</div>
)
}
export default Home
Теперь приложение работает, оно может входить, выходить, а также регистрироваться.
Бесплатные уроки YouTube
Подписывайтесь на нас:
