The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Finalizing JWT Authentication with AngularJS

Finalizing JWT Authentication with AngularJS

8:13
Adding middleware to the node server to decode and verify the token sent from the client. And tidying up the rest of the application. Finally, a walkthrough of the whole process.
Watch this lesson now
Avatar
egghead.io

Adding middleware to the node server to decode and verify the token sent from the client. And tidying up the rest of the application. Finally, a walkthrough of the whole process.

Avatar
Dinesh Dharmawardena

How would you go about implement a sliding expiration concept, where the expiration time of the token is reset based on user activity. I'm not sure if this is by way of refresh tokens, regardless there is very little information regarding refresh token with express-jwt.

In reply to egghead.io
Avatar
Kent C.

This is something several people have asked about and it's definitely on my radar of things that I'd like to do as an addendum to the series. Thanks!

In reply to Dinesh Dharmawardena
Avatar
Danny

Tnx for putting together this series! I haven't used JWTs in production before so maybe this is an obvious question...

From the vantage of the client, its plain old token-based security, right? Client does a form-based auth challenge (TLS still the only thing protecting username/password in transit) and gets a server-generated key to authenticate/authorize subsequent requests. The only client-side impact I see from the JWT spec deals with formatting the Authorization HTTP header (as opposed to some other means of passing along the key eg; different header scheme, cookies, query string params, or somewhere in the request body).

So same old song and dance on the front-end. Correct?

In reply to egghead.io
Avatar
Kent C.

You got it exactly right. Same old song once you have that interceptor in place.

In reply to Danny
Avatar
Ben

Question! How does the app.use(expressJwt({ secret: jwtSecret }).unless({ path: [ '/login' ]})); in conjunction with the /me route work? I'm writing my own version (http://stackoverflow.com/questions/27330953/jwt-angular-authentication-on-refresh) but somehow all I get back when I refresh and init my controller is a blank user object, so while I have the token on refresh it doesn't log in my user.

In reply to egghead.io
Avatar
Kent C.

I added a comment on the stack overflow post.

In reply to Ben
Avatar
Luigi

Hi Kent, i've read your comment on Stack Overflow, but i'm still in troubles about how to fix the issue after browser refresh!

In reply to Kent C.
Avatar
Kent C.

Hi Luigi,
I'm not sure I quite understand what issue you're having. Could you provide an example perhaps in a Stack Overflow question?

In reply to Luigi
Avatar
Luigi

Hi Kent, i mean that if i refresh the page, after login successfully, the Get User button and the vm.user.username variable don't work anymore. The strange thing is that i don't receive any error in the browser console or in the terminal..

In reply to Kent C.
Avatar
Kent C.

Hmmm, my best guess is that you're missing something from the lesson. Hard for me to know what the real problem is.

In reply to Luigi
Avatar
Luigi

You can check my code here:
https://github.com/LuigiFrattolillo/expressangular-jwt
I've downloaded egghead.io code from github as well and there is the same issue actually... :O

In reply to Kent C.
Avatar
Kent C.

Hmmm, interesting. When I cloned your repo and ran it, everything worked fine. My steps were:

$ git clone https://github.com/LuigiFrattolillo/expressangular-jwt.git

$ cd expressangular-jwt/

$ npm i && bower i

$ node server.js

Then in another terminal

$ http-server public/

Then I opened localhost:8080

Then logged in with username: luigi and password: p and everything seemed to work as expected. I tried logging out and back in and clicking Get User and everything worked fine. I'm not sure what trouble you're having.

Maybe try flushing your bower and node dependencies? (delete the directories and reinstall)

In reply to Luigi
Avatar
Luigi

Hi Kent, i just tried with firefox and it works! But it still breaks in Chrome...i'm using a macbook pro. Any idea?

In reply to Kent C.
Avatar
Luigi

I' ve just flushed the cache of Chrome... it seems working now, but there is a bit of delay during the which i can see hidden elements... in Firefox works perfectly instead!

In reply to Kent C.
Avatar
Kent C.

Might be a result of the recent AngularJS Batarang Chrome Extension release. It's been a bit rocky. They're working on fixes. You may want to disable the extension for now...

In reply to Luigi
Avatar
Luigi

True... Batarang is active... thanks for the suggestion and your patience!

In reply to Kent C.
Avatar
James

Hi Ken,

I have this working. Problem is if I refresh the page I am no longer logged in even though the localStorage still has my jwt token. How do you persist the authentication? It sucks having to re-authenticate every time. I've tried a bunch of different things and all of them have failed me.

Avatar
Kent C.

Make sure you have this initialization step in your controller: https://github.com/eggheadio/egghead-angularjs-aunthentication-with-jwt/blob/master/public/app.js#L16

UserFactory.getUser().then(function success(response) {
  vm.user = response.data;
});
In reply to James
Avatar
ken

Is it possible to use JWT for anonymous authentication (e.g., allow a user to only add/remove items from his own shopping cart, but not require the user to create a a username/password)?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?