Get user info with JWT in React - reactjs

I´m storing the user token in the localstorage after a user logs in, and i would like to know how i can use this token that is in the localstorage to fetch the user info.
backend login.js
module.exports.login = async (req, res) => {
const { email, password } = req.body;
try {
const user = await User.findOne({ email: email });
if (!user) return res.status(404).json({ message: "Usuário não cadastrado!" });
const isMatch = bcrypt.compare(password, user.password);
if (!isMatch) return res.status(400).json({ message: "Email e/ou senha incorretos." });
const token = tokenGenereator(user._id);
return res.status(200).json({ result: user, token });
} catch (error) {
console.log(error)
}
};
frontend login.js
export const login = (data, history) => {
return async (dispatch) => {
try {
const userData = await api.login(data);
localStorage.setItem("userToken", JSON.stringify(userData.data.token));
dispatch(
setUser({
fullname: userData.data.fullname,
email: userData.data.email,
isAuth: true,
})
);
history.push("/home");
} catch (error) {
if (error.response && error.response.data.message) {
dispatch(
setNotification({
variant: "danger",
message: error.response.data.message,
})
);
}
}
};
};
I pass the token to the backend
// i would pass the jwt to the function as a parameter
export const fetchUser = (data) => {
return async (dispatch) => {
const user = await api.getUserData(data);
console.log(user);
};
};
And i recieve
module.exports.getCurrentUser = async (req, res) => {
const { token } = req.body;
// i dont know what to do from here...
};

Related

Unable to verify user token stored in cookie in MERN app

I am trying to verify a logged In user token in my MERN. However, I am getting "undefined" on client-side as API response.
When I hit the endpoint http://127.0.0.1:1000/api/v1/users/login in postman to login a user and this endpoint http://127.0.0.1:1000/api/v1/users/verify to verify a user's token, the token is returned.
But when I do the same in my react app, the token returns undefined. I have spent hours debugging it but unable to figure it out.
Please I need help.
Here is my React (client side) code:
axios.defaults.withCredentials = true;
function Welcome() {
const [user, setUser] = useState("");
const sendRequest = async () => {
const res = await axios
.get("http://127.0.0.1:1000/api/v1/users/verify", {
withCredentials: true,
})
.catch((err) => console.log(err));
const data = await res.data;
return data;
};
React.useEffect(() => {
sendRequest().then((response) => console.log(response.data));
}, []);
return <div>Welcome</div>;
}
Here is my login endpoint.
exports.loginUser = async (req, res) => {
const { name, password } = req.body;
let existingUser;
try {
existingUser = await User.findOne({ name: name });
} catch (err) {
return new Error(err);
}
if (!existingUser) {
return res.status(400).json({ status: "fail", message: "user not found" });
}
const isPasswordCorrect = bcrypt.compareSync(password, existingUser.password);
if (!isPasswordCorrect) {
return res
.status(400)
.json({ status: "fail", message: "invalid email or password" });
}
const token = jwt.sign({ id: existingUser._id }, process.env.JWT_SECRET, {
expiresIn: process.env.JWT_EXPIRES_IN,
});
res.cookie("jwt", token, {
path: "/",
expires: new Date(Date.now() + 1000 * 70),
httpOnly: true,
sameSite: "lax",
});
return res
.status(200)
.json({ message: "Succesfully loggedIn", user: existingUser, token });
};
Here is my verifyToken endpoint
exports.verifyToken = (req, res, next) => {
const cookies = req.headers.cookie;
const token = cookies.split("=")[1];
if (!token) {
res.status(404).json({ message: "no token found" });
}
jwt.verify(String(token), process.env.JWT_SECRET, (err, user) => {
if (err) {
return res.status(400).json({ message: "Invalid token" });
}
req.id = user.id;
});
next();
};
router.route("/verify").get(verifyToken, getUser);//endpoint
exports.getUser = async (req, res, next) => {
const userId = req.id;
let user;
try {
user = await User.findById(userId, "-password");
} catch (err) {
return new Error(err);
}
if (!user) {
return res.status(404).json({ status: "fail", message: "user not found" });
}
return res.status(200).json({ user });
};

Cookie is generated in API but not Cookies not being stored in the browser

