0

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;

0 Answers0