webdevsimplified / react-firebase-auth Goto Github PK

Hi,

After creating Signup page, page is showing up. but after creating Authprovider and added to App.js and signup page, it showing blank page with no error displayed.

AuthContext,js

`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()

function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password)
}

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
        setCurrentUser(user)
    })
    return unsubscribe
}, [])


const value = {
    currentUser,
    signup
}

return (
    <AuthContext.Provider value={value}>
        {children}
    </AuthContext.Provider>
)

}
`

Signup.js

`import React, { useRef } from 'react'
import { Card, Form, Button } from 'react-bootstrap'

import APP_CONSTANTS from '../assets/styles/strings'
import { useAuth } from '../contexts/AuthContext'

export default function Singup() {

const emailRef = useRef()
const passwordRef = useRef()
const passwordConfirmRef = useRef()
const { singUp } = useAuth()

function handleSubmit(e) {
    e.preventDefault()
    singUp(emailRef.current.value, passwordRef.current.value)
}

return (
    <>
        <Card>
            <Card.Body>
                <h2 className="text-center mb-4">{APP_CONSTANTS.Login}</h2>
                <Form>
                    <Form.Group id="email" className="text-right">
                        <Form.Label>{APP_CONSTANTS.Email}</Form.Label>
                        <Form.Control type="email" ref={emailRef} required />
                    </Form.Group>

                    <Form.Group id="password" className="text-right">
                        <Form.Label>{APP_CONSTANTS.Password}</Form.Label>
                        <Form.Control type="password" ref={passwordRef} required />
                    </Form.Group>

                    <Form.Group id="password-confirm " className="text-right">
                        <Form.Label>{APP_CONSTANTS.PasswordConfirm}</Form.Label>
                        <Form.Control type="password" ref={passwordConfirmRef} required />
                    </Form.Group>

                    <Button type="submit" className="w-100 text-center mt-2" >{APP_CONSTANTS.createAccount}</Button>
                </Form>
            </Card.Body>
        </Card>
    </>
)

}
`
App.js

`import React from 'react';
import { Container } from 'react-bootstrap';
import { AuthProvider } from '../contexts/AuthContext';
import Singup from '../pages/Singup';

function App() {
return (

<Container
className="d-flex align-items-center justify-content-center"
style={{ minHeight: "100vh" }}
>
<div className="w-100" style={{ maxWidth: "400px" }}>

);
}

export default App;`

Please help

Hey Kyle, I did the same thing you did on this project and I noticed that the moment I add the history.push('/') line beneath the login function, it allows users login even if the login credential is invalid.

async function handleSubmit(e) {
e.preventDefault()

try {
  setError("")
  setLoading(true)
  await login(emailRef.current.value, passwordRef.current.value)
  history.push("/") --> problem here, it logs in the user with invalid credentials. Even at the sign up component.
} catch {
  setError("Failed to log in")
}

setLoading(false)

}

when I am trying to update the email and password at the same time, and the error either Token expired or the email invalid,
I think that's because when updating the email and then coming to update the password firebase already update the email so doesn't know which updated password to which email, so what I am doing let the password update first cause a token expired issue.
if anyone can give me the idea to update email and password together I will be appropriate that.

in the firebase.js file change the first two lines to:

import firebase from 'firebase/compat/app';
import "firebase/compat/auth"

and problem solved

the useAuth from AuthContext returns undefined in the login code.
I'm using react 17.01

Note: For version 9 it's required to compat/app otherwise showing error also

firebase.js file
`import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const app = firebase.initializeApp({
apiKey:process.env.REACT_APP_FIREBASE_API_KEY,

authDomain:process.env.REACT_APP_FIREBASE_AUTH_DOMAIN ,

databaseURL:process.env.REACT_APP_FIREBASE_DATABASE_URL ,

projectId:process.env.REACT_APP_FIREBASE_PROJECT_ID ,

storageBucket:process.env.REACT_APP_FIREBASE_STORAGE_BUCKET ,

messagingSenderId:process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID ,

appId:process.env.REACT_APP_FIREBASE_APP_ID ,

measurementId:process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
})

export const auth = app.auth();
export default app;
`
.env.local file:

