Develop Reference

FirebaseError: Firebase: Error (auth/user-token-expired) [duplicate]

This question already has an answer here:
firebase: admin.auth().updateUser() causes auth/user-token-expired
(1 answer)
Closed 8 months ago.
I have created a new form after creating a user with phone number authentication(in firebase), But an error keeps on coming after submitting FirebaseError: Firebase: Error (auth/user-token-expired)
The Error is Comming in this code
//This Component is used to store the Name ,Phone Number Of new User Which have Registered in SignUp With Number
import "./Auth.scss";
import React, { useState } from "react";
import { updateProfile, updateEmail } from "firebase/auth";
import { auth } from "../../firebase/config";
import { useNavigate, useLocation } from "react-router";
import usePhoneSignUp from "../../hooks/usePhoneSignUp";
import { update } from "lodash";
const SaveUserDetails = () => {
//code to extract userType after navigating from SignUpWithNumber page
const { state } = useLocation();
const userType = state.userType;
console.log(userType);
// .......
const {
signUp,
error: signupError,
isPending: signupIsPending,
} = usePhoneSignUp();
const [name, setname] = useState();
const [email, setemail] = useState();
const navigate = useNavigate();
const handleChange = (e) => {
e.preventDefault();
const { name, value } = e.target;
switch (name) {
case "displayname":
setname(value);
break;
case "email":
setemail(value);
break;
default:
break;
}
};
const updateEmailUser = () => {
updateEmail(auth.currentUser, email)
.then(() => {
// Email updated!
// ...
console.log("email Updated");
})
.catch((error) => {
// An error occurred
console.log("email Updated");
// ...
console.log(error);
});
};
const updateUserProfile = () => {
updateProfile(auth.currentUser, {
displayName: name,
})
.then(() => {
console.log("profile Updated" + name + " " + email);
})
.catch((error) => {
console.log(error + "In update profile");
});
updateEmailUser();
};
const handleSubmit = () => {
// updateEmailUser();
updateUserProfile();
signUp(name, userType, email);
let path =
userType === "salonOwner" ? "/addBuisnessDetails" : "/salonsNearby";
if (signupError) {
console.log(signupError.message);
}
return navigate(path, { replace: true });
};
//query function for saloon
return (
<>
<div className="form-wrapper ">
<div id="register-form">
<p className="login-title register-title">Complete Your Profile</p>
<div className="login-hr" />
<form onSubmit={handleSubmit}>
<div className="form-group login-sj">
<label htmlFor="exampleInputName1">Name:</label>
<input
type="text"
className="form-control"
id="exampleInputName1"
aria-describedby="emailHelp"
placeholder="Your Name"
name="displayname"
onChange={handleChange}
/>
</div>
<div className="form-group login-sj">
<label htmlFor="exampleInputEmail2">Email address</label>
<input
type="email"
className="form-control"
id="exampleInputEmail2"
aria-describedby="emailHelp"
placeholder="Enter email"
name="email"
onChange={handleChange}
/>
</div>
{/* <div className="form-group login-sj">
<label htmlFor="exampleInputPassword1"></label>
<input
type="password"
className="form-control"
id="exampleInputPassword2"
placeholder="Password"
value={userPassword}
onChange={(e) => setUserPassword(e.target.value)}
/>
</div> */}
{signupIsPending ? (
<>
<button
type="submit"
className="btn-auth-sj btn btn-primary"
disabled
>
Save Details
</button>
</>
) : (
<>
<button type="submit" className="btn-auth-sj btn btn-primary">
Save Details
</button>
</>
)}
</form>
</div>
</div>
</>
);
};
export default SaveUserDetails;
The part where error is Comming
.catch((error) => {
console.log(error + "In update profile");
});
Due to this my displayName Is not getting saved and after submitting user is getting logged out automatically.
I also asked this question previously and implemented it as answered Is their any function signupwithphonenumber in firebase just like signupwithemailandpassword? (for web) I want to make user register with his creds
Thanks In advance