Cookie is generated in API but not Cookies not being stored in the browser,
I fing some solution but it did not work for me . Can anybody answer my query .Please
This is Login route from API ROUTE
const express=require("express");
const router = express.Router();
const { body } = require('express-validator');
const { register ,login} = require("../controllers/auth");
router.post("/login",[
body('email',"Email is not valid").isEmail(),
body('password',"password must contain at least 5 characters"),
],login)
This is Controller of Login route FROM BACKEND and it is connected to login route
const cookie = require('cookie-parser')
const express = require("express");
const User = require("../models/users");
const { validationResult } = require('express-validator');
const bcryptjs = require("bcryptjs")
const jwt = require("jsonwebtoken")
const login = async (req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
const { password, email } = req.body
try {
let user = await User.findOne({ email });
if (!user) {
success = false
return res.status(400).json({ error: "Please try to login with correct credentials" });
}
let comparePassword = await bcryptjs.compare(password, user.password)
if (!comparePassword) {
return res.status(400).json("Incorrect Login credentials")
}
let data = {
user: {
id: user.id
}
}
let token = await jwt.sign({ data, isAdmin: user.isAdmin }, process.env.SECRET_KEY)
res.cookie("access_token", token, {
expires: new Date(Date.now() + 2589000),
httpOnly: true
});
res.status(201).json({user,token});
} catch (error) {
res.status(500).json({ status: "server error", message: error.message })
}
}
This is the middlewear of and and its for authentication and autherization of user
const jwt = require("jsonwebtoken");
const verifyToken = (req, res, next) => {
const token = req.cookies.access_token;
if (!token) {
return res.status(403).json({
status: "user not authenticated",
});
}
try {
jwt.verify(token,process.env.SECRET_KEY, (err, user) => {
if (err)
return res.json({ status: "Invalid Token", message: err.message });
req.user = user;
next();
});
} catch (error) {
res
.status(500)
.send({ status: "Internal server error", message: error.message });
}
};

About firebase token service

i am following Ryan Dunghel Ecommerce course, i am using firebase admin to verify the token client sent, but some magic happened, the token ok for the first time i log, but after i refresh the page, everything gone, also happened with Google login,enter image description here i find out the similar question too, someone please give me advise, i dont want to stop thing course. thank.
App.js
const App = () => {
const dispatch = useDispatch();
// to check firebase auth state
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(async (user) => {
if (user) {
const idTokenResult = await user.getIdTokenResult();
console.log("user", user);
currentUser(idTokenResult.token)
.then((res) => {
dispatch({`enter code here`
type: "LOGGED_IN_USER",
payload: {
name: res.data.name,
email: res.data.email,
token: idTokenResult.token,
role: res.data.role,
_id: res.data._id,
},
});
})
.catch((err) => console.log(err));
}
});
// cleanup
return () => unsubscribe();
}, [dispatch]);
login.js
const handleSubmit = async (e) => {
e.preventDefault();
// setLoading(true);
try {
let result = await signInWithEmailAndPassword(auth,email, password);
const { user } = result;
const TokenResult = await user.getIdTokenResult();
createOrUpdateUser(TokenResult.token)
.then((res) => {
dispatch({
type: userActionType.USER_LOGGED_IN,
payload: {
name: res.data.name,
email: res.data.email,
token: TokenResult.token,
role: res.data.role,
_id: res.data._id,
},
});
console.log(res);
roleRedirect(res);
})
.catch((err) => console.log(err));
} catch (error) {
console.log(error);
toast.error(error.message);
}
};
middleware, where verify token
exports.authCheck = async (req, res, next) => {
// console.log(req.headers); // token
try {
const firebaseUser = await admin
.auth()
.verifyIdToken(req.headers.authtoken);
// console.log("FIREBASE USER IN AUTHCHECK", firebaseUser);
req.user = firebaseUser;
next();
} catch (err) {
res.status(401).json({
err: "Invalid or expired token",
});
}
};

Returning response from Dispatch

