3

I know there is other questions about this problem, but I've ready more than 10 answers and tried every single one and none of them worked for me.

I'm getting this error: Uncaught ReferenceError: require is not defined when i try to load an external plain javascript file to encode in JWT.

This is the file I'm trying to include with require(): https://github.com/hokaccha/node-jwt-simple I've download with npm.

In my code I tried lots of things.

  • Include in the main.js with grunt concact;
  • Load manually inside the <head> with the <script src="path/to/folder"></script>;
  • Install RequireJs with npm for nodeJs;

With all of those attempts, I got the same errors. What am I doing wrong?

This is the code I'm using right now:

index.html

<head>
<script type="text/javascript" src="dist/js/angular.min.js"></script>
<script type="text/javascript" src="dist/js/ui-router.min.js"></script>
<script type="text/javascript" src="dist/js/jwt.js"></script>
[... rest of head ...]

appCtrl.js (will concat later on the build with the rest of the app)

.controller('MainCtrl', 
    ['$rootScope', '$scope', '$state', 
    function($rootScope, $scope, $state) {
        var jwt = require('jwt');
        var payload = { foo: 'bar' };
        var secret = 'xxx';
        var token = jwt.encode(payload, secret);
        console.log(token);
}])

My main objective with this is to handle the user authentication based on a JWT token. The problem right now is to encode/decode the token when the user is login in into the app.

Even with all of these, I still get the error. Do you guys know how to fix this?

celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
  • please use the full version of angular js **NOT** .min.js – Joe Lloyd Sep 24 '15 at 01:09
  • @JoeLloyd but why?What is the reason? I've always used this file. – celsomtrindade Sep 24 '15 at 01:10
  • why are you trying to require that module in Angular? it is for Node. I mean, why you need it there ? – Non Sep 24 '15 at 01:12
  • that's a node module. Why are you trying to load it client side? – charlietfl Sep 24 '15 at 01:12
  • no real errors from .min files – Joe Lloyd Sep 24 '15 at 01:12
  • Here is the answer, you cannot use require() because it does not exist in the client side. Try using requireJS(). Please see: http://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined – Hieu Le Sep 24 '15 at 01:13
  • I'm trying to get that file because it has functions to encode/decode the JWT I'll use to make the user authentication. – celsomtrindade Sep 24 '15 at 01:14
  • You cannot do that... – Thalaivar Sep 24 '15 at 01:16
  • but isn't jwt encoding a server task? Client just consumes it. As for using dev version of angular...errror and stack trace output is more verbose – charlietfl Sep 24 '15 at 01:16
  • Yeah @charlietfl is right, this is for node.js not for client side angularjs. you won't be able to use it i think – Hieu Le Sep 24 '15 at 01:19
  • Ok, but then... How should i proced with it to be able to generate the encoded jwt? Can you guys tell? Because on the docs from `jwt-simple`, it's using a `require(jwt-simple)` so i tought that would be the way. – celsomtrindade Sep 24 '15 at 01:20
  • 1
    @CelsomTrindade: User authentication is handled in backend, where you will generate a token using JWT and send it to your client... your client will store that in session storage and check for authorization for each access... – Thalaivar Sep 24 '15 at 01:21
  • Server is nodeJS/mongodb/JWT... you will have rest-end points which will be consumed by angularjs... – Thalaivar Sep 24 '15 at 01:22
  • @Thalaivar can you provide an example on how should i proced to create this JWT token on server side? I'm running my webapp with angularjs and php/mysql as backend. And sorry if a newbie question, but I'm new to this and just spent the whole day trying to figure it out. – celsomtrindade Sep 24 '15 at 01:24
  • 1
    @CelsomTrindade on jwt site there are several different php library repos listed. Should be easy to find tutorials also. If you aren't running node server you have the wrong library files – charlietfl Sep 24 '15 at 01:25
  • Correct me if I'm wrong, but I'll need to use a server encode code to generate my JWT, [like this](https://github.com/emarref/jwt), for php. Then, in my webApp I'll have to have someother function to just decode the token and be able to use the data in my app. For example, show a welcome msg with the logged user name. – celsomtrindade Sep 24 '15 at 01:38
  • This doesn't even make any sense. You say in comments that your backend is php, yet you are trying to use a node library here. – Claies Sep 24 '15 at 02:20
  • Since I'm new to this, I was following the docs i found, which was based on node. After the comments, i went to another way, using the php library provided by the jwt.io website. But still, I don't know how to use that.. But I'm trying on a better way now – celsomtrindade Sep 24 '15 at 02:25

2 Answers2

5

If you want to use require on the client, you need to use something like Browserify or webpack (I definitely recommend the latter).

You're getting that error because, in fact, you have never defined require anywhere on your client-side code. That JWT repo does not provide that functionality for you.

Also, looking at the docs for the JWT repo you provided, it appears that it expects you to use it in a node.js environment (which provides the commonjs require for you).

Josh Beam
  • 19,292
  • 3
  • 45
  • 68
  • After some comments on the question i discovered i need to run it in another way. Since my database is with mysql/PHP I'll have to use it with the PHP library provided by jtw.io. But I'm still trying to figure it out how to install it to encode the token. Any ideas? – celsomtrindade Sep 24 '15 at 02:09
0

On the server side (ie server.js file), for node, use: 

var jwt = require('jwt-simple');

Then, to encode: 

var secret = "Ieaticecreamforbreakfast";

and in your login functionality... once you check the login criteria

var token = jwt.encode({id: ID, otherInfo: "can go here"}, secret); 

res.send({token: token});

You can then set the response token in as a header for additional http requests in your angular, frontend side. Therefore, whenever a user makes a request to the backend, you have access to their encoded ID in the JWT

Paul G
  • 829
  • 7
  • 11