`REACT_APP_FIREBASE_API_KEY =*************

REACT_APP_FIREBASE_AUTH_DOMAIN=*************
REACT_APP_FIREBASE_DATABASE_URL =*************

REACT_APP_FIREBASE_PROJECT_ID =***************
REACT_APP_FIREBASE_STORAGE_BUCKET =*****************
REACT_APP_FIREBASE_MESSAGING_SENDER_ID =*****************
REACT_APP_FIREBASE_APP_ID =*******************
REACT_APP_FIREBASE_MEASUREMENT_ID =*******************`

I am getting the error all the time

Hi, I found a bug in this project, try to register the user in the registration form, try to delete the code history.push('/') when you successfully register in the Signup.js file then run it, when you have registered and succeeded, you can directly be trying to login to the dashboard page with https://localhost:3000 (example) and boommmm!! can directly enter without us having to log in...

when registering we should not go directly to the dashboard page, we must log in first like other applications, then try and change a little code in the Signup.js file

this must be a bug that occurs on login, let me know if you guys get it too and fix this problem together.

Hey,
I basically copied everything but something seems to be wrong with the user. Does anyone have an idea? I'm out of ideas for now. Thanks!

When i make npm start i got a white page and in the console t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}
How to make the .env file ?

Compiled with problems:X

ERROR in ./src/components/PrivateRoute.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\MARX\Desktop\Login-Authentication-with-React-and-Firebase\src\components\PrivateRoute.js: Spread children are not supported in React.
9 | return (
10 | {/* returning our route*/}

11 | { ...rest } {/* This route will take all the rest of the routes*/}
| ^^^^^^^^^^^
12 | render={props => {
13 | return currentUser ? <Component {...props} /> : //here we check if we have a current user
14 | //if we have a current user then we just want to render out the component that we got passed into our class.

I'm kinda struggling to understand this piece of code!
The unsubscribe fn is run on unmount of this component (context/authContext.js), so how the user and loading states are set to be used in other functions in this component?

useEffect(() => { const unsubscribe = auth.onAuthStateChanged(user => { setCurrentUser(user) setLoading(false) }) return unsubscribe }, [])

i keep getting 'failed to create account while signing up'

Hi Kyle! First of all, great tutorial!

I've done everything like you (your "signup" === my "register") and this error still occurs to me and I'm not capable of finding out what's wrong.
Would you please help me?

I've written like this:

``
import React, { useRef, useState } from "react";
import { Form, Button, Card, Alert } from "react-bootstrap";
import { useAuth } from "../contexts/AuthContext";
import { Link, useHistory } from "react-router-dom";

export default function Register() {
const nameRef = useRef()
const usernameRef = useRef()
const emailRef = useRef()
const passwordRef = useRef()
const confirmPasswordRef = useRef()
const { register } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const history = useHistory()

async function handleSubmit(e) {
e.preventDefault()

if (passwordRef.current.value !== confirmPasswordRef.current.value) {
  return setError("Passwords don't match!")
}

try {
  setError("")
  setLoading(false)
  setLoading(true)
  await register(emailRef.current.value, passwordRef.current.value)
history.push("/")
} catch {
  setError("Failed to create an account.")
}

}´´

Thank you for your attention!

Hi Kyle, Thanks for the super tutorial.

I just wanted to point out, when you move from the login page to the dashboard, the console shows a warning:

It looks like the problem is caused (in Login.js) by setting state after call to history.push which already moves to the Dashboard component.

  async function handleSubmit(e) {
    e.preventDefault()

    try {
      setError('')
      setLoading(true)
      await login(emailRef.current.value, passwordRef.current.value)
      history.push('/')
    } catch {
      setError('Failed to sign in')
    }
    setLoading(false)   // --> problem
  }

Is the correct solution to just remove call to setLoading, or is there a better solution?