Okay So the problem got resolved gust by wrapping updateProfile function(one provided by firebase) into
auth.currentUser.reload().then(() => { /* update profile function here */ })
Or In my case :-
const updateUserProfile = () => {
auth.currentUser.reload().then(() => {
updateProfile(auth.currentUser, {
displayName: name,
})
.then(() => {
console.log("profile Updated" + name + " " + email);
})
.catch((error) => {
console.log(error + "In update profile");
});
updateEmailUser();
});
};

where to call the Axios post request in reactjs

I have a form,thats data are saved in the state to be sent to the backend server.
i am handling the form with handleSubmit function and useEffect hook, where the handleSubmit prevents the form from being submitted unless it calls the validation function, in the useEffect I check if there are any errors using if condition and then console.log my data.
now I want to post the data hold in the state -the state is sent as a props to me- but I am confused whether to put the request in the HandleSubmit function or in the useEffect inside the body of the if condition.
import react, { Component, useState, useEffect } from 'react';
import {useNavigate } from 'react-router-dom';
import axios from 'axios';
import './sign.css';
const SignA = (props) => {
const navigate = useNavigate();
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const handleSubmit = (err) => {
err.preventDefault();
setFormErrors(validate(props.data));
setIsSubmit(true);
}
useEffect(() => {
console.log(Object.keys(formErrors).length);
if (Object.keys(formErrors).length === 0 && isSubmit) {
console.log('console the props data', props.data)
//here is where I think the post request should be put
if (isSubmit) {
return (navigate('/profileadmin'))
}
}
}, [formErrors])
const validate = (values) => {
const errors = {};
const regex = /^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/i;
if (!values.firstname) {
errors.firstname = 'firstname is required!';
}
if (!values.lastname) {
errors.lastname = 'lastname is required!';
}
if (!values.mobile) {
errors.mobile = 'mobile is required!';
}
if (!values.email) {
errors.email = 'email is required!';
} else if (!regex.test(values.email)) {
errors.email = 'this is not a valid email format!'
}
return errors;
}
return (
<div className='signup'>
<form onSubmit={handleSubmit} >
<div className="container">
<h1>Sign Up</h1>
<div className="name">
<div>
<input
type="text"
placeholder="First name"
name="firstname"
id='firstName'
value={props.data.firstname}
onChange={props.change}
/>
</div>
<div>
<input
type="text"
placeholder="Last name"
name="lastname"
value={props.data.lastname}
onChange={props.change}
/>
</div>
</div>
<p className='errorMsg'>{formErrors.firstname}</p>
<p className='errorMsg'>{formErrors.lastname}</p>
<br />
<div>
<input
type="text"
placeholder="Business mobile number"
name="mobile"
value={props.data.mobile}
onChange={props.change}
/>
<p className='errorMsg'>{formErrors.mobile}</p>
<br />
<input
type="text"
placeholder="Email Adress"
name="email"
value={props.data.email}
onChange={props.change}
/>
<p className='errorMsg'>{formErrors.email}</p>
<br />
</div>
</div>
<br />
<div className="checkbox">
<label>
<input type="checkbox" className="check" />i’ve read and agree with <a href="url" >Terms of service</a>
</label>
</div>
<div className="clearfix">
<button type="submit" className="signupbtn">Sign Up</button>
</div>
</div>
</form >
</div >
)
}
export default SignA;
this is the request
axios.post('', props.data)
.then(res => console.log('post res', res))
.catch(error => {
console.error('There was an error in post request!', error);
});

You don't necessarily need useEffect here.
Here is how you can implement such thing:
Declare a state to hold form values:
const [formData, setFormData] = useState({})
Declare function to set the state:
const handleChange = (name, value) => {
setFormData({...formData, [name]: value})
}
Input onChange to capture:
// handleChange has two parameters
<input
type="text"
placeholder="First name"
name="firstname"
id='firstName'
value={props.data.firstname}
onChange={(event) => handleChange('firstName', event.target.value)}
/>
function for calling post axios post request
const handleSubmit = () => {
//check for validations code here
// if validations are right then post request here
// this will give you all the fields like firstName: "", lastName: ""
let requestBody = {
...formData
}
axios.post("url", requestBody).then((res)=> {
//your code here
})
}

