I've created a login form and accessing states through a context api. Can't seem to find a problem in my code but these errors are showing up:
Errors: 1-Legacy context API has been detected within a strict-mode tree... 2-findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
Code:
import React,{useContext, useState, useEffect} from 'react'
import {auth} from '../firebase/firebase';
const AuthContext= React.createContext();
export function useAuth(){
return useContext(AuthContext);
}
export function AuthProvider({children}) {
const[currentUser,setCurrentUser]= useState();
function login(email, password){
return auth.signInWithEmailAndPassword(email, password)
}
useEffect(()=>{
const unsubscriber= auth.onAuthStateChanged(user=>{
setCurrentUser(user)
})
return unsubscriber
},[])
const value={
currentUser,
login
}
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
)
}
// Login form//
import React, {useRef, useState} from 'react';
import './login.css';
import {Button, Form, FormGroup, Input, Label} from 'reactstrap';
import {useAuth} from '../../context/AuthContext'
import { Alert } from 'reactstrap';
const Login=()=> {
const emailRef = useRef();
const passwordRef=useRef();
const {login} = useAuth();
const[error,setError]=useState();
async function handlesubmit(e){
e.preventDefault()
try{
setError('')
await login(emailRef.current.value,passwordRef.current.value)
}
catch{
setError("Failed to Login")
}
}
return (
<div>
<Form className='login-form' onSubmit={handlesubmit}>
{error && <Alert color="danger">{error}</Alert>}
<h1 className='website'><span className='font-weight-bold'>ApniShop</span>.com</h1>
<FormGroup>
<label>Email</label>
<Input name='email' type='text' placeholder='Email' ref={emailRef}/>
</FormGroup>
<FormGroup>
<label>Password</label>
<Input name='password' type='password' placeholder='password' ref={passwordRef}/>
</FormGroup>
<Button className='btn-lg btn-block' outline color ="danger" type='submit'>Log in</Button>
</Form>
</div>
)
}
export default Login;