I have created a node.js application and have successfully define a protected route with token. I can run it via POSTMAN. I am trying to understand how then do I integrate this into a HTML page and login and call out the protected route to display on a HTML page instead of using POSTMAN. I am creating a html website and want a user login and then they can access certain link in the page.
My app.js
app.post('/api/posts', verifyToken, (req, res) => {
jwt.verify(req.token, secretKey, (err, authData) => {
if(err) {
res.sendStatus(403);
} else {
res.json({
message: 'Post created...',
authData : authData,
});
}
});
});
app.post('/api/login', (req, res) => {
// Mock user
var email=req.body.email;
var password=req.body.password;
const userdata = {
email: email,
password: password
}
console.log(userdata);
jwt.sign({userdata}, secretKey, (err, token) => {
res.json({
token
});
});
});
my HTML
<html>
<head>
</head>
<body>
<div>
<h1>Portal API Test site</h1>
<form action="/api/posts", method="POST">
<h2>Getting from Header</h2>
<input type="submit" value="Submit", >
</form>
</div>
</body>
First of all, i will suggest you to use at least a small framework to make the work easier for you such as react, svelte ... Otherwise you can jQuery to do that.
To log in a user, you need to save the JWT in cookie or localStorage. That's not a very difficult task but remember to set the header of every requests on protected routes with the Bearer Token
You can follow this example: https://github.com/chaofz/jquery-jwt-auth/blob/master/index.html
localStorage.setItem('token', yourTokenresponseFromExpress);
Related
I know there is no official Auth0 SvelteKit plugin for direct use, so I am trying to implement a manual approach using basic API functions in JS for server side authentication and session management, using auth0.js version 9.11.
Using the following page, I can redirect the user to the Auth0 universal login page, and the user is redirected to my landing page after a successful login. My plan is to acquire the user details from the user token on the page then send these details to a server endpoint. In the endpoint I will save these details to a database (with the access token) for login session management, then send a HttpOnly cookie for auth guards..etc.
However, I keep getting the following error within the landing page:
Uncaught (in promise) TypeError: can't assign to property "__enableIdPInitiatedLogin" on "#access_token=eyJhbGciOi...<very long token>...BNW1uzA&scope=openid%20profile%20email&expires_in=7200&token_type=Bearer&state=rtre4": not an object
The code that is used to fetch user details and doesn't work is as follows:
<script lang="ts">
import { onMount } from 'svelte';
onMount(async () => {
// Initialize the Auth0 application
var webAuth = new auth0.WebAuth({
domain: '<domain>',
clientID: '<clientId>'
});
//test
console.log(window.location.hash);
// Parse the URL and extract the Access Token
webAuth.parseHash(window.location.hash, function (err, authResult) {
if (err) {
return console.log(err);
}
// webAuth.client.userInfo(authResult.accessToken, function (err, user) {
// // This method will make a request to the /userinfo endpoint
// // and return the user object, which contains the user's information,
// // similar to the response below.
// });
});
});
</script>
<svelte:head>
<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
</svelte:head>
<div class="content">
<p>Redirecting, please wait...</p>
</div>
The code that redirects the user to the universal login page is as follows:
<script lang="ts">
import Button from '#smui/button';
const login = () => {
// Initialize app - auth0 is defined as external script in <svelte:head>
var webAuth = new auth0.WebAuth({
domain: '<domain>,
clientID: '<clientid>'
});
// Calculate URL to redirect to
var url = webAuth.client.buildAuthorizeUrl({
clientID: '<clientid>', // string
responseType: 'token id_token', // code or token
redirectUri: 'http://localhost:3000/login',
scope: 'openid profile email',
state: '<state>',
nonce: '<nonce>'
});
window.location = url;
}
</script>
<svelte:head>
<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
</svelte:head>
<div class="content">
<Button on:click={login}>Login</Button>
</div>
EDIT I have added the id_token to the login url construction (which also requires nonce parameter) based on Kalana's comment and modified the error screenshot based on the new code.
After some more digging, I have realized that the options supplied to the parseHash function needs to be a JSON object. You also need to have id_token in the creation of login request (thanks to the comment by Kalana), and a nonce parameter as well. You have to give the same state and nonce values to the parseHash function, too. Additionally, the hash for this function is optional; if none is given it can get it from windows.location.hash automatically.
In the end, the working code for fetching the user information from Auth0 service is as follows:
<script lang="ts">
import { onMount } from 'svelte';
onMount(async () => {
// Initialize the Auth0 application
var webAuth = new auth0.WebAuth({
domain: '<domain>',
clientID: '<clientid>'
});
// Parse the URL and extract the Access Token
webAuth.parseHash({state: "<sameState>", nonce: "<sameNonce>"}, function (err, authResult) {
if (err) {
return console.log(err);
}
webAuth.client.userInfo(authResult.accessToken, function (innerErr, user) {
// This method will make a request to the /userinfo endpoint
// and return the user object, which contains the user's information,
// similar to the response below.
if (innerErr) {
return console.log(innerErr);
}
console.log(user);
});
});
});
</script>
<svelte:head>
<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
</svelte:head>
<div class="content">
<p>Redirecting, please wait...</p>
</div>
I followed a tutorial to add login and registration to my Node.js app using JWT token and I'm having a hard time logging in and redirecting to my 'logged in' admin page. User registration works great, but the login portion I can't figure out.
This is the tutorial I was following:
https://medium.freecodecamp.org/learn-how-to-handle-authentication-with-node-using-passport-js-4a56ed18e81e
My code for login looks like this:
router.post('/login', auth.optional, (req, res, next) => {
console.log(req.body);
var user = {
email: req.body.email,
password: req.body.password
}
if (!user.email) {
return res.status(422).json({
errors: {
email: 'is required',
},
});
}
if (!user.password) {
return res.status(422).json({
errors: {
password: 'is required',
},
});
}
return passport.authenticate('local', { session: false }, (err, passportUser, info) => {
if (err) {
return next(err);
}
if (passportUser) {
const user = passportUser;
user.token = passportUser.generateJWT();
console.log("TOKEN: " + user.token);
res.setHeader('Authorization', 'Token ' + user.token);
return res.json({ user: user.toAuthJSON() });
}
return res.status(400).json({
errors: {
message: info,
},
});
})(req, res, next);
});
My '/admin' "logged in" route looks like this:
router.get("/admin", auth.required, function(req, res) {
res.render('admin', {
user : req.user // get the user out of session and pass to template
});
});
I'm not sure how I can redirect to my '/admin' route while also passing the token because currently I am seeing the following error after logging in. Makes sense since I am not passing the token to the '/admin' route...but how do I do that? :)
UnauthorizedError: No authorization token was found at middleware
Thanks in advance for the help!
EDIT:
Still can't figure this out and don't really understand how this flow is supposed to work...where do the headers need to be set to the token and how do I redirect to my admin page once the login is successful.
Here is my middleware code if this helps:
const getTokenFromHeaders = (req) => {
console.log("REQ: " + JSON.stringify(req.headers));
const { headers: { authorization } } = req;
if(authorization && authorization.split(' ')[0] === 'Token') {
return authorization.split(' ')[1];
}
return null;
};
const auth = {
required: jwt({
secret: 'secret',
userProperty: 'payload',
getToken: getTokenFromHeaders,
}),
optional: jwt({
secret: 'secret',
userProperty: 'payload',
getToken: getTokenFromHeaders,
credentialsRequired: false,
}),
};
Your code does not have a problem. You seem to be confused with the login flow from server to client (Frontend/Web).
Let's first have a look the RESTFUL way of doing it. The article also refers to the same flow.
The RESTFUL API flow looks like this:
User requests for login:
POST: /api/v1/auth/login with username and password in request body.
If successful, user is returned with basic inforamtion and token.
If not, user is returned a 401 (Unauthorized) status code.
The login flow ends here.
The token provided earlier to the user is used to make subsequent calls to the backend, which a user can use to perform different operations on the sustem. In essence, it is the client which requests server for subsequent actions with the token provided in the login request.
So for your case, user after receiving the token should make a request for retrieving admin information from the backend.
But, I am assuming you are rendering views from your server-side and you want to render the admin view once the user is successfully logged in, and that's pretty straight forward.
Instead of your res.json() after successful login. You need to use res.render().
res.render('admin', {
user: user.toAuthJSON() // assuming your user contains the token already
})
Edit:
Since res.render() does not change the url in the browser. For that, you need to use res.redirect(). But the problem is, you can not send context in res.redirect().
To achieve that, you will need to pass in the user token as query paramter. See here.
TL;DR
// assuming you are using Node v7+
const querystring = require('querystring');
const query = querystring.stringify({
token: user.token,
});
const adminRoute = '/admin?' + query;
res.redirect(adminRoute)
And in your admin route, you need to slightly modify the code.
Verify the token belongs to a real user and get user information out of the token.
Render the admin template with user information retrieved from step 1.
router.get("/admin", function(req, res) {
// verify the token
const token = req.query.token;
const user = null;
jwt.verify(token, 'secret', function (err, decoded) {
if (err) {
res.status(401).send('Unauthorized user')
}
// decoded contains user
user = decoded.user
});
res.render('admin', {
user : user
});
});
I'm somewhat new to this as well, but I've got it working as follows.
In your server.js file:
const passport = require("passport");
const JwtStrategy = require("passport-jwt").Strategy;
const ExtractJwt = require("passport-jwt").ExtractJwt;
app.use(passport.initialize());
const opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = Keys.secretOrKey;
passport.use(
new JwtStrategy(opts, (jwt_payload, done) => {
// somefunction looks up the id in jwt payload and
// supplies passport the authenticated user via the "Done" function
somefunction.user(jwt_payload.id)
.then(user => {
if (user) {
return done(null, user);
}
return done(null, false);
});
})
);
In your API definitions
const jwt = require("jsonwebtoken");
router.post("/login", (req, res) => {
const { userInfo } = req.body;
// userInfo has username and password in it
// anotherFuction validates the user id and password combo
anotherFunction(userInfo.id, userInfo.password)
.then(isAuthenticated => {
if (isAuthenticated) {
const payload = {
id: user.sAMAccountName,
firstname: user.givenName,
lastname: user.sn
};
// Sign Token with the payload
jwt.sign(
payload,
Keys.secretOrKey,
{ expiresIn: 3600 },
(err, token) => {
res.json({
success: true,
token: "Bearer " + token
});
}
);
} else {
// don't mind the statuses ^_^'
return res.status(401).json({ error: "Login failed." });
}
})
.catch(err => {
return res.status(400).json(err);
});
});
After calling the API you want to set the auth token. The following lets you delete the token if nothing is passed in, effectively "Logging out".
const setAuthToken = token => {
if (token) {
// Apply to every request
axios.defaults.headers.common["Authorization"] = token;
} else {
// Delete Auth Header
delete axios.defaults.headers.common["Authorization"];
}
};
If you're trying to use it in the front end, you need to use jwt_decode to pull the values from the token and set it however you deem necessary. If using redux to store login data it should look something like this. As I feel that the discussion of using localstorage for jwtToken is outside of the scope of this, just know would need to check for the token.
if (localStorage.jwtToken) {
setAuthToken(localStorage.jwtToken);
const decoded = jwt_decode(localStorage.jwtToken);
store.dispatch({
type: USER_LOGIN,
payload: decoded
});
}
Hope this helped.
From one beginner in JWT to another. Good luck.
How can i directly authenticate the user after signup.
Below are the the deatail of serializeUser and deserializeUser.
passport.serializeUser(function(user, done) {
done(null, {tutorId: user.tutorId, userType: user.userType});
});
passport.deserializeUser(function(userData, done) {
Tutor.getTutorById(userData.tutorId, (err, user) => {
if (err) {
try {
logger.silly(`message: POST inside passport.deserializeUser; file: index.js; error: ${err}; user: ${JSON.stringify(user)}`);
logger.error(`message: POST inside passport.deserializeUser; file: index.js; error: ${err}; user: ${JSON.stringify(user)}`);
} catch (e) {
You can use req.login() after successful registration.
From official Passport documentation:
Note: passport.authenticate() middleware invokes req.login()
automatically. This function is primarily used when users sign up,
during which req.login() can be invoked to automatically log in the
newly registered user.
A sample registration code might look like this:
router.post("/register",(req,res) => {
var user = new User();
user.name = req.body.name;
user.email = req.body.email;
//define other things here
//create hash and salt here
user.save().then(user => {
//on successfult registration
//login user here, using req.login
req.login(user ,err => {
if(!err){
//redirect to logged-in page
//or user page
res.redirect('/')
}
})
})
})
Read about req.login() in official passport documentsation
I hope this helps you out.
you can create token just after successful registration and send it back in registration response
My frontend is Reactjs and backend Nodejs and expressjs with Postgresql database.
I have a simple signin page which checks user authentication from database.
In my Reactjs app, after signing in, user uploads files and then there is a GET method on my nodejs which send files (res.sendFile) when user wants to get the file from server. It is just a simple
<img alt='none' src=`http://example.com/source/${filename}` />
in my Reactjs app which does request for file.
Problem: if I am not logged in to my app, I can paste the URL in my browser and the file is displayed which is NOT what I want.
I want the GET method on nodejs should check for authentication of user either if the user is signed in or not, and then only fulfill the request of sending file.
How can I do it?
Should I use some kind of POST method in my Reactjs app before it makes any GET request to the same location of GET method then parse the information then handle it to app.get etc...
This is my nodejs + expressjs.
server.js
app.post('/signin', (req, res) => { signin.handleSignin(req, res, db, bcrypt)})
app.get('/source/:fileid', (req, res) => {
const { fileid } = req.params;
res.sendFile(__dirname + /data/ + fileid);
});
./controllers/signin.js
const handleSignin = (req, res, db, bcrypt) => {
const { email, password } = req.body;
if (!email || !password ) {
return res.status(400).json('Incorrect form submission');
}
db.select('email', 'hash').from('login')
.where('email', '=', email)
.then(data => {
const isValid = bcrypt.compareSync(password, data[0].hash);
if (isValid) {
return db.select('*').from('users')
.where('email', '=', email)
.then(user => {
res.json(user[0])
})
.catch(err => res.status(400).json('unable to get user'))
} else {
res.status(400).json('wrong credentials' )
}
})
.catch(err => res.status(400).json('wrong credentials'))
}
module.exports = {
handleSignin: handleSignin
}
You have to implement authentication mechanism via cookie or session. After successful login you will set a cookie in the browser and on each HTTP req you will have access to cookie data.
Create a middleware function which will check for valid cookie data in req object for each API requests.
If a user is not logged in and trying to access the URL you won't receive data in the cookie and you can unauthorized (401) the access to that particular resource.
// On valid credentials, you can set the cookie like this
res.cookie(cookieName, cookieData, cookieOptions);
and middleware function can go like this
function checkSession(req, res, next) {
if(!req.cookies || !Object.keys(req.cookies).length){
res.sendStatus(401)
}
else next();
}
You can find more details on how to use cookie-parser here.
I have the following Controller for my login page:
// Authentication Controller
// the basics of Passport.js to work.
var AuthController = {
// localhost:1337/login Render the login page
// <form role="form" action="/auth/local" method="post">
// <input type="text" name="identifier" placeholder="Username or Email">
// <input type="password" name="password" placeholder="Password">
// <button type="submit">Sign in</button>
// </form>
login: function(req, res) {
var strategies = sails.config.passport,
providers = {};
// Get a list of available providers for use in templates.
Object.keys(strategies).forEach(function(key) {
if (key === 'local') return;
providers[key] = {
name: strategies[key].name,
slug: key
};
});
// Render the `auth/login.ext` view
res.view({
providers: providers,
errors: req.flash('error')
});
},
// Log out a user and return them to the homepage
// Passport exposes a logout() function on req (also aliased as logOut()) that
// can be called from any route handler which needs to terminate a login
// session. Invoking logout() will remove the req.user property and clear the
// login session (if any).
logout: function(req, res) {
req.logout();
res.redirect('/login');
},
// The registration form is Just like the login form
register: function(req, res) {
res.view({
errors: req.flash('error')
});
},
// Create a third-party authentication endpoint
provider: function(req, res) {
passport.endpoint(req, res);
},
// Create a authentication callback endpoint
// This endpoint handles everything related to creating and verifying Pass-
// ports and users, both locally and from third-aprty providers.
// Passport exposes a login() function on req (also aliased as logIn()) that
// can be used to establish a login session. When the login operation
// completes, user will be assigned to req.user.
callback: function(req, res) {
passport.callback(req, res, function(err, user) {
req.login(user, function(err) {
// If an error was thrown, redirect the user to the login which should
// take care of rendering the error messages.
if (err) {
res.redirect('/login');
}
// Upon successful login, send the user to the homepage were req.user
// will available.
else {
res.redirect('/');
}
});
});
}
};
module.exports = AuthController;
I am using Mocha as my test framework. The application is based on Sails.
How would I write Mocha test cases and run them on the provided Controller?
I'm using supertest to call controllers as a user, to do so, first lift the sails in the before function so it can be used as the server by supertest.
before(function (done) {
Sails.lift({
// configuration for testing purposes
log: {
//level: 'silly'
level: 'silent'
},
hooks: {
grunt: false,
},
}, function (err, sails) {
done(err, sails);
});
}
Then initialize supertest with the url of your sails app
request = require('supertest');
agent = request.agent(appurl);
You can now write test to post / get data to test your controller from frontend as would a client.
it('should do the post and return whatever', function (done) {
agent.post('/controller/function')
.send(the_post_object_with_params)
.end(function (err, res) {
if (err) {
console.log(err);
}
console.log(res.body); // the content
done();
});
}
I think the main thing is to include sails application into your testcase. I also found no examples with controllers tests but some with models:
Is it possible to use the Mocha Framework against a model in Sails.js?
Cannot unit test my model in sailsjs