How to use react-intl-tel-input in ReactJS

Hello I have started learning ReactJS from past 1 months and from last 1 week i stuck with a problem. I am using React with Firebase Phone Authentication. I want to use react-intl-tel-input for taking Phone input but when i install the package and write the code while writing i don't understand how to use the code in right way and getting this type of error × TypeError: Cannot read properties of null (reading 'phoneNumber'). or some times its give me this error × TypeError: Cannot read properties of null (reading 'e') I don't want that user have to type there country code manually with phone Number I want that user can simply select there country and type there phone number
can Any one Please Help me i stuck in this from more than 1 week tried different npm packages also try to use jQuery but nothing work for me.
this is my code ( App.js )
import React from 'react'
import firebase from './firebase'
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
class App extends React.Component {
handleChange = (e) =>{
const {name, value } = e.target
this.setState({
[name]: value
})
}
configureCaptcha = () =>{
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
this.onSignInSubmit();
console.log("Recaptca varified")
},
defaultCountry: "IN"
});
}
onSignInSubmit = (e) => {
e.preventDefault()
this.configureCaptcha()
const phoneNumber = "+91" + this.state.mobile
console.log(phoneNumber)
const appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
console.log("OTP has been sent")
alert("OTP has been sent")
}).catch((error) => {
// Error; SMS not sent
// ...
console.log("SMS not sent")
alert("SMS not sent")
});
}
onSubmitOTP = (e) =>{
e.preventDefault()
const code = this.state.otp
console.log(code)
window.confirmationResult.confirm(code).then((result) => {
// User signed in successfully.
const user = result.user;
console.log(JSON.stringify(user))
alert("User is verified")
// ...
}).catch((error) => {
// User couldn't sign in (bad verification code?)
// ...
});
}
render() {
return (
<div>
<h2>Login Form</h2>
<form onSubmit={this.onSignInSubmit}>
<div id="sign-in-button"></div>
<IntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
placeholder="Enter Your Number"
value={this.state.phoneNumber}
onPhoneNumberChange={this.handlePhoneChange} />
{/* <input type="number" name="mobile" placeholder="Mobile number" required onChange={this.handleChange}/> */}
<button type="submit">Submit</button>
</form>
<h2>Enter OTP</h2>
<form onSubmit={this.onSubmitOTP}>
<input type="number" name="otp" placeholder="OTP Number" required onChange={this.handleChange}/>
<button type="submit">Submit</button>
</form>
</div>
)
}
}
export default App

This library does not return a component, am pasting my component.
phoneInput.js
import React, { useEffect, useState } from 'react';
import intlTelInput from 'intl-tel-input';
import clsx from 'clsx';
import 'intl-tel-input/build/css/intlTelInput.css';
export const PhoneInput=({disabled,...rest})=>{
//rest may include-name, onChange, etc
const [options,toggleOptions]=useState({
allowDropdown:true,
autoHideDialCode:false,
initialCountry: "auto",
separateDialCode:true,
nationalMode:false,
hadInitialPlaceholder:true,
utilsScript: process.env.REACT_APP_PHONE_UTIL_SCRIPT,
geoIpLookup: async function(callback) {
await fetch(process.env.REACT_APP_GEOIP_SERVICE)
.then(res=>res.json())
.then(({country})=>{
callback(country)
})},
customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
return "e.g. " + selectedCountryPlaceholder;
},
})
useEffect(()=>{
const input = document.querySelector("#signup-phone");
if(!input) return;
const iti=intlTelInput(input, {
...options
});
return()=>{
iti.destroy();
}
},[])
useEffect(()=>{
toggleOptions(o=>({
...o,
allowDropdown:!disabled
//disable dropdown when disable flag is set
}));
},[disabled])
return(
<input
disabled={disabled}
type="tel"
id="signup-phone"
{...rest}
/>
)
}
Utilised in
signup.js
<PhoneInput
name="phone_no"
onChange={handleChange}
disabled={loading}
error={errors['phone_no']}
/>

While implementing react-intl-tel-input in my react JS it give me errors

