I've got JWT logging and I'm trying to get the user by token
export const authTokenLogin = async (token) => {
let extra_url = `jwttokenlogin`;
try {
console.log("Break Point 1");
const response_user = await Axios.post(BASE_URL + extra_url, null, {
params: {
token,
},
});
console.log(response_user.data);
return response_user.data;
} catch (e) {
console.log("Break Point 2");
console.log(e.response.status);
return null;
}
};
all worked fine until few days ago from reason yet to be discovered
now it gets to "Break Point 1" and stock there, not reaching "Break Point 2" or "Break Point 3"
just stock and heat up my phone
I've manage to get the token from
export const authLogin = async (email, password, rememberMe) => {
var formData = new FormData();
formData.append("email", email);
formData.append("password", password);
formData.append("remember_me", rememberMe);
try {
return await Axios.post(BASE_URL + "jwtlogin", formData).then((res) => {
return res.data.data;
});
} catch (e) {
return e.response.status;
}
};
So the server is alive and responding
looking for solution , Thanks
Related
In the current project, I log in to Firebase and get the user's information.
However, the log below occurs on the server, and there is a problem of getting all user information, not a specific user.
{"level":30,"time":1675750089706,"pid":16748,"hostname":"DESKTOP-JP9RKDH","msg":"HTTP GET: /api/friends/"}
{"level":30,"time":1675750089707,"pid":16748,"hostname":"DESKTOP-JP9RKDH","msg":"UserID is invalid, retrieving all friends"}
{"level":30,"time":1675750089733,"pid":16748,"hostname":"DESKTOP-JP9RKDH","msg":"Decoded Token User ID: Yk1eA8Vbh7fFIRd3eTNXvyHCdwH3"}
I thought there was no problem because I was refreshing when the token expired as follows.
Also, checking the token stored in the cookie every hour showed that it was a new token.
Please let me know what is causing this error.
const setToken = token => {
cookie.set('FB_TOKEN', token);
};
export const getToken = () => {
fbAuth.onIdTokenChanged(async user => {
if (user) {
const newToken = await user.getIdToken();
setToken(newToken);
}
});
const token = cookie.get('FB_TOKEN') ?? '';
return token;
};
export const login = createAsyncThunk('user/login', async (data, { rejectWithValue }) => {
try {
let credential;
if (data.type === 'google') {
localStorage.clear();
const provider = new GoogleAuthProvider();
credential = await signInWithPopup(fbAuth, provider);
const token = await credential.user.getIdToken();
setToken(token);
} else {
credential = await signInWithEmailAndPassword(fbAuth, data.loginInfo.email, data.loginInfo.password);
const token = await credential.user.getIdToken();
setToken(token);
}
return {
id: credential.user.uid,
nickname: credential.user.displayName,
email: credential.user.email,
image: credential.user.photoURL,
};
} catch (error) {
return rejectWithValue(error.response.data);
}
});
axios.defaults.baseURL = backendUrl;
axios.defaults.withCredentials = true;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.interceptors.request.use(
async config => {
const token = await getToken();
config.headers.Authorization = `Bearer ${token}`;
return config;
},
error => {
return Promise.reject(error);
},
);
export const loadMyFriends = createAsyncThunk('schedule/loadMyFriends', async () => {
const response = await axios.get('/friends');
return response.data;
});
I was working on a project using Firebase cloud messaging react. I was sending this to my server, but it doesn't work. Surely I have tried, but I don't know what's wrong again.
Below is the code.
Here it sends a POST request to Firebase, and it should send a notification to the user.
async function sendNotification(id, userMessage) {
const headers = {
'Authorization': `key=${code}`,
'Content-Type': 'application/json'
}
const message = {
'to': `${id}`,
'content_available': true,
'apns_priority': 5,
'notification': {
body: `${userMessage}`
},
const url = 'https://fcm.googleapis.com/fcm/send'
//console.log(code)
await axios.post(url, message, {
headers: headers
})
}
const sendMessageToServer = async (e) => {
//e.preventDefault();
toggle()
const docRe = doc(database, "help", mailer);
const data = {
email: user.email,
user: newMessage,
}
//console.log(data, 'not clear')
setNewMessage('')
//console.log(data, newMessage, 'cleared')
setShow(false)
if(newMessage === '') {
}
else {
const docRef = doc(database, "users", mailer);
await updateDoc(docRe, {
msg: arrayUnion(data)
})
.then(() => {
async function p() {
const id = await getDoc(docRef)
//console.log(id.data())
sendNotification(id.data().notice, `Admin : ${data.user}`)
}
p()
})
}
Sometimes it sends to my localhost because I tested there, but it doesn't work on my Netlify app. Secondly, I noticed that it keeps generating the same token for each user, but that's not the issue, but if you can help in both I would be grateful.
export default function Dashboard() {
async function callToken() {
await getToken(messaging, {vapidKey: process.env.NOTIFICATION})
.then((code) => {
//console.log(code)
async function docRef() {
const dc = doc(database, "users", auth.currentUser.email);
await updateDoc(dc, {
notice: code
});
}
docRef()
})
}
async function requestPermission() {
await Notification.requestPermission()
.then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.')
callToken()
}
})
}
const goTo = useNavigate();
useEffect(() => {
onAuthStateChanged(auth, (data) => {
if(!data) {
goTo('/login')
}
else {
currentBalance();
requestPermission()
}
})
})
}
Please know I imported all required modules.
I am using the following code to obtain the users idToken before sending it to the backend as an authorisation header:
const user = firebase.auth().currentUser
const idToken = await user.getIdToken()
sent like this:
var res = await axios.post(backUrl + "account/load_balance", {
uid: uid,
id: id
},
{
headers: {
Authorization: 'Bearer ' + idToken
}});
It works well but on one of my pages the request is sent to the server before idtoken variable has filled and the user is still null.
I have read that i need to implement onAuthStateChanged as it waits for the token before triggering: https://firebase.google.com/docs/auth/web/manage-users#web-version-8
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
var uid = user.uid;
// ...
} else {
// User is signed out
// ...
}
});
However i am unsure how to implement this in to my code.
Can anyone advise?
Full code:
const RoutingForPortfolio = (props) => {
let uid = localStorage.getItem("account-info");
let { id } = useParams();
const loadBlockchainData = async (dispatch) => {
if (id === null || id === undefined) {
id = "test";
}
const user = firebase.auth().currentUser
const idToken = await user.getIdToken()
console.log(idToken)
var res = await axios.post(backUrl + "account/load_balance", {
uid: uid,
id: id
},
{
headers: {
Authorization: 'Bearer ' + idToken
}});
if (res.data === null) {
await wait(2);
document.location.href = "/logout"
return;
}
else {
// const web3 = new Web3(new Web3.providers.HttpProvider('https://data.stocksfc.com:3200'));
// dispatch(web3Loaded(web3));
const account = res.data.address;
dispatch(web3AccountLoaded(account));
localStorage.setItem("account-address", account);
if (res.data.token_flag && res.data.exchange_flag) {
await dispatch(setLoginUserName(res.data.name));
await dispatch(setLoginUserEmail(res.data.email));
if (res.data.balance !== null) {
await dispatch(etherBalanceLoaded(res.data.balance[0]));
await dispatch(tokenBalanceLoaded(res.data.balance[1]));
await dispatch(exchangeEtherBalanceLoaded(res.data.balance[2]));
await dispatch(exchangeTokenBalanceLoaded(res.data.balance[3]));
}
}
else {
Swal.fire({
icon: "error",
title: "Error...",
text: "Error 485 - Please report to admin",
});
return;
}
}
};
useEffect(() => {
if (uid) {
loadBlockchainData(props.dispatch);
}
}, [props.dispatch, uid]);
return (
<>
{uid ? (
<div>
<Portfolio id={id} />
</div>
) : (
<Login />
)}
</>
);
};
As you correctly identified, firebase.auth().currentUser is a synchronous action that only gets the user object when it is called. You've also correctly surmised that you instead need to use firebase.auth().onAuthStateChanged() to wait to check if the user is logged in.
This can be achieved by wrapping an onAuthStateChanged listener into a Promise where it is immediately detached after being called once.
function getValidatedUser() {
return new Promise((resolve, reject) => {
const unsubscribe = firebase.auth()
.onAuthStateChanged(
(user) => {
unsubscribe();
resolve(user);
},
reject // pass up any errors attaching the listener
);
});
}
This now allows you to use:
const user = await getValidatedUser();
if (!user) {
// todo: handle no user signed in, such as:
throw new Error("User not signed in!");
}
// if here, user is User object
const idToken = await user.getIdToken()
I am using firebasev9 authentication for my react project. I have used email authentication for logging in/signing up a user. I want to add phone number too in the user but I am doing all the right steps but when I call updatePhoneNumber with user and phone crediential it throws an error and doesnt add phone number. I am updating the displayName too within the same function which works fine.
I have enabled phone signin in firebase dashboard
The error I am getting is this:
(https://i.postimg.cc/yY55Qzg2/Screenshot-2022-06-25-200735.jpg)
This is my signup function:
const signup = async (email, password, displayName, phoneNumber,phoneCrediential, userType) => {
setError(null);
setIsPending(true);
try {
const res = await createUserWithEmailAndPassword(
auth,
email,
password
);
console.log(res.user);
if (!res) {
throw new Error("Could not complete signUp");
}
debugger;
await updateProfile(res.user, { displayName });
**This updatePhonenumber function throws this error flow moves to catch block**
const resPhone = await updatePhoneNumber(auth.currentUser, phoneCrediential );
console.log(resPhone)
dispatch({ type: "LOGIN", payload: res.user });
console.log(res.user)
addDocument({
name: res.user.displayName,
email: res.user.email,
uid: res.user.uid,
type: userType,
});
if (!isCancelled) {
setError(null);
setIsPending(false);
}
} catch (err) {
if (!isCancelled) {
console.log(err.message);
setError(err.message);
setIsPending(false);
}
}
};
In my component, I take phone number, generate Otp, and take otp and pass phoneCredential to the signup function:
const [verificationIdState, setVerificationIdState] = useState(null);
const [phoneCredientialState, setPhoneCredientialState] = useState(null);
const handleRecaptcha = () => {
window.recaptchaVerifier = new RecaptchaVerifier(
"sign-in-button",
{
size: "invisible",
callback: (response) => {
// reCAPTCHA solved
},
},
auth
);
};
const handleGetOTP = () => {
handleRecaptcha();
const phoneNumber = "+91" + userPhoneNumber;
const applicationVerifier = window.recaptchaVerifier;
const provider = new PhoneAuthProvider(auth);
const verificationId = provider.verifyPhoneNumber(
phoneNumber,
applicationVerifier
);
if (verificationId) {
setVerificationIdState(verificationId);
}
};
const handleOTPSubmit = () => {
const phoneCredential = PhoneAuthProvider.credential(
verificationIdState,
userOTP
);
if (phoneCredential) {
setPhoneCredientialState(phoneCredential);
console.log(phoneCredential);
}
};
//Base Register
const handleRegisterSubmit = (e) => {
e.preventDefault();
signup(
userEmail,
userPassword,
userName,
userPhoneNumber,
phoneCredientialState,
userType
);
};
I am trying to send the validation email upon the account registration, using firebase. The registration is being done successfully but whenever I try to code email verification it gives me an error. Probably because I don't know where to place it. All my firebase methods are on Fire.js, which are the following:
import firebaseKeys from './Config';
import firebase from 'firebase';
require("firebase/firestore");
class Fire {
constructor() {
if (!firebase.apps.length) {
firebase.initializeApp(firebaseKeys);
}
}
addPost = async ({ text, localUri }) => {
const remoteUri = await this.uploadPhotoAsync(localUri, 'photos/${this.uid}/${Date.now()}');
return new Promise((res, rej) => {
this.firestore.collection('posts').add({
text,
uid: this.uid,
timestamp: this.timestamp,
image: remoteUri
})
.then(ref => {
res(ref);
})
.catch(error => {
rej(error);
});
});
}
uploadPhotoAsync = async (uri, filename) => {
return new Promise(async (res, rej) => {
const response = await fetch(uri);
const file = await response.blob();
let upload = firebase
.storage()
.ref(filename)
.put(file);
upload.on(
"state_changed",
snapshot => {},
err => {
rej(err);
},
async () => {
const url = await upload.snapshot.ref.getDownloadURL();
res(url);
}
);
});
}
createUser = async user => {
let remoteUri = null
try {
await firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
//I tried to code it here with user.sendEmailVerification();
let db = this.firestore.collection("users").doc(this.uid)
db.set({
name: user.name,
email: user.email,
avatar: null
})
if (user.avatar) {
remoteUri = await this.uploadPhotoAsync(user.avatar, 'avatars/${this.uid}')
db.set({avatar: remoteUri}, {merge: true});
}
} catch (error) {
alert("Error: ", error);
}
};
get firestore() {
return firebase.firestore();
}
get uid() {
return (firebase.auth().currentUser || {}).uid;
}
get timestamp() {
return Date.now();
}
}
Fire.shared = new Fire();
export default Fire;
The createUserWithEmailAndPassword() method returns a Promise which resolves with a UserCredential AND (as the the doc indicates) "on successful creation of the user account, this user will also be signed in to your application."
So you can easily get the signed in user by using the user property of the UserCredential, and call the sendEmailVerification() method, as follows:
try {
const userCredential = await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
await userCredential.user.sendEmailVerification();
//In the next line, you should most probably use userCredential.user.uid as the ID of the Firestore document (instead of this.uid)
cont db = this.firestore.collection("users").doc(this.uid);
//...
} catch (...)
Note that you may pass an ActionCodeSettings object to the sendEmailVerification() method, see the doc.