Finalizing JWT Authentication with AngularJS

Share this video with your friends

Send Tweet

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.

James
James
~ 10 years ago

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.

Kent C. Dodds
Kent C. Dodds(instructor)
~ 10 years ago

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;
});
ken
ken
~ 10 years ago

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)?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 10 years ago

Absolutely.

ken
ken
~ 10 years ago

Thanks. So would I just skip the login part and handle everything else the same?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 10 years ago

That sounds like it would work well to me! Good luck!

Tommy
Tommy
~ 10 years ago

How would I go about authorizing routes with ui-router and this approach? say, a user gets redirected to a dashboard after they log in.

Kent C. Dodds
Kent C. Dodds(instructor)
~ 10 years ago

Good question. That would make a good lesson. What I have done is have a loading state that gets the user from the token and forwards them to the dashboard or the login. That's my default state.

milad
milad
~ 9 years ago

One of the worst thing about this website ( which I've subscribed for Premium btw ) is that none of the teachers actually explain anything , they just do a fast-forward coding , like there is someone chasing them !! For the love of god ( and the money that I've given to you) slow down !

JACOB
JACOB
~ 9 years ago

Thanks for the tutorial!

I had a question about handling expired tokens. How would you handle, on the client, a token that has expired?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 9 years ago

You can have another interceptor that checks a failed response for some message (or status code) that indicates the token has expired. In that case, remove the token from localStorage and send the user to the login screen.

Tony
Tony
~ 9 years ago

Kent,

Excellent tutorial. I do have a question on the .unless() usage. It seems very straightforward but for GET queries which pass parameters as part of the URL I've been having an issue where the .unless doesn't seem to think that it matches my values.

What I mean is this:

router.get('/:type/:email/:date?/', function ...

That is my route, off of "/v1/report"

I added the "/v1/report" as a test so my query could still work from the browser, however, it does not.

app.use(expressJwt({ secret: config.SECRET })
    .unless({ path: [ '/v1/auth', '/v1/is-alive', '/v1/report' ] }));

When I add the full parametrized URL it works correctly. Given that this is a common issue, how is one to work with unless and parametrized URLs?

inlightmedia
inlightmedia
~ 8 years ago

Hi I'm getting problems using the express-jwt module. As soon as I enter router.use(expressJwt({ secret: 'jwtSecret' }).unless({ path: [ '/login' ]})); I get an Error: UnauthorizedError: No authorization token was found<br> &nbsp; &nbsp;at middleware. Without the expressJwt line above, everything works and the Authorization header is present and the token is created fine and present in the auth header. It seems to me there is a problem with the unless() because when I put the expressJwt middleware on just the protected resources rather than using "app.use" (or router.use in my case) it works great. For some reason the '/login' path is not being excused from the authorization I think. Any ideas?

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

It's likely the APIs have changed since this video was recorded. I recommend looking at the docs and reaching out for support from the community.

Mike
Mike
~ 7 years ago

Thanks for doing this series. Any plans on updating it to Angular?