Hello I have started learning ReactJS and from last 1 week i stuck with a problem. I am using React with Firebase Phone Authentication. I want to use react-intl-tel-input for taking Phone input. I have installed the npm package and write the code as told in documentation. after running the code it takes the input correctly but after clicking on verify it say this number is not register but this number work perfectly with tag but not with this
please have a look on my code
import React from 'react'
import firebase from './firebase'
import 'firebase/auth';
import "./App.css";
import { getDatabase, ref, child, get } from "firebase/database";
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
class Login extends React.Component {
state = {};
handlePhoneChange = (status, phoneNumber, country) => {
console.log({ phoneNumber });
this.setState({ phoneNumber });
};
handleChange = (e) => {
console.log (e)
const { name, value } = e.target
this.setState({
[name]: value
})
console.log (value)
this.setState({ phoneNumber: value }, () => {
console.log(this.state.phoneNumber);
});
}
configureCaptcha = () =>{
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
this.onSignInSubmit();
console.log("Recaptca varified")
},
// defaultCountry: "IN"
}
);
}
onSignInSubmit = (e) => {
e.preventDefault()
this.configureCaptcha()
const phoneNumber = this.state.mobile
console.log(phoneNumber)
const appVerifier = window.recaptchaVerifier;
const dbRef = ref(getDatabase());
get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => {
if (snapshot.exists()) {
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then((confirmationResult) => {
window.confirmationResult = confirmationResult;
alert('An OTP has been sent to your registered mobile number')
localStorage.setItem("Phone_No", phoneNumber)
console.log(localStorage.getItem('Phone_No'));
}).catch((error) => {
console.error(error);
alert("Oops! Some error occured. Please try again.")
});
}
else {
alert('Sorry, this mobile number is not registered with us. Please use your registered mobile number.');
}
})
}
onSubmitOTP = (e) => {
e.preventDefault()
const code = this.state.otp
console.log(code)
window.confirmationResult.confirm(code).then((result) => {
// User signed in successfully.
const Users = result.user;
console.log(JSON.stringify(Users))
this.props.history.push("/home");
}).catch((error) => {
alert("You have entered wrong code")
});
}
render() {
return (
<>
<main>
<div className="img">
<img src="./55k-logo.png" alt="Company Logo" style={{ height: "80px", width: "200px" }} />
<br />
</div>
<fieldset>
<div className="Main-header">
<h1>Sign-In</h1>
<p>Limtless Water. From Unlimited Air.</p>
<form onSubmit={this.onSignInSubmit}>
<div id="sign-in-button"></div>
<label>Mobile Number</label> <br />
<IntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
name="mobile"
placeholder="Enter Your Number"
input
type="tel"
value={this.state.phoneNumber}
onPhoneNumberChange={this.handlePhoneChange}
/>
{/* <input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange} /> */}
<div className="buttons">
<button type="submit">Verify</button>
</div>
</form>
<div>
<form onSubmit={this.onSubmitOTP}>
<label >Code</label> <br />
<input type="text" name="otp" placeholder="Enter six digit code" required onChange={this.handleChange} />
<div className="buttons" >
<button type="submit">Continue</button>
</div>
</form>
</div>
</div>
</fieldset>
</main>
</>
)
}
}
export default Login;
after running the code i got this message but my number is registered
But my code work perfectly with this
<input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange} /> but i don't want to take input with normal input tag because here user have to type country code manually

bad request on submission

