Demo for ngEurope's talk

JavaScript 66.46% CSS 0.70% HTML 32.84%

angularjs-jwt-authentication-tutorial's Introduction

Authentication on AngularJS with JWTs

In this demo we'll show step by step how to add Authentication to your AngularJS app with an API that uses JWTs.

Running the example

This application has an AngularJS Frontend and a NodeJS backend

Frontend

In order to run the the AngularJS app, all you need to do is to start a server at that folder. I recommend using serve for that. Just run:

npm install -g serve
bower install
serve

Then go to http://localhost:3000 and see the Frontend app running

Backend

The backend is made with node, so you must have node and npm installed.

Then, just run node server.js to start the server on the port 3001.

Branches

In this repository you'll find several branches. Each of the branches represents one step taken to implement the Authentication.

1 - Start Branch

This is the starting point for the application.

If you go to http://localhost:3000/#/ you'll see the main page of the demo.

In there, you'll see 2 buttons to do 2 API calls:

The first one, does an API call that doesn't require Authentication
The second one does an API call that does require authentication

Try clicking both to see what happens.

2 - Authentication implemented in the Backend and UI in the FrontEnd

In this branch, we've added the UI for both the Signup and Login.

Also, we've implemented the Login and Signup on the Backend. It returns the JWT to the user.

3 - User Authentication Finished

In this branch, user Authentication works in the Frontend. You can see the Login and Signup implemented and working.

Go to http://localhost:3000/#/login to see the Login page and login. You'll see that if you click on the Call secure API button, it'll still throw an error. That's because we need to send the JWT on the Authorization header. Let's do that!

4 - Sending JWTs on requests

Now, we've implemented sending the JWT on the Authorization header on every request. Check it out here

Now, before logging in, try going to http://localhost:3000/#/. You should still see this page even though you're not logged in. Try clicking on the Call secure API button and check that you still get the Unauthorized error. Now, go to the Login page and log in. Try clicking again on Call secure API. Check that it's not returning a correct response since the Authorization header is sent in every request.

5 - Restrict access to routes

In this section, we've restricted access to routes that require authentintication for anonymous users. Go to http://localhost:3000/#/ without being logged in and you'll see that you're redirected to the Login page. You can see the implementation for that here.

angularjs-jwt-authentication-tutorial's People

Contributors

Stargazers

Watchers

Forkers

shaharlinial lgiaquintaruiz noteon paulbhartzog duncanmckerracher geekzy joelmeiller mouthzipper iamike lnickers2004 dayatz tmngassa jiacontrerasp no-problemo madcocomo ikane coderep dileep-yadav vicchugu trestyeung chriselements zikram danielr50 jeroenkops thinkingin jespermandalhansen luchoalvarez funyx jespinoza711 sakthiorg redrum1900 xuyuanxiang irom77 romeolionel kod3r josediego christopher-abastar eric2323223 ineo4j gaggigger kayhani openube lefthook123 edumerckx jhoelter junaidqadirb ursenix georotzen victordov rupeshmm michaelavi anthonyturrigiano abhilash0001 niklasp dslusser mehreencs87 jensworkgit szuke usaukel erichodges yasuf jimihford razvandobrovat aniroel nico-nicoru flippr grsind19 thanakorn-ki adelindobre michael-mafi resultakak mryongzhang sudheerkr geekays samyukthaj tieuuphuthuy developpeur10 feiman virtualscreenz luokeychen kazeidesign farhan1988 kqiu2 andcrow25 blmeena1991 jacksnow00 j9amit chumchumagency shanwije khairy-mohamed r3sult ramesh1589 derejekitaw userolas 1296mhz bubbleeric hhy5277 eduportella ratankesharwani iq-scm

angularjs-jwt-authentication-tutorial's Issues

Suggestions for API security

This is a great tutorial and code base to learn from. There is one thing that I am not sure of though. The application shows how to allow users to authenticate themselves using JWT, what would be the best practice if I want to protect and allow other devs to use the API with JWT? Auth0 have experience with this issue.

Consider an application that allows other devs to access the API. This would be different from the code that allows users to authenticate themselves.

Thanks

error when update to angularjs 1.7.2

application seems working but
console saying Error: "transition superseded" and stuff.

Login page accepts invalid passwords.

The if statement below is skipped all the time and therefore allows a user to login with an invalid password as long as they have a valid username. Just a small bug that is a big deal....


if (!user.password === req.body.password) {
return res.status(401).send("The username or password don't match");
}

Branch for refresh tokens?

Is it possible to add a new branch which includes the use of a refresh token?

Thank you!

run bower in frontend

add to frontend readme that you need to execute bower install

Restrict access to all pages except few

Hi, i'm new to Angularjs and want to implement authentication. Since in my country it is difficult to use Auth0 service, so implement this functionality natively is my only option..

I have checked your demo code, and there is a few things that i don't understand.

Say i want to restrict access to all my pages except three: "/home", "/about" and "/login". How can I achieve this effect exactly or can you please tell me where is the part of your code which achieve this?

Thank you.

No such app - http://auth0-todo-test-api.herokuapp.com/

In the readme.md there is a link to a demo app on heroku http://auth0-todo-test-api.herokuapp.com/ but it doesn't work.

Heroku | No such app
There is no app configured at that hostname.
Perhaps the app owner has renamed it, or you mistyped the URL.

Problems with JWT interceptor

I get this error when I want to use the JWT interceptor

 Error: [$injector:unpr] Unknown provider: eProvider <- e

The line that causes the error looks like this

.config(['$stateProvider',
            '$urlRouterProvider',
            '$locationProvider',
            'jwtInterceptorProvider',
            '$httpProvider',
            '$interpolateProvider',
            function($stateProvider,
                $urlRouterProvider,
                $locationProvider,
                jwtInterceptorProvider,
                $httpProvider,
                $interpolateProvider) {
                // JWT
                jwtInterceptorProvider.tokenGetter = function(store) {
                    return store.get('jwt');
                };

                console.log('$httpProvider', $httpProvider);
                $httpProvider.interceptors.push('jwtInterceptor'); <-- THIS ERRORS OUT

                // Routing for moder browsers
                $locationProvider.html5Mode(true);
                // Fallback for invalid routes or states
                $urlRouterProvider.otherwise("/");
....

Any ideas what I am doing wrong? Thanks

Backend not working for me

Hola Martin, me clone tu repo y a la hora de levantar el front va divino pero al escribir en el backend node server.js no funciona. Tengo intslado node y npm. Sabes si tengo que hacer algo mas? Estoy en Win7 por cierto.

P.D: Super interesante lo que hacen en auth0, felicidades!

auth0-blog / angularjs-jwt-authentication-tutorial Goto Github PK