Я пытаюсь настроить авторизацию firebase, но сталкиваюсь с той же проблемой. Я не уверен, почему, но по какой-то причине у меня появляется белый пустой экран всякий раз, когда я помещаю AuthProvider вокруг своих компонентов, моего маршрутизатора, чего угодно. Как только я прокомментирую это, мои страницы входа и регистрации снова всплывают. Любая помощь будет принята с благодарностью.
Я просматривал свой код несколько часов и не могу найти проблему. Я надеюсь, что мне не хватает чего-то маленького, но очень надеюсь, что кто-то может помочь.
Кроме того, я использую Material-UI (хотя я сомневаюсь, что это имеет значение), и у меня есть все мои ключи API и тому подобное в файле .env (я 3 раза проверил, что все они верны).
Во всяком случае, вот мой код authentication.js:
import React, { useEffect, useState } from "react";
import app from "./firebase";
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const [pending, setPending] = useState(true);
useEffect(() => {
app.auth().onAuthStateChanged((user) => {
setCurrentUser(user)
setPending(false)
});
}, []);
if (pending){
return <>Please wait...</>
}
return (
<AuthContext.Provider
value = {{
currentUser
}}
>
{children}
</AuthContext.Provider>
);
};
Я также пробовал этот способ в своей папке контекста:
import React, { useContext, useState, useEffect } from 'react';
import { auth } from '../firebase';
const AuthContext = React.createContext()
export function useAuth(){
return useContext(AuthContext)
}
export function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState(null)
function register(email, password) {
return auth.createUserWithEmailAndPassword(email, password)
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
})
return unsubscribe
}, [])
const value = {
currentUser,
register
}
return (
<AuthContext.Provider value = {value}>
{children}
</AuthContext.Provider>
)
}
А вот мой код App.js:
import React from 'react';
import 'fontsource-roboto';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './Home';
import Login from './Login';
import Register from './Register'
// import { AuthProvider } from '../authentication';
function App(){
return (
// <AuthProvider>
<Router>
<div>
<Route exact path = "/" component = {Home} />
<Route exact path = "/login" component = {Login} />
<Route exact path = "/Register" component = {Register} />
</div>
</Router>
// </AuthProvider>
)
}
export default App;
И моя страница регистрации, если это поможет:
import React, { useRef } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
// import { Alert } from '@material-ui/lab';
import { makeStyles } from '@material-ui/core/styles';
// import { useAuth } from '../contexts/AuthContext';
// import register from '../contexts/AuthContext'
function Copyright() {
return (
<Typography variant = "body2" color = "textSecondary" align = "center">
{'Copyright © '}
<Link color = "inherit" href = "https://kindredcompanion.app/">
Kindred Companion App
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
},
image: {
// VTM Banner
backgroundImage: 'url(https://res.cloudinary.com/think-halcyon-llc/image/upload/v1617055998/Vampire:%20the%20Masquerade/vtm_banner_qze9dn.png)',
backgroundRepeat: 'no-repeat',
backgroundColor:
theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function Register() {
const classes = useStyles();
const firstNameRef = useRef()
const lastNameRef = useRef()
const emailRef = useRef()
const passwordRef = useRef()
const passwordConfirmRef = useRef()
// const { register } = useAuth()
// const [error, setError] = useState("")
// const [loading, setLoading] = useState(false)
// async function handleSubmit(e) {
// e.preventDefault()
// if (passwordRef.current.value !== passwordConfirmRef.current.value) {
// return setError("Passwords do not match.")
// }
// try {
// setError("")
// setLoading(true)
// await register(emailRef.current.value, passwordRef.current.value)
// } catch {
// setError("Failed to create an account.")
// }
// setLoading(false)
// }
return (
<Grid container component = "main" className = {classes.root}>
<CssBaseline />
<Grid item xs = {false} sm = {4} md = {7} className = {classes.image} />
<Grid item xs = {12} sm = {8} md = {5} component = {Paper} elevation = {6} square>
<div className = {classes.paper}>
<Avatar className = {classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component = "h1" variant = "h5">
Register
</Typography>
<br />
{/* {error && <Alert severity = "error">{error}</Alert>} */}
<form
className = {classes.form}
// onSubmit = {handleSubmit}
>
<Grid container spacing = {2}>
<Grid item xs = {12} sm = {6}>
<TextField
autoComplete = "fname"
name = "firstName"
variant = "outlined"
required
fullWidth
id = "firstName"
label = "First Name"
inputRef = {firstNameRef}
autoFocus
/>
</Grid>
<Grid item xs = {12} sm = {6}>
<TextField
variant = "outlined"
required
fullWidth
id = "lastName"
label = "Last Name"
name = "lastName"
inputRef = {lastNameRef}
autoComplete = "lname"
/>
</Grid>
<Grid item xs = {12}>
<TextField
variant = "outlined"
required
fullWidth
id = "email"
label = "Email Address"
name = "email"
inputRef = {emailRef}
autoComplete = "email"
/>
</Grid>
<Grid item xs = {12}>
<TextField
variant = "outlined"
required
fullWidth
name = "password"
label = "Password"
type = "password"
id = "password"
inputRef = {passwordRef}
autoComplete = "current-password"
/>
</Grid>
<Grid item xs = {12}>
<TextField
variant = "outlined"
required
fullWidth
name = "password-confirm"
label = "Password Confirmation"
type = "password"
id = "password"
inputRef = {passwordConfirmRef}
autoComplete = "current-password"
/>
</Grid>
</Grid>
<Button
type = "submit"
fullWidth
variant = "contained"
color = "primary"
className = {classes.submit}
// disabled = {loading}
>
Sign Up
</Button>
<Grid container justify = "flex-end">
<Grid item>
<Link href = "/login" variant = "body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
<Box mt = {5}>
<Copyright />
</Box>
</form>
</div>
</Grid>
</Grid>
);
}
Надеюсь, кто-нибудь сможет мне помочь!
Вы получаете текущего пользователя еще до входа в систему и регистрации маршрута?
@NearHuscarl Показывает совершенно пустую страницу. Это странно.
@VoQuocThang Я был на полпути к настройке аутентификации, когда экран погас. Маршруты работают сами по себе.
Отображает ли он полностью пустую страницу или показывает пустую страницу с текстом
Please wait...
?