i am trying to submit form . but getting error 400 bad request . using formik for form in react js
error : Bad request 400
i am trying to submit form . but getting error 400 bad request . using formik for form in react js
error : Bad request 400
i am trying to submit form . but getting error 400 bad request . using formik for form in react js
error : Bad request 400
here is my code
import React, { Component } from 'react';
import withRedux from '../../redux';
// import { Card } from "react-bootstrap";
// import { CardBody } from "reactstrap";
// import { Row, Form, Col, Button } from "react-bootstrap";
import axios from 'axios';
import { Formik, Form, Field, ErrorMessage, connect } from 'formik';
import {
Card,
CardBody,
Row,
Col,
CardSubtitle,
Button,
CardHeader,
FormGroup,
Label,
} from 'reactstrap';
const NewEdit = (props) => {
const [company, setCompany] = React.useState({ ...props.company });
const changeHandler = (e) => {
const newVal = { [e.target.name]: e.target.value };
setCompany({
...company,
...newVal,
});
};
const saveUpdateHandler = (e) => {
// e.preventDefault();
// const validate = (e) => {
// const {
// company_name,
// company_email,
// company_website,
// company_phone,
// company_address,
// } = e;
// console.log(e);
const id = props.match.params.companyId;
delete company.id;
if (id) {
axios
.put(`/company/${id}`, company)
.then((response) => {
console.log(response);
setTimeout(() => {
props.history.push('/company');
}, 2000);
})
.catch((error) => {
console.log(error);
});
} else {
axios
.post(`/company`, company)
.then((response) => {
console.log(response);
setTimeout(() => {
props.history.push('/company');
}, 2000);
})
.catch((error) => {
console.log(error);
});
}
// };
};
const validate = (e) => {
console.log('e', e);
const errors = {};
if (!e.company_name) {
errors.company_name = 'Required';
} else if (e.company_name.length > 15) {
errors.company_name = 'Must be 15 characters or less';
}
if (!e.company_address) {
errors.company_address = 'Required';
} else if (e.company_address.length > 20) {
errors.company_address = 'Must be 20 characters or less';
}
if (!e.company_phone) {
errors.company_phone = 'Required';
} else if (e.company_phone.length < 11) {
errors.company_phone = 'Must be 11 characters or more';
}
if (!e.company_email) {
errors.company_email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(e.company_email)
) {
errors.company_email = 'Invalid email address';
}
console.log('err', errors);
return errors;
};
return (
<Card>
<CardHeader>Sign in to your account</CardHeader>
<CardBody>
<CardSubtitle></CardSubtitle>
{/* <hr /> */}
<Formik
initialValues={
props.company
? { ...props.company }
: {
company_name: '',
company_email: '',
company_website: '',
company_address: '',
company_phone: '',
}
}
validate={validate}
onSubmit={saveUpdateHandler}
>
<Form>
<FormGroup>
<Label>Company Name</Label>
<Field
type='text'
className='form-control'
value={company.company_name}
name='company_name'
/>
<ErrorMessage
name='company_name'
component='small'
className='text-danger'
/>
</FormGroup>
<FormGroup>
<Label>Company Email</Label>
<Field
type='text'
className='form-control'
value={company.company_email}
name='company_email'
/>
<ErrorMessage
name='company_email'
component='small'
className='text-danger'
/>
</FormGroup>
<FormGroup>
<Label>Company Website</Label>
<Field
type='text'
className='form-control'
value={company.company_website}
name='company_website'
/>
<ErrorMessage
name='company_website'
component='small'
className='text-danger'
/>
</FormGroup>
<FormGroup>
<Label>Company Address</Label>
<Field
type='text'
className='form-control'
value={company.company_address}
name='company_address'
/>
<ErrorMessage
name='company_address'
component='small'
className='text-danger'
/>
</FormGroup>
<FormGroup>
<Label>Company Phone</Label>
<Field
type='text'
className='form-control'
value={company.company_phone}
name='company_phone'
/>
<ErrorMessage
name='company_phone'
component='small'
className='text-danger'
/>
</FormGroup>
<Row>
<div className='col'>
<p>
<small>
<a href='/' className='text-secondary'>
Forgot password?
</a>
<br />
</small>
<a href='/'>Sign up for a new account</a>
</p>
</div>
<div className='col-auto'>
<Button variant='primary' type='submit'>
Save
</Button>
</div>
</Row>
</Form>
</Formik>
</CardBody>
</Card>
);
};
export default withRedux(NewEdit);

I solve my self first part :
by changing compnay ----> e now post method working but edit still not working ??
else {
axios
.post(`/company`, e)
.then((response) => {
console.log(response);
setTimeout(() => {
props.history.push('/company');
}, 2000);
})
.catch((error) => {
console.log(error);
});
}
// };
};