I am trying to implement jwt-authentication using nodejs and React by following https://www.youtube.com/playlist?list=PLvTjg4siRgU0HS3cANo7KZ52Wkud083TL.Here they have used react hooks but I want to implement it in class and without redux.But I don't know how to recieve the cookie in the front end by using axios my current code is
Backend:-
user.js
userRouter.post('/login',passport.authenticate('local',{session : false}),(req,res)=>{
if(req.isAuthenticated()){
const {_id,username,role} = req.user;
const token =signToken(_id);
res.cookie('access_token',token,{httpOnly:true,sameSite:true});
res.status(200).json({isAuthenticated :true,user : {username,role}});
}
})
Frontend:-
login.js
onSubmit(e){
e.preventDefault();
const user={
username:this.state.username,
password:this.state.password
}
console.log(user);
axios.post('http://localhost:5000/user/login',user)
.then(res=>{
console.log(res);
if(res.data.isAuthenticated){
console.log("authenticated")
}
})
}
I am about to study this right now so not sure but I have seen you need to set following in the index.js (React part):
axios.defaults.withCredentials = true;
and that's it, the cookie should be saved in the browser.
Have a look here, it might help: https://github.com/eXtremeXR/APIAuthenticationWithNode/blob/master/client/src/index.js
Related
I am facing a terrible problem. I am making an app with Google auth functionality. All is done. When I login with Google I am successfully setting a session in my browser's cookie but the problem is I cannot get current user by making request from react but I can get current user from browser
// If I visit this from browser I can get current user
https://localhost:8000/api/v1/auth/success
//but the same not work when I make request with react
const fetchUser = async () => {
const { data } = await axios.get(
"https://localhost:8000/api/v1/auth/success"
);
console.log(data);
try {
} catch (err) {}
}
Someone please solve my problem if you want I can show you my code via any way.
I am switching over to using cookies for a project. Client is react and server is express, using js-cookie and cookie-parser npm packages. On the client the cookie gets set just fine, but on my server when I try to get the cookies nothing is there. Idk if the browser is sending them. I am testing in a firefox browser.
here is where I set them:
if (
action.type === 'user/loginSuccess' ||
action.type === 'user/signupSuccess'
) {
const currentUser = JSON.stringify(action.payload);
localStorage.setItem('isAuth', true);
localStorage.setItem('currentUser', currentUser);
Cookies.set('currentUser', currentUser);
Cookies.set('isAuth', true);
}
here is how I try to get them:
const getAll = async (req, res) => {
try {
const products = await Product.find({ storeId: req.user.storeId });
console.log('Cookies:', req.cookies); //is an empty object
res.status(200).json(products);
} catch (err) {
res.status(500).json('Server error');
}
};
I Suggest Using Node-Localstorage :
//import module
import {LocalStorage} from 'node-localstorage'
// constructor function to create a storage directory inside our project for all our localStorage setItem.
var localStorage = new LocalStorage('./scratch');
//Setting localStorage Item
localStorage.setItem('Name', 'Manish Mandal')
//console.log localStorage item with the key Name
console.log(localStorage.getItem('Name'))
NEED YOUR EXPERIENCE AND KNOWLEDGE.
im building a web application where client-side using Laravel 8 (fckid.test using valet or http://localhost:8000) and Node.js (http://localhost:3000) for server-side API.
Serverside using JWT for authorization and sending the token through Httponly Cookie.
My problem is when testing it with Postman and ThunderClient, it works perfectly as shown by picture below
here is on postman
here is how my backend looks like
1.Router
const usersController = require('../controllers/users.controller')
const express = require('express')
const router = express.Router()
router.post('/login', usersController.login)
The Controller
exports.login = (req, res, next) => {
const data = {
email: req.body.email,
password: req.body.password
}
console.log('Request made by :', req.headers)
usersService.login(data, (error, results) => {
if (error) {
console.error(error)
res.status(error.statusCode).send({
msg_head: "error",
msg_body: "Internal Server Error",
data: error
})
} else if (results.status) { //if status = true
console.log(results)
res
.status(results.statusCode)
.cookie("accessToken", results.accessToken, {
httpOnly: true,
path: '/',
sameSite: 'none',
domain: 'fckid.test'
})
.send({
msg_head: "success",
msg_body: results
})
} else {
console.error(results)
res.status(results.statusCode).send({
msg_head: "error",
msg_body: results
})
}
})
}
this is how my laravel client-side looks like
route (im using web.php route)
Route::post('/auth-login', [LoginController::class, 'login'])->name('auth-login');
LoginController
class LoginController extends Controller
{
public function login(Request $request)
{
$body = $request->post();
$response = Http::post('http://localhost:3000/users/login', $body);
if ($response->status() == 200) {
return redirect()->route('view_student');
// return $response;
} else {
return redirect()->route('login.page');
}
}
}
what i already tried are
give exception to this route to VerifyCsrfToken.php
making request from Microsoft Edge, Firefox and Chrome
but those attempts still give me the same result where httponly cookie is not set to the browser.
I try to $request->getHeaders() and it igives me correct response where i taught that the server already send correct information as expected.
on browser it looks like laravel overide the results from server
it's been 2 days looking for some information that can help me to solve this problem on youtube, google, but no one really talk about this. hope you guys could help me out of this stuck.
Thanks
Cannot send "httponly" value as false by PHP after new browser updates.
If you need to use your cookie on the JS side, set your cookie on the client side with document.cookie.
document.cookie = "test1=Hello; SameSite=None; Secure";
Console Error: TypeError: jwt.sign is not a function
Trying out the latest Node version 13 using "type": "module" in my package.json. All is going well so far until I tried to add token authentication with 'jsonwebtoken'. Not sure if it's my code or maybe a compatibility issue? Using their ES Module has some differences from those I use in React.
create new token helper function
import * as jwt from 'jsonwebtoken'
export const newToken = user => {
return jwt.sign({id: user.id}, JWT_SECRET, {
expiresIn: '1d'
})
}
signup function
export const signup = async (req, res, next) => {
// ...
try {
//.. create user code ..
const user = new User({email, password})
user.save()
const token = newToken(user)
return res.json({token, user})
} catch (error) {
console.error(error)
res.status(500).send('Server Error')
}
and everytime I hit the signup route, I get the 500 Error, and a user still gets registered to my database. Hitting a wall a bit..
Thanks and happy holidays guys!
Edit: I just changed my import/export statements to common modules, and I was able to get tokens. Still don't know how to fix this to work with ESModules, or even what the issue is
jsonwebtoken uses default exports to expose its functions (https://github.com/auth0/node-jsonwebtoken/blob/master/index.js).
Therefore, you can load the module using import like this:
import jsonwebtoken from 'jsonwebtoken';
const token = jsonwebtoken.sign({ foo: 'bar' }, 'shhhhh');
I am creating a GraphQL app using Next.js for server side rendering. As you might know, there is a recommended way to implement clean URL using Express. I am trying to achieve the same using graphql-yoga but it's not working.
I have tried server.express.get('/route', ...) and server.get('/route', ...) but nothing is working. In the documentation they have given server.express.get(server.options.endpoint, handler()) but it's not working for me.
Has anyone ever implemented clean Next.js URL in a GraphQL Yoga server, and how did you achieve it? Below is how I am creating the server.
function createServer() {
return new GraphQLServer({
typeDefs: "src/schema.graphql",
resolvers: {
Mutation,
Query
},
context: req => ({ ...req, db })
});
}
const server = createServer();
server.express.post('/product/name', (req,res,next) => {
//this is where i want to implement next clean url
//but it's not working
console.log('Am never reached..');
next();
})
With the new versions of Next.js, creating clean URL is straightforward.
Create a parameterised page (e.g. pages/post/[pid].js):
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post
More info in the Next.js documentation regarding dynamic routes.
You can then link to it and show the desired URL:
<Link href="/post/[pid]" as="/post/abc">
<a>First Post</a>
</Link>