I'm implementing login functionality to my application and am trying to return the response from a dispatched thunk action. I'm purposely entering the incorrect password because i'd like for the errors that are set in my backend to display within an antd notification on the frontend. My expected response should be:
return res.status(400).json({
success: false,
message: 'Invalid email address or password.',
});
but instead i'm getting the following in the console:
Error: Request failed with status code 400
Route:
const loginUser = async (req, res) => {
// Validate Login Input
const { error } = validateLoginInput(req.body);
if (error)
return res
.status(400)
.json({ success: false, message: error.details[0].message });
req.body.email = req.body.email.toLowerCase();
req.body = sanitize(req.body);
const { email, password } = req.body;
try {
// See if user exists
let user = await User.findOne({ email });
if (!user) {
return res.status(400).json({
success: false,
message: 'Invalid email address or password.',
});
}
// Compare passwords
const isMatch = await bcrypt.compare(password, user.password);
if (!isMatch) {
return res.status(400).json({
success: false,
message: 'Invalid email address or password.',
});
}
// Return jsonwebtoken
const payload = {
user: {
id: user.id,
},
};
jwt.sign(
payload,
process.env.JWT_SECRET,
{ expiresIn: 3600 },
(error, token) => {
if (error) throw error;
res.json({ token });
}
);
} catch (error) {
res.status(500).json({ success: false, messsage: 'Server error' });
}
};
Actions:
export const loginBegin = () => ({
type: LOGIN_BEGIN,
});
export const loginSuccess = (user) => ({
type: LOGIN_SUCCESS,
payload: user,
});
export const loginFail = (error) => ({
type: LOGIN_FAIL,
payload: error,
});
Thunk:
export const attemptLogin = (formData) => async (dispatch) => {
dispatch(loginBegin());
return await postLogin(formData)
.then((res) => {
dispatch(loginSuccess(res.data));
console.log(res.data); <-- This doesn't even show in console
})
// .then(() => {
// setTimeout(() => {
// dispatch(push('/app'));
// }, 2000);
// })
.catch((error) => {
dispatch(loginFail(error));
});
};
onSubmit:
const onSubmit = async (values) => {
const { email, password } = values;
setLoading(true);
try {
const response = await dispatch(attemptLogin({ email, password }));
console.log(response); <-- returns undefined
if (response.data.success) {
setLoading(false);
notification['success']({
message: 'Congrats!',
description: response.message,
});
} else {
notification['error']({
message: 'Uh-oh!',
description: response.message,
});
}
} catch (error) {
console.log(error);
}
};
The problem is that you are not returning the response in the promise. Also, if you are getting a 400 response, it probably rejects the promise or throws an error.
export const attemptLogin = (formData) => async (dispatch) => {
dispatch(loginBegin());
return await postLogin(formData)
.then((res) => {
dispatch(loginSuccess(res.data));
return res;
})
.catch((error) => {
dispatch(loginFail(error));
return error; // this will only work if the error is the response object.
});
};

How to Resolve 401 unAuthorized error even though Tokens and everything is set? and postman returns no issue at all while testing -MERN Stack

i am new to react and I've been trying to make this api work,(following you tube tutorial), when i test the routes via postman the response i receive is 'OK-working' but then when i try to login from my react app, it turns to unauthorized, i don't know how to deal with this *** i have done everything i could possibily upto my understanding ***, I've explored as much stack Overflow as i could as well as Googled it but still not found something understandable enough.
p.s this is very critical issue for me as this is part of my web Class at college and it holds a great deal of grades!
Attaching the link to github directory as well in case you need it :
https://github.com/nescafestar/twitter-clone
this is my AuthActions.js file
```
//authAction.js
import axios from 'axios';
import {GET_ERRORS, SET_CURRENT_USER} from '../constants';
import setAuthHeader from '../utils/setAuthHeader'
export const registerUser = (userData, history) => dispatch => {
axios.post('http://localhost:5000/api/users/register', userData,{
headers: {
'Authorization': 'Bearer'+ localStorage.getItem('jwtToken')
}
})
.then(res => {
console.log('----> registering')
const { token } = res.data
localStorage.setItem('jwtToken', token)
if(token){
axios.defaults.headers.common['Authorization']='Bearer : '+ token
}
history.push('/')})
.catch(err => dispatch({
type: GET_ERRORS,
payload: err.response.data
}))
}
export const loginUser = (userData) => dispatch => {
axios.post('http://localhost:5000/api/users/login',userData,{
headers: {
'Authorization': 'Bearer : ' +localStorage.getItem('jwtToken')
}
})
.then(res => {
// console.log(userData)
const { token } = res.data
localStorage.setItem('jwtToken', token)
if(token){
axios.defaults.headers.common['Authorization']='Bearer : ' +token
}
console.log('---> hit dispatch')
dispatch(getCurrentUser())
})
.catch(err => {
// console.log(err);
// dispatch({
// type: GET_ERRORS,
// payload: err.response.data
// })
})
}
export const getCurrentUser = () => dispatch => {
axios.get('http://localhost:5000/api/users',{
headers: {
'Authorization': 'Bearer : ' +localStorage.getItem('jwtToken')
}
})
.then(res => dispatch(setCurrentUser(res.data)))
.catch(err => dispatch({
type: GET_ERRORS,
payload: err.response.data
}))
}
export const setCurrentUser = (data) => {
console.log('----> setting user!')
return {
type: SET_CURRENT_USER,
payload: data
}
}
export const logoutUser=()=>dispatch=>{
localStorage.removeItem('jwtToken')
setAuthHeader()
dispatch(setCurrentUser())
}
```
this is the set Auth Header one:
```
import axios from 'axios'
// const jsonwebtoken=require('jsonwebtoken')
export default function(token){
console.log(token)
if(token){
console.log('Token has been set-properly')
return axios.defaults.headers.common['Authorization']='Bearer'+ token
}else{
return axios.defaults.headers.common['Authorization']=null
}
}
```
and lastly this is my POST.js file which is also returning the same issue of being unAuthorized
import axios from 'axios'
// const jsonwebtoken=require('jsonwebtoken')
export default function(token){
console.log(token)
if(token){
console.log('Token has been set-properly')
return axios.defaults.headers.common['Authorization']='Bearer'+ token
}else{
return axios.defaults.headers.common['Authorization']=null
}
}
``` ```
////////////////////////*** ROUTER ***
``` ```
// also the Routes/User.js file in case someone wants to know about it as well
const router = require("express").Router();
const User = require("../models/User");
const jwt=require('jsonwebtoken');
const passport = require("passport");
//validation
const validateRegisterInput = require("../validation/register");
const validateLoginInput = require("../validation/login");
//handling password hasing
const bcrypt = require("bcryptjs");
// const utils = require("../utils/utils");
//routing requests
//handling post request
router.route("/register").post((req, res) => {
const { isValid, errors } = validateRegisterInput(req.body);
if (!isValid) {
return res.status(404).json(errors);
}
//test arguments
// return res.send('OKKKK!!');
//register user is it does not exist in db
User.findOne({ email: req.body.email }).then((user) => {
if (user) {
errors.email = "Email already Registered!";
return res.status(404).json(errors);
}
bcrypt.genSalt(10, function (err, salt) {
bcrypt.hash(req.body.password, salt, function (err, hash) {
//adding new User to DB is Not Exist
const newMember = new User({
username: req.body.username,
email: req.body.email,
password: hash,
});
newMember
.save()
.then((newMember) => res.json(newMember))
.catch((err) => console.log(err));
});
});
});
}); //register route ends
//Login Route
router.route('/login')
.post((req, res) => {
const { errors, isValid } = validateLoginInput(req.body)
if (!isValid) {
return res.status(404).json(errors)
}
User.findOne({ email: req.body.email })
.then(user => {
if (!user) {
errors.email = 'User not found/not exist'
return res.status(404).json(errors)
} else {
bcrypt.compare(req.body.password, user.password)
.then(isMatch => {
if (isMatch) {
const token = jwt.sign({ id: user._id }, process.env.SECRET, { expiresIn: '1d' }, function (err, token) {
return res.json({
success: true,
token: token
})
})
} else {
errors.password = 'Password is incorrect'
return res.status(404).json(errors)
}
})
}
})
})
//returning route for logged in user
router.route('/')
.get( passport.authenticate('jwt', { session: false }),(req, res) => {
console.log('here! in home redirect')
res.json({
_id: req.user._id,
email: req.user.email,
username: req.user.username,
followers: req.user.followers,
following: req.user.following
})
})
module.exports = router;
You are not populating the Authorization header consistently or correctly. Assume your jwtToken value is AAAA for simplicity. In some cases you send BearerAAAAAA, in others you send Bearer : AAAA. The standard should be to use the string "Bearer", followed by one space, followed by the base64 encoding of the token (Bearer AAAA). See the RFC for more information: https://www.rfc-editor.org/rfc/rfc6750
When setting the header, you could use something like this:
const token = localStorage.getItem('jwtToken') //Or however you choose to get it
const headers = {
Authorization: `Bearer ${token}`